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
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