[Feature Request]: Support Controlled Selection in useRowSelect

[anuraghazra]

Currently useRowSelect's state prop behaves as an uncontrolled state only.

We had a requirement where we wanted to support controlled selection for the Table selections.

Example:

const [selectedRows, setSelectedRows] = React.useState([]);

<WrapperTable 
  selectedIds={selectedRows}
  onSelectionChange={({ selectedIds }) => {
    setSelectedRows(selectedIds)
  }}
/>

Pseudo Implementation code:

const WrapperTable = ({ data, onSelectionChange, selectedIds, defaultSelectedIds }) => {
  // controllable controlled/uncontrolled state
  const [selectedRows, setSelectedRows] = useControllableState({
    defaultValue: defaultSelectedIds,
    value: selectedIds,
    onChange: (value) => {
      onSelectionChange?.({
        selectedIds: value,
      });
    },
  });
  
  const onSelectChange: MiddlewareFunction = (action, state): void => {
    // Logic for updating state
    setSelectedRows(() => selectedIds);
  };

  const rowSelectConfig = useRowSelect(
    data,
    {
      onChange: onSelectChange,
      state: { ids: selectedRows }
    },
    {
      rowSelect: 'multiple'
    },
  );  
  
  return <ReactTable data={data} select={rowSelectConfig} />
}

Is there any way to achieve this?

I'm also willing to raise a PR for adding this feature in useRowSelect