reactjsreact-tablereact-table-v8

deselecting all rows from higher component


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.


Solution

  • 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
    Edit goofy-cherry-vwjm3c

    So using this approach, you can solve the issue you presented.