selectTable HOC and filters (v6)

[matttk]

Hi everyone,

I'm using react-table v6 and the selectTable HOC, so that I can have checkboxes along the left side of my table. I based a lot of the code for the selectTable stuff on this code sandbox. Everything works - EXCEPT when I use filters.

My problem: I want to enable a delete button when > 0 rows are selected. I can't figure out how to do this properly.

countSelectedAndVisibleRows = () => {
let numSelectedAndVisible = 0;

  if (this.tableRef) {
    const wrappedInstance = this.tableRef.getWrappedInstance();
    const currentRecords = wrappedInstance.getResolvedState().sortedData;

    currentRecords.forEach(item => {
      if (this.isSelected(item._original["id"])) {
        numSelectedAndVisible++;
      }
    });
  }

  return numSelectedAndVisible;
}

I feed this into the button's disabled prop and it works fine, except for when I use filters. The problem is that the filters don't change anything in the parent component (obviously), so there is no re-render, meaning there is no update of the number of known selected and visible items.

How can the parent component know when the react-table (v6) filters have changed? Or, alternativeley, is there a different way I can know how many rows are actually checked and visible?

[matttk]

Actually, I realised you can return something in the custom filter methods of each column but since that gets called quite often, it doesn't seem like a great solution.

In any event, I decided on a different idea, which I think is probably better from a usability standpoint: disable the filters when any checkboxes are selected. This prevents the problem entirely. If anybody else has the same problem and comes across this thread, maybe consider my solution. It saves a lot of headache for programming and avoids confusion for the user.

Only problem is you need to implement custom filters, which can be disabled, since setting filterable to false resets and hides all filters, which is probably not what you want to do.