[Datagrid]: Datagrid does not remember global filter state after re-rendered with refreshed data

[flannanl]

Package

Carbon for IBM Products

Description

After re-rendering Datagrid table with the refetched row data, the current global filter state is lost. E.g. I have row A, B, C, and D. I filtered with B. It shows only B row. But as I do a refetch on the data and reload the table with row A, B, C and D, the filtering is lost. I see all rows instead.

Component(s) impacted

Included a link to the code sample as well.

import React, { useEffect, useMemo, useState } from 'react';
import { Datagrid, useDatagrid } from '@carbon/ibm-products';
import { makeData } from './utils/makeData';
import ExampleActions from './utils/ExampleAction';

const defaultHeader = [
  {
    Header: 'Row Index',
    accessor: (row, i) => i,
    sticky: 'left',
    id: 'rowIndex', // id is required when accessor is a function.
  },
  {
    Header: 'Age',
    accessor: 'age',
  },
  {
    Header: 'First Name',
    accessor: 'firstName',
  },
  {
    Header: 'Last Name',
    accessor: 'lastName',
  },
  {
    Header: 'Visits',
    accessor: 'visits',
  },
];

export const Example = () => {
  const columns = React.useMemo(
    () => [
      ...defaultHeader,
      {
        Header: 'Someone 11',
        accessor: 'someone11',
        multiLineWrap: true,
      },
    ],
    []
  );
  const [data, setData] = useState(makeData(10));
  useEffect(() => {
    setTimeout(() => {
      setData((pastData) =>
        pastData.map((d) => ({
          ...d,
          age: Number(d.age) + 10,
        }))
      );
    }, 5000);
  }, []);
  const rows = useMemo(() => {
    return [...data];
  }, [data]);
  const datagridState = useDatagrid({
    columns,
    data,
    DatagridActions: ExampleActions,
  });

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

export default Example;

import { DataTable } from '@carbon/react';
import React from 'react';

const ExampleActions = (datagridState) => {
  const {
    setGlobalFilter,
  } = datagridState;

  const { TableToolbarContent, TableToolbarSearch } = DataTable;

  const onSearchChange = (evt) => {
    setGlobalFilter(evt.target.value);
  };

  return (
    <TableToolbarContent>
      <TableToolbarSearch
        size="xl"
        id="columnSearch"
        persistent
        placeholder="Search"
        onChange={onSearchChange}
      />
    </TableToolbarContent>
  );
};

export default ExampleActions;

Browser

No response

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

v1.73.1

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Product/offering

IBM Cloud Projects

CodeSandbox or Stackblitz example

https://stackblitz.com/edit/github-68tdtk?file=src%2FExample%2Futils%2FExampleAction.jsx,src%2FExample%2FExample.jsx,package.json

Steps to reproduce the issue (if applicable)

To reproduce:

• Run the code sample. There are 10 rows showing in the table initially.
• Type a value from the "Row Index" column. E.g. 2. The rows are filtered.
• Wait for 5 seconds for the rows to reload. Now, I see all 10 rows again.

Release date (if applicable)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues

[filipmadejIBM]

We have same issue and pagination is affected as well. The pagination state is reseted when data is re-rendered.

[matthewgallo]

Hey @flannanl, do you have another similar issue that is open regarding this?

[flannanl]

Hey @flannanl, do you have another similar issue that is open regarding this?

No, I don't.

[amal-k-joy]

Hi @flannanl ,
Can you try passing autoResetGlobalFilter: true, to grid configuration.

Screen.Recording.2024-09-13.at.4.18.44.PM.mov

[flannanl]

that works. Thanks.