Skip to content

Commit

Permalink
[DataGrid] Filtering performance: V7 API (#9254)
Browse files Browse the repository at this point in the history 
Signed-off-by: Rom Grk <[email protected]>
Co-authored-by: Andrew Cherniavskii <[email protected]>
  • Loading branch information
@romgrk @cherniavskii
romgrk and cherniavskii authored Jun 28, 2023
1 parent d76a6f3 commit 4f7e1db
Show file tree
Hide file tree
Showing 46 changed files with 1,195 additions and 660 deletions.
32 changes: 32 additions & 0 deletions docs/data/data-grid/filtering/customization.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,38 @@ The demo below shows how to anchor the filter panel to the toolbar button instea

{{"demo": "CustomFilterPanelPosition.js", "bg": "inline", "defaultCodeOpen": false}}

### Optimize performance

There is a new set of APIs with a more efficient interface that are going to be used by default at the next major release, V7.

You can use them right now to make your custom filters faster. Instead of receiving a `GridCellParams` argument, they receive the parameters listed below.

```ts
const noop = () => {};
const operator: GridFilterOperator = {
/* ...other operator properties */
getApplyFilterFn: noop /* It is required to pass a noop function until V7 */,
getApplyFilterFnV7: (filterItem: GridFilterItem) => {
/* This example is our default string filter function for V7 */

if (!filterItem.value) {
return null;
}
const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
const filterRegex = new RegExp(escapeRegExp(filterItemValue), 'i');

return (
value: any,
row: GridValidRowModel,
column: GridColDef,
apiRef: React.MutableRefObject<GridApiCommunity>,
): boolean => {
return value != null ? filterRegex.test(String(value)) : false;
};
},
};
```

## API

- [GridFilterOperator](/x/api/data-grid/grid-filter-operator/)
Expand Down
4 changes: 4 additions & 0 deletions docs/data/data-grid/performance/performance.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,10 @@ shows you which cells re-render in reaction to your interaction with the grid.

{{"demo": "GridVisualization.js", "bg": "inline", "defaultCodeOpen": false}}

## Filtering

For filtering performance, see [the filter customization section](/x/react-data-grid/filtering/customization/#optimize-performance).

## API

- [DataGrid](/x/api/data-grid/data-grid/)
Expand Down
89 changes: 45 additions & 44 deletions docs/pages/x/api/data-grid/grid-actions-col-def.md
View file

Large diffs are not rendered by default.

87 changes: 44 additions & 43 deletions docs/pages/x/api/data-grid/grid-col-def.md
View file

Large diffs are not rendered by default.

21 changes: 11 additions & 10 deletions docs/pages/x/api/data-grid/grid-filter-operator.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,14 @@ import { GridFilterOperator } from '@mui/x-data-grid';

## Properties

| Name | Type | Default | Description |
| :---------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span class="prop-name">getApplyFilterFn</span> | <span class="prop-type">(filterItem: GridFilterItem, column: GridColDef&lt;R, V, F&gt;) =&gt; null \| ((params: GridCellParams&lt;R, V, F&gt;) =&gt; boolean)</span> | | The callback that generates a filtering function for a given filter item and column.<br />This function can return `null` to skip filtering for this item and column. |
| <span class="prop-name optional">getValueAsString<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">(value: GridFilterItem['value']) =&gt; string</span> | | Converts the value of a filter item to a human-readable form. |
| <span class="prop-name optional">headerLabel<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string</span> | | The label of the filter shown in header filter row. |
| <span class="prop-name optional">InputComponent<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">React.JSXElementConstructor&lt;any&gt;</span> | | The input component to render in the filter panel for this filter operator. |
| <span class="prop-name optional">InputComponentProps<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">Record&lt;string, any&gt;</span> | | The props to pass to the input component in the filter panel for this filter operator. |
| <span class="prop-name optional">label<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string</span> | | The label of the filter operator. |
| <span class="prop-name optional">requiresFilterValue<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">true</span> | If `false`, filter operator doesn't require user-entered value to work.<br />Usually should be set to `false` for filter operators that don't have `InputComponent` (for example `isEmpty`) |
| <span class="prop-name">value</span> | <span class="prop-type">string</span> | | The name of the filter operator.<br />It will be matched with the `operator` property of the filter items. |
| Name | Type | Default | Description |
| :---------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <span class="prop-name">getApplyFilterFn</span> | <span class="prop-type">GetApplyFilterFnLegacy&lt;R, V, F&gt;</span> | | The callback that generates a filtering function for a given filter item and column.<br />This function can return `null` to skip filtering for this item and column. |
| <span class="prop-name optional">getApplyFilterFnV7<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">GetApplyFilterFnV7&lt;R, V, F&gt;</span> | | The callback that generates a filtering function for a given filter item and column.<br />This function can return `null` to skip filtering for this item and column.<br />This function uses the more performant V7 API. |
| <span class="prop-name optional">getValueAsString<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">(value: GridFilterItem['value']) =&gt; string</span> | | Converts the value of a filter item to a human-readable form. |
| <span class="prop-name optional">headerLabel<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string</span> | | The label of the filter shown in header filter row. |
| <span class="prop-name optional">InputComponent<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">React.JSXElementConstructor&lt;any&gt;</span> | | The input component to render in the filter panel for this filter operator. |
| <span class="prop-name optional">InputComponentProps<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">Record&lt;string, any&gt;</span> | | The props to pass to the input component in the filter panel for this filter operator. |
| <span class="prop-name optional">label<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string</span> | | The label of the filter operator. |
| <span class="prop-name optional">requiresFilterValue<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">true</span> | If `false`, filter operator doesn't require user-entered value to work.<br />Usually should be set to `false` for filter operators that don't have `InputComponent` (for example `isEmpty`) |
| <span class="prop-name">value</span> | <span class="prop-type">string</span> | | The name of the filter operator.<br />It will be matched with the `operator` property of the filter items. |
Loading

0 comments on commit 4f7e1db

Please sign in to comment.