Expandable + Filterable Table: subRows empty after a filter was set

Describe the bug (required) A clear and concise description of what the bug is. When using a table with the useFilters and useExpand plugins, the subRows of a row with children is empty after setting a filter and clearing it again.

Provide an example via Codesandbox! (required) https://codesandbox.io/s/runtime-currying-odrn8?file=/src/App.js

Steps To Reproduce (required)

1. Open the provided code sandbox
2. expand the first row (optional), just to make sure there are subRows
3. Filter the second column (Visits) to 29
4. Remove the filter from the second column (Visits) again
5. The first row doesn’t have subRows any longer

Expected behavior (Recommended) I would expect that I can see the original subrows of each row after removing all filters

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: MacOS Catalina 10.15.4
• Browser: Chrome
• Version: 81.0.4044.138

[jalajgupta]

@matveychuk Can you please provide me an codesandbox example and is global filter working in SubRows as well?

[matveychuk]

I solved it by adding custom filter function to filterTypes

  const filterTypes = React.useMemo(
    () => ({
      filterRowsWithSubrows: (rows, id, filterValue) => {
        return rows.filter((row) => {
          const rowValue = row.values[id];
          return rowValue !== undefined ? String(rowValue).toLowerCase() === String(filterValue).toLowerCase() : true;
        });
      },
    }),
    [],
  );

and then add filterTypes to useTable hook

const tableInstance = useTable(
    {	
      columns
      data,
      filterTypes,
    },
    useFilters
)

and then add this custom filter to column as a string name “filterRowsWithSubrows” for value “filter”

export const status = {
  Header: 'Status',
  accessor: 'status',
  filter: 'filterRowsWithSubrows',
  Filter: SelectColumnFilter,
};