How to extract function to reset row selection from a parent component.

[bracesproul]

Version: 8.7.4

I need to be able to call a function in a parent component (4 levels above the base table component) that will reset the selected rows in the table.

This is what my useReactTable looks like (delete code that isn't applicable to this question)

  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

  const table = useReactTable<T>({
    data: p.data,
        cell: ({ row }) => (
          <div className="px-1">
            <Checkbox
              {...{
                checked: row.getIsSelected(),
                isIndeterminate: row.getIsSomeSelected(),
                onCheckedChange: row.getToggleSelectedHandler(),
              }}
            />
          </div>
        ),
    state: {
      rowSelection,
    },
    // current state function being used to get which rows are currently selected
    onRowSelectionChange: setRowSelection,
  });

The goal:
A user selects X rows, they then click a delete button to delete X rows, inside of that mutation handler I want to be able to also call a function like resetRowSelection which will reset the current selections.

Does anyone have any ideas on how I can acolmpish this?

[nathan-logan]

Late reply but I'm facing this same problem, did you manage to solve it?

[bracesproul]

Tbh, I can't remember exactly how I solved this, does this code snippet provide some help?

  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

  const table = useReactTable<T>({
    data: p.data,
    columns: [
      {
        id: 'select',
        header: ({ table }) => (
          <Checkbox
            {...{
              checked: table.getIsAllRowsSelected(),
              isIndeterminate: table.getIsSomeRowsSelected(),
              onCheckedChange: (e) => {
                if (typeof e === 'boolean') {
                  table.toggleAllRowsSelected(e);
                }
              },
            }}
          />
        ),
        cell: ({ row }) => (
          <div className="px-1">
            <Checkbox
              {...{
                checked: row.getIsSelected(),
                isIndeterminate: row.getIsSomeSelected(),
                onCheckedChange: row.getToggleSelectedHandler(),
              }}
            />
          </div>
        ),
      },
      ...p.columns,
    ],
    state: {
      rowSelection,
    },
    onRowSelectionChange: setRowSelection,
    ...other
  });

  useEffect(() => {
    onSelectionChange?.(rowSelection);
  }, [rowSelection]);

  useEffect(() => {
    if (p.clearSelection) setRowSelection({});
    p.onClearSelection?.(false);
  }, [p.clearSelection]);

[nathan-logan]

Yeah that makes sense, I landed on either that or keeping track of the selected state in the parent and passing it back down. Appreciate the reply mate 😄