How to use row State in v8 like useRowState in v7?

[sammyKimGoorm]

I`m using row.setState in v7 like this.

...
<tbody>
    {rows.map((row) => {
        return (
            <tr
                onMouseEnter={() =>
                    row?.setState({ hover: true })
                }
                onMouseLeave={() =>
                    row?.setState({ hover: false })
                }
            >
...

API Reference

How to using it in v8?

[CalMlynarczyk]

I'm interested in finding a solution for this as well. My use case is that I want to add some row-level toggles that modify each column in a different way. I'd prefer to not have to store these properties in the table data because it causes too many re-renders of the entire table when I modify just a single row.

Some ideas I've tried to solve this in React (without success):

1. Creating a custom row component where the state for each row is stored. I add the state to the props object that I pass to flexRender.

function TableRow<TRow>({ row }: { row: Row<TRow> }) {
  const [rowState, setRowState] = useState(1);

  return (
    <tr>
      {row.getVisibleCells().map((cell) => (
        <td id={cell.id}>
          {flexRender(cell.column.columnDef.cell, {
            ...cell.getContext(),
            rowState,
          })}
        </td>
      ))}
    </tr>
  );
}

The problem with this is that, at least in TypeScript, the type definition of the cell function parameter is not generic. I can not pick up any additional values when trying to make the cell render conditionally.

columnHelper.accessor("attr", {
  cell: (info) => info.rowState === 1 ? "this" : "that", // Error TS2339: Property 'rowState' does not exist on type 'CellContext<...>'
}),

2. Use state at the table level to store the row-level state.

const [rowState, setRowState] = useState({});

const columns = useMemo(() => [
  columnHelper.accessor("attr", {
    cell: (info) => rowState[info.row.id] === 1 ? "this" : "that",
  }),
], [rowState]);

Modifying the column definitions on state changes is slow in its own way, and I'm not convinced it's even a smart thing to do as it risks losing other table state such as row expansion. This also has its own performance issues, because the useMemo function requires me to copy the rowState object whenever modifying it in order for the memo function to detect a change. It's just too cludgy of a solution for my liking when React and other libraries already have very clear methods for scoping state in child elements.

The library has a few ways it tracks row state internally, such as row selection and expansion, but I don't see a way to extend it to allow for custom row state.

[joartola]

I'm into the same problem. I need to know when the row is hover: true to change the sell appearance.

[joartola]

Let me know if there is another solution but this worked for me:

 
 import {
  createColumnHelper,
  FilterFn,
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  Row,
  Table as TableType,
  useReactTable,
  CellContext as TanCellContext,
  RowData,
} from "@tanstack/react-table";


  const [isMouseOverRowId, setIsMouseOverRowId] = useState("");
  

    columnHelper.accessor("columnId", {
    header: () => "Status",
    cell: (item: unknown) => {
      const itemCasted = item as CellContext<Row<Item>, boolean>;
     return <YourComponent hover={itemCasted.hover} />
    },
  }),

<tbody>
  {rows.map((row) => {
      return (
              <Tr
                key={row.id}
                onMouseEnter={() => {
                  setIsMouseOverRowId(row.id);
                }}
                onMouseLeave={() => {
                  setIsMouseOverRowId("");
                }}
              >
                {row.getVisibleCells().map((cell) => (
                  <Td key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, {
                      ...cell.getContext(),
                      hover: row.id === isMouseOverRowId,
                    })}
                  </Td>
                ))}
              </Tr>
            );

[RossCoeH]

Why are you using state to manage hover when there is CSS trigger for :hover. If you define the CSS for tr, then you can add a nested trigger for hover. So nostate changes means no re-render of state,, an CSS change it fast. Experiment with it using the chrome developer tool to redefine jsx style on a selected row or cell,,, then write your CSS.

[joartola]

We are not trying to change CSS depending on hover, we are trying to change the JSX of the row when the mouse is over the row. For example, hiding or showing a button of a column.

[alwyntan]

Wondering if you found a better way to do this @joartola, I'm doing this in react native and have to approach it with the JS way and not the CSS way.

[lucapollani]

I'm doing some experiments using the approach shown in the Editable data example.
I've put some additional properties on my real data and kept it all in a state passed to useReactTable data prop.
Then I'm accessing to those values through row.original.<propName> and updating them through a function stored at table level in the meta field: table.options.meta.updateData(rowIndex, columnId, value) which basically prepares a new whole data object to update data state.

Personally I'm not a fan of this solution but It's the only working that I found so far. In particular I'm afraid of performances since as far as I know react-table had / has some difficulties handling whole table re-renders, see #4794 and #2824.
react-table v8 anyway should handle better this cases than v7, see this comment by @tannerlinsley : #2824 (comment)

Thoughts or suggestions on this are welcome!