[DataGrid] fix: use getRowId in filtering (#9564)

mui · Jul 6, 2023 · 8d6c4a1 · 8d6c4a1
1 parent f5e4fd8
commit 8d6c4a1
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 3 deletions.
diff --git a/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx b/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx
@@ -390,6 +390,7 @@ export const useGridFilter = (
 
   const dataRowIdToIdLookup = apiRef.current.state.rows.dataRowIdToModelLookup;
   const rows = React.useMemo(() => Object.values(dataRowIdToIdLookup), [dataRowIdToIdLookup]);
+  const { getRowId } = props;
 
   const flatFilteringMethod = React.useCallback<GridStrategyProcessor<'filtering'>>(
     (params) => {
@@ -412,6 +413,7 @@ export const useGridFilter = (
 
       for (let i = 0; i < rows.length; i += 1) {
         const row = rows[i];
+        const id = getRowId ? getRowId(row) : row.id;
 
         isRowMatchingFilters(row, undefined, result);
 
@@ -423,7 +425,7 @@ export const useGridFilter = (
           filterCache,
         );
 
-        filteredRowsLookup[row.id] = isRowPassing;
+        filteredRowsLookup[id] = isRowPassing;
       }
 
       const footerId = 'auto-generated-group-footer-root';
@@ -437,7 +439,7 @@ export const useGridFilter = (
         filteredDescendantCountLookup: {},
       };
     },
-    [apiRef, props.filterMode, rows],
+    [apiRef, rows, props.filterMode, getRowId],
   );
 
   useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuItem);

diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts b/packages/grid/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts
@@ -149,7 +149,8 @@ export function useGridParamsApi(
 
   const getRowValue = React.useCallback<GridParamsApi['getRowValue']>(
     (row, colDef) => {
-      const id = (getRowId ? getRowId(row) : row.id) ?? row[GRID_ID_AUTOGENERATED];
+      const id =
+        GRID_ID_AUTOGENERATED in row ? row[GRID_ID_AUTOGENERATED] : getRowId?.(row) ?? row.id;
       const field = colDef.field;
 
       if (!colDef || !colDef.valueGetter) {

diff --git a/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/filtering.DataGrid.test.tsx
@@ -218,6 +218,33 @@ describe('<DataGrid /> - Filter', () => {
     });
   });
 
+  describe('prop: getRowId', () => {
+    it('works with filter', () => {
+      render(
+        <TestCase
+          getRowId={(row) => row.brand}
+          filterModel={{
+            items: [{ id: 0, field: 'brand', operator: 'contains', value: 'Nike' }],
+          }}
+        />,
+      );
+      expect(getColumnValues(0)).to.deep.equal(['Nike']);
+    });
+
+    it('works with quick filter', () => {
+      render(
+        <TestCase
+          getRowId={(row) => row.brand}
+          filterModel={{
+            items: [],
+            quickFilterValues: ['Nike'],
+          }}
+        />,
+      );
+      expect(getColumnValues(0)).to.deep.equal(['Nike']);
+    });
+  });
+
   describe('column type: string', () => {
     const getRows = (item: Omit<GridFilterItem, 'field'>) => {
       const { unmount } = render(