I am using React Table v8 for my new web app. I have a table built with checkboxes for selecting rows. In a component up higher in the component tree I am doing something with the selected rows, and then I want to clear all the selected rows. I found the function toggleAllRowsSelected while searching. And I tried adding this 'useEffect' in to my table component.
useEffect(() => {
if (selectedRows.length === 0) {
table.toggleAllRowsSelected(false);
}
}, [selectedRows]);
And then I passed down 'selectedRows' from my component up higher in the component tree. But that caused a continuous running loop.
I am creating my ReactTable like this:
const table = useReactTable({
data,
columns,
state: {
sorting,
rowSelection,
globalFilter,
columnFilters
},
onSortingChange: setSorting,
onRowSelectionChange: setRowSelection,
onColumnFiltersChange: setColumnFilters,
onGlobalFilterChange: setGlobalFilter,
enableRowSelection: true,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel()
// debugTable: true
});
Anyone know how I can properly achieve this?
Basically I just want to pass down a signal/trigger to deselect all rows in the table from a component above the table itself.
I have implemented a react-table (v8) with a button to deselect all rows.
I used ref in the parent component:
const tableRef = React.useRef(null);
After that, I used forwardRef to forward that ref to the child component.
//Define the methods required for the parent component to interact with the child component
useImperativeHandle(ref, () => ({
resetSelectedRows: () => toggleAllRowsSelected(false)
}));
...
//In the parent component, we can deselect all rows by applying the following
tableRef.current?.resetSelectedRows();
You can review the full functionality in the following CodeSandbox
So using this approach, you can solve the issue you presented.