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

[MarcusNotheis]

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

[nkint]

I have notice this bug too. Is there any workaround?

[fjcalzado]

Same here. I am just guessing but it seems that filtering implies flattening the nested row structure and once the filter is removed, subRows are not properly restored. Fortunately, there apparently is an originalSubRows property in each row that had nested subrows, and it contains the desired subrows.

[GuptaSiddhant]

I tried the following and it solved the problem of empty subRows after filtering.
#2064 (comment)

Although it doesn't solve the filtering of subRows or showing the respective subRows of filtered rows.

[tannerlinsley]

Due to architectural changes, this bug will not be fixable in v7. The issue has been resolved in the next branch. Sorry this can't come sooner!

[jalajgupta]

@tannerlinsley Is there any tentative dates for release of v8. This bug is acting as a blocker for my tasks, any alternative to solve this issue?

[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,
};

[jalajgupta]

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