reactjsreact-table

React-table checkbox not reacts to any actions


I have react-table v8 table. Then I have some columns. First is checkbox.

const columns = [
    columnHelper.accessor("select", {
      id: "select",
      header: "",
      cell: (cell) => (
        <input
          type="checkbox"
          onChange={cell.row.getToggleSelectedHandler}
          checked={cell.row.getIsSelected()}
        />
      ),
    }),
    columnHelper.accessor("id", {
      header: "№",
      cell: (cell) => (
        <Link href={`${routes.support.routes.detailTicket}?id=${cell.getValue()}`}>
          #{cell.getValue()}
        </Link>
      ),
    }),
...]

And checkbox not reacting to any my actions in the main project. I do exactly how in docs showed. But in other test project - it works perfect. What can problem be in?

Here stackblitz code: https://stackblitz.com/edit/react-z2owmp?file=src%2FApp.js


Solution

  • First, you need to move the testData out of the function. Then handle the checkbox change directly instead of using a built-in handler like this:

        columnHelper.accessor('select', {
          id: 'select',
          header: '',
          cell: (cell) => (
            <input
              type="checkbox"
              checked={cell.row.getIsSelected()}
              onChange={() => cell.row.toggleSelected()}
            />
          ),
          size: 100,
        }),
    

    Then initialized the empty array.

    const [rowSelection, setRowSelection] = React.useState([]);
    

    Then add the handler onRowSelectionChange handler, which will update the selection state as the user clicks on the checkbox.

      const onRowSelectionChange = (newSelection) => setRowSelection(newSelection);
    
    const table = useReactTable({
        data: testData,
        columns,
        getCoreRowModel: getCoreRowModel(),
        onRowSelectionChange,
        state: {
          rowSelection,
        },
        enableRowSelection: true,
        debugTable: true,
      });
    

    Here is a live example Stackblitz