Reverse Toggle All Rows Selected checkbox behavior for v7

[wesokuhara]

Hello react-table community,

I am using the useRowSelect plugin with React Table v7. By default, when some (not all) rows are selected and the "Toggle All" checkbox is in the indeterminate state (represented by the "-"), all rows will be selected when the checkbox is clicked. I am wondering if it is possible to have the opposite behavior, i.e. when the "Toggle All" checkbox is clicked in its indeterminate state, it de-selects all rows. Is this achievable?

Thanks for building great OSS.

[rossthedevigner]

@wesokuhara Have you been able to make this happen?

[wesokuhara]

I haven't spent much time on this unfortunately. But I glanced at the code and in order for this to happen, some modification would need to be made to the reducer for the useRowSelect hook https://github.com/tannerlinsley/react-table/blob/master/src/plugin-hooks/useRowSelect.js#L110

[rossthedevigner]

Appreciate you responding, and I agree with your theory.

[wesokuhara]

Hey @rossthedevigner, without making any changes to the library code, I was able to achieve this thanks to the configurability that react-table offers. Basically, we can override the default props passed to the select-all checkbox, specifically the onChange prop, using getToggleAllRowsSelectedProps().

const customHook = (existingColumns: ColumnInstance[], { instance }: MetaBase<{}>) => {
  if (instance.disableRowSelection) return existingColumns;

  const onToggleAllRowsChange = () => {
    const noRowsSelected = Object.keys(instance.state.selectedRowIds).length === 0;
    instance.toggleAllRowsSelected(noRowsSelected);
  };

  return [
    {
      Header: ({ getToggleAllRowsSelectedProps }: HeaderProps<any>) => {
        return (
          <TableRowCheckbox
            {...getToggleAllRowsSelectedProps({ onChange: onToggleAllRowsChange })}
          />
        );
      },
      // other props
    },
    ...existingColumns,
  ];
};

[wesokuhara]

Solved via #3244 (reply in thread)