perf: v7 filters

.eslintrc.js

@@ -71,6 +71,17 @@ module.exports = {
  rules: {
  ...baseline.rules,
  'import/prefer-default-export': 'off',
+ '@typescript-eslint/no-unused-vars': [
+ 'error',
+ {
+ vars: 'all',
+ args: 'after-used',
+ ignoreRestSiblings: true,
+ argsIgnorePattern: '^_',
+ varsIgnorePattern: '^_',
+ caughtErrorsIgnorePattern: '^_',
+ },
+ ],
  // TODO move rule into the main repo once it has upgraded
  '@typescript-eslint/return-await': 'off',
  'no-restricted-imports': 'off',

packages/grid/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx

@@ -145,7 +145,7 @@ export const useDataGridPremiumComponent = (
  useGridRowPinning(privateApiRef, props);
  useGridColumns(privateApiRef, props);
  useGridRows(privateApiRef, props);
- useGridParamsApi(privateApiRef);
+ useGridParamsApi(privateApiRef, props);
  useGridDetailPanel(privateApiRef, props);
  useGridColumnSpanning(privateApiRef);
  useGridColumnGrouping(privateApiRef, props);

packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts

@@ -9,10 +9,12 @@ import {
  GridRowModel,
  GridColDef,
  GridKeyValue,
+ gridRowsLookupSelector,
 } from '@mui/x-data-grid-pro';
 import {
  passFilterLogic,
  GridAggregatedFilterItemApplier,
+ GridAggregatedFilterItemApplierResult,
  GridColumnRawLookup,
  GridApiCommunity,
 } from '@mui/x-data-grid-pro/internals';
@@ -82,17 +84,18 @@ const shouldApplyFilterItemOnGroup = (columnField: string, node: GridGroupNode)
 export const filterRowTreeFromGroupingColumns = (
  params: FilterRowTreeFromTreeDataParams,
 ): Omit<GridFilterState, 'filterModel'> => {
- const { rowTree, isRowMatchingFilters, filterModel } = params;
+ const { apiRef, rowTree, isRowMatchingFilters, filterModel } = params;
+ const dataRowIdToModelLookup = gridRowsLookupSelector(apiRef);
  const filteredRowsLookup: Record<GridRowId, boolean> = {};
  const filteredDescendantCountLookup: Record<GridRowId, number> = {};
 
  const filterTreeNode = (
  node: GridTreeNode,
  areAncestorsExpanded: boolean,
- ancestorsResults: ReturnType<GridAggregatedFilterItemApplier>[],
+ ancestorsResults: GridAggregatedFilterItemApplierResult[],
  ): number => {
  let isPassingFiltering = false;
- let filterResults: ReturnType<GridAggregatedFilterItemApplier> = {
+ const filterResults: GridAggregatedFilterItemApplierResult = {
  passingFilterItems: null,
  passingQuickFilterValues: null,
  };
@@ -103,7 +106,8 @@ export const filterRowTreeFromGroupingColumns = (
  ? (columnField: string) => shouldApplyFilterItemOnGroup(columnField, node)
  : undefined;
 
- filterResults = isRowMatchingFilters(node.id, shouldApplyItem);
+ const row = dataRowIdToModelLookup[node.id];
+ isRowMatchingFilters(row, shouldApplyItem, filterResults);
  } else {
  isPassingFiltering = true;
  }
@@ -116,7 +120,7 @@ export const filterRowTreeFromGroupingColumns = (
  childNode,
 
  areAncestorsExpanded && !!node.childrenExpanded,
- [...ancestorsResults, filterResults],
+ [...ancestorsResults, { ...filterResults }],
  );
  filteredDescendantCount += childSubTreeSize;
  });
@@ -127,7 +131,7 @@ export const filterRowTreeFromGroupingColumns = (
  // If node has children - it's passing if at least one child passes filters
  isPassingFiltering = filteredDescendantCount > 0;
  } else {
- const allResults = [...ancestorsResults, filterResults];
+ const allResults = [...ancestorsResults, { ...filterResults }];
  isPassingFiltering = passFilterLogic(
  allResults.map((result) => result.passingFilterItems),
  allResults.map((result) => result.passingQuickFilterValues),

packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx

@@ -128,7 +128,7 @@ export const useDataGridProComponent = (
  useGridRowPinning(apiRef, props);
  useGridColumns(apiRef, props);
  useGridRows(apiRef, props);
- useGridParamsApi(apiRef);
+ useGridParamsApi(apiRef, props);
  useGridDetailPanel(apiRef, props);
  useGridColumnSpanning(apiRef);
  useGridColumnGrouping(apiRef, props);

packages/grid/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataUtils.ts

@@ -4,9 +4,11 @@ import {
  GridTreeNode,
  GridFilterState,
  GridFilterModel,
+ gridRowsLookupSelector,
 } from '@mui/x-data-grid';
 import {
  GridAggregatedFilterItemApplier,
+ GridAggregatedFilterItemApplierResult,
  GridApiCommunity,
  passFilterLogic,
 } from '@mui/x-data-grid/internals';
@@ -29,10 +31,16 @@ export const TREE_DATA_STRATEGY = 'tree-data';
 export const filterRowTreeFromTreeData = (
  params: FilterRowTreeFromTreeDataParams,
 ): Omit<GridFilterState, 'filterModel'> => {
- const { rowTree, disableChildrenFiltering, isRowMatchingFilters } = params;
+ const { apiRef, rowTree, disableChildrenFiltering, isRowMatchingFilters } = params;
+ const dataRowIdToModelLookup = gridRowsLookupSelector(apiRef);
  const filteredRowsLookup: Record<GridRowId, boolean> = {};
  const filteredDescendantCountLookup: Record<GridRowId, number> = {};
 
+ const filterResults: GridAggregatedFilterItemApplierResult = {
+ passingFilterItems: null,
+ passingQuickFilterValues: null,
+ };
+
  const filterTreeNode = (
  node: GridTreeNode,
  isParentMatchingFilters: boolean,
@@ -46,10 +54,11 @@ export const filterRowTreeFromTreeData = (
  } else if (!isRowMatchingFilters || node.type === 'footer') {
  isMatchingFilters = true;
  } else {
- const { passingFilterItems, passingQuickFilterValues } = isRowMatchingFilters(node.id);
+ const row = dataRowIdToModelLookup[node.id];
+ isRowMatchingFilters(row, undefined, filterResults);
  isMatchingFilters = passFilterLogic(
- [passingFilterItems],
- [passingQuickFilterValues],
+ [filterResults.passingFilterItems],
+ [filterResults.passingQuickFilterValues],
  params.filterModel,
  params.apiRef,
  );

packages/grid/x-data-grid/src/DataGrid/useDataGridComponent.tsx

@@ -79,7 +79,7 @@ export const useDataGridComponent = (
  useGridRowSelection(privateApiRef, props);
  useGridColumns(privateApiRef, props);
  useGridRows(privateApiRef, props);
- useGridParamsApi(privateApiRef);
+ useGridParamsApi(privateApiRef, props);
  useGridColumnSpanning(privateApiRef);
  useGridColumnGrouping(privateApiRef, props);
  useGridEditing(privateApiRef, props);

packages/grid/x-data-grid/src/colDef/gridBooleanOperators.ts

@@ -1,20 +1,21 @@
 import { GridFilterInputBoolean } from '../components/panel/filterPanel/GridFilterInputBoolean';
 import { GridFilterItem } from '../models/gridFilterItem';
 import { GridFilterOperator } from '../models/gridFilterOperator';
+import { v7 } from './utils';
 
 export const getGridBooleanOperators = (): GridFilterOperator<any, boolean | null, any>[] => [
  {
  value: 'is',
- getApplyFilterFn: (filterItem: GridFilterItem) => {
+ getApplyFilterFn: v7((filterItem: GridFilterItem) => {
  if (!filterItem.value) {
  return null;
  }
 
  const valueAsBoolean = filterItem.value === 'true';
- return ({ value }): boolean => {
+ return (value, _, __, ___): boolean => {
  return Boolean(value) === valueAsBoolean;
  };
- },
+ }),
  InputComponent: GridFilterInputBoolean,
  },
 ];

packages/grid/x-data-grid/src/colDef/gridDateOperators.ts

@@ -1,7 +1,7 @@
 import { GridFilterInputDate } from '../components/panel/filterPanel/GridFilterInputDate';
 import { GridFilterItem } from '../models/gridFilterItem';
-import { GridFilterOperator } from '../models/gridFilterOperator';
-import { GridCellParams } from '../models/params/gridCellParams';
+import { GridFilterOperator, GetApplyFilterFnV7 } from '../models/gridFilterOperator';
+import { v7 } from './utils';
 
 const dateRegex = /(\d+)-(\d+)-(\d+)/;
 const dateTimeRegex = /(\d+)-(\d+)-(\d+)T(\d+):(\d+)/;
@@ -11,7 +11,7 @@ function buildApplyFilterFn(
  compareFn: (value1: number, value2: number) => boolean,
  showTime?: boolean,
  keepHours?: boolean,
-) {
+): ReturnType<GetApplyFilterFnV7> {
  if (!filterItem.value) {
  return null;
  }
@@ -23,7 +23,7 @@ function buildApplyFilterFn(
 
  const time = new Date(year, month - 1, day, hour || 0, minute || 0).getTime();
 
- return ({ value }: GridCellParams<any, Date, any>): boolean => {
+ return (value, _, __, ___): boolean => {
  if (!value) {
  return false;
  }
@@ -47,73 +47,73 @@ function buildApplyFilterFn(
 export const getGridDateOperators = (showTime?: boolean): GridFilterOperator<any, Date, any>[] => [
  {
  value: 'is',
- getApplyFilterFn: (filterItem) => {
+ getApplyFilterFn: v7((filterItem) => {
  return buildApplyFilterFn(filterItem, (value1, value2) => value1 === value2, showTime);
- },
+ }),
  InputComponent: GridFilterInputDate,
  InputComponentProps: { type: showTime ? 'datetime-local' : 'date' },
  },
  {
  value: 'not',
- getApplyFilterFn: (filterItem) => {
+ getApplyFilterFn: v7((filterItem) => {
  return buildApplyFilterFn(filterItem, (value1, value2) => value1 !== value2, showTime);
- },
+ }),
  InputComponent: GridFilterInputDate,
  InputComponentProps: { type: showTime ? 'datetime-local' : 'date' },
  },
  {
  value: 'after',
- getApplyFilterFn: (filterItem) => {
+ getApplyFilterFn: v7((filterItem) => {
  return buildApplyFilterFn(filterItem, (value1, value2) => value1 > value2, showTime);
- },
+ }),
  InputComponent: GridFilterInputDate,
  InputComponentProps: { type: showTime ? 'datetime-local' : 'date' },
  },
  {
  value: 'onOrAfter',
- getApplyFilterFn: (filterItem) => {
+ getApplyFilterFn: v7((filterItem) => {
  return buildApplyFilterFn(filterItem, (value1, value2) => value1 >= value2, showTime);
- },
+ }),
  InputComponent: GridFilterInputDate,
  InputComponentProps: { type: showTime ? 'datetime-local' : 'date' },
  },
  {
  value: 'before',
- getApplyFilterFn: (filterItem) => {
+ getApplyFilterFn: v7((filterItem) => {
  return buildApplyFilterFn(
  filterItem,
  (value1, value2) => value1 < value2,
  showTime,
  !showTime,
  );
- },
+ }),
  InputComponent: GridFilterInputDate,
  InputComponentProps: { type: showTime ? 'datetime-local' : 'date' },
  },
  {
  value: 'onOrBefore',
- getApplyFilterFn: (filterItem) => {
+ getApplyFilterFn: v7((filterItem) => {
  return buildApplyFilterFn(filterItem, (value1, value2) => value1 <= value2, showTime);
- },
+ }),
  InputComponent: GridFilterInputDate,
  InputComponentProps: { type: showTime ? 'datetime-local' : 'date' },
  },
  {
  value: 'isEmpty',
- getApplyFilterFn: () => {
- return ({ value }): boolean => {
+ getApplyFilterFn: v7(() => {
+ return (value, _, __, ___): boolean => {
  return value == null;
  };
- },
+ }),
  requiresFilterValue: false,
  },
  {
  value: 'isNotEmpty',
- getApplyFilterFn: () => {
- return ({ value }): boolean => {
+ getApplyFilterFn: v7(() => {
+ return (value, _, __, ___): boolean => {
  return value != null;
  };
- },
+ }),
  requiresFilterValue: false,
  },
 ];