Filtering and Search in Datagrid with nested rows is not working as expected

[Sreejith-Websphere]

If we apply filter in datagrid, its not filtering from nested rows (but sorting and pagination works)
used useFiltering hook, (tested in chrome)

when we click clear filter also its not listing all data back from nested rows

search also not fetching data from nested rows

[lee-chase]

Hi @matthewgallo @elycheea

Any chance this is possible without having to upgrade to V8 of react-table?

That said it is a slightly weird way to filter a row that has success, but child that failed.

[rcsatheeshkumar]

We are using data-grid in IBM product and we are facing a similar issue in search with data-grid with nested rows. If a row is shown in search result and search value gets cleared, then only the parent row gets restored but the nested rows are not restored. It could be reproduced in the storybook itself(https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-components-datagrid-nestedrows--nested-rows-usage-story) as shown below,

https://github.com/carbon-design-system/ibm-products/assets/17987392/e20db41d-575e-4f2a-91f5-75bdba838d80.

I believe, it will get fixed once the issue posted by Original Poster gets fixed. So, could some one please let me know about the ETA for providing a fix for this issue ?

[elycheea]

Link to Stackblitz provided by @lee-chase
https://stackblitz.com/edit/github-6w6hhw-ieejed?file=package.json

[rcsatheeshkumar]

Hi Team,
This issue is blocking our QA tasks, could you please share the ETA for this fix and expedite the fix please. Thanks.

[matthewgallo]

Unfortunately this stems from the version (v7.x.x) of react-table that we are using and this bug will not be fixed in that library unless we upgrade react-table which is not planned right now.

A workaround does exist however, by adding a getSubRows property to the useDatagrid hook. We'll update our storybook with the following workaround as well.

const NestedRows = () => {
  const columns = React.useMemo(() => defaultHeader, []);
  const [data] = useState([]); // data
  const datagridState = useDatagrid(
    {
      columns,
      data,
      DatagridActions,
      getSubRows: (row) => row.subRows, // adding this property makes the subRows visible again after search/global filter is removed
    },
    useNestedRows
  );

  return <Datagrid datagridState={datagridState} />;
};

[rcsatheeshkumar]

@matthewgallo is there a workaround to make the search consider the nested rows content as welll ?

[Xirax]

I'm attaching a video with most recent behavior which is not fully correct (We can't search for nested rows):

TEST.mov

[RichKummer]

Hey @Xirax , could you please open a new issue for the missing behavior? Thank you!

[matthewgallo]

If issue still exists, we can use the new issue for any missing behavior.