React-table checkbox not reacts to any actions

Question

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

Answer 1

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