[Data Grid] Make SUBMIT_FILTER_STROKE_TIME editable via props

[managervcf]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

I would love to be able to control the debounce time on applied filters inside the filterPanel. Currently it's hardcoded here.

Alternatively, please allow users to be able to apply filters manually - via some kind of Apply filters button.

Examples 🌈

No response

Motivation 🔦

This would allow me to optimize the Data Grid with server-side filtering and reduce the amount of unnecessary back-end requests.

Order ID 💳 (optional)

No response

[MBilalShafi]

You can customize the filter operators to change the InputComponent to your custom one, inside the component, you can set the filter stroke time as you want.
The easiest way is to reuse the code of GridFilterInputValue component and use it as a custom InputComponent.

Here's a demo where stroke time is being used: https://mui.com/x/react-data-grid/filtering/#multiple-values-operator.

Alternatively, please allow users to be able to apply filters manually - via some kind of Apply filters button.

Can you explain more why you need this, the filters are applied automatically after the stroke time has passed, you can customize the InputComponent of the filter operator to do this immediately by calling applyValue function passed in props.

[managervcf]

You can customize the filter operators to change the InputComponent to your custom one, inside the component, you can set the filter stroke time as you want.
The easiest way is to reuse the code of GridFilterInputValue component and use it as a custom InputComponent.

Here's a demo where stroke time is being used: https://mui.com/x/react-data-grid/filtering/#multiple-values-operator.

Of course creating a custom InputComponent is something that I would have to do in the end if the SUBMIT_FILTER_STROKE_TIME remains unaccessible.

However, I feel that enabling this as a prop would be a better solution - like the debounceMs prop inside the GridToolbarQuickFilter.

Can you explain more why you need this, the filters are applied automatically after the stroke time has passed, you can customize the InputComponent of the filter operator to do this immediately by calling applyValue function passed in props.

As I'm using the server-side filtering, this kind of Apply filters button would let me reduce the number of back-end requests as filters would be applied on demand and not after each stroke. When dealing with a large data set, new request after each stroke can be quite expensive.

[romgrk]

I think we should expose it.

@MBilalShafi do you have any suggestion under which name we could expose it? Should it go on the root props or elsewhere?

[MBilalShafi]

@romgrk Yeah, it'll be less painful if it's readily customizable without customizing filter operators.

Probably, slotProps.filterPanel.filterDebounceMs could be a better option, then, although this is a non-conventional way but we will have to do something like this in the respective components (e.g. GridFilterInputValue):

const debounceMs = rootProps.slotProps.filterPanel.filterDebounceMs ?? DEFAULT_FILTER_STROKE_TIME

And we'll also have to exclude this prop somehow when we pass down the ...slotProps.filterPanel to the GridFilterPanel component.

mui-x/packages/grid/x-data-grid/src/hooks/features/filter/useGridFilter.tsx

Line 379 in 33411d8

return <FilterPanel {...props.slotProps?.filterPanel} />;

What do you think?

[romgrk]

Is that setting only related to the filter panel? Could we make it a prop of the filter panel so we don't have to worry about excluding?

[MBilalShafi]

Yeah, we can make it a part of filterFormProps but the problem with that is if we pass it generically in currentOperator.InputComponent as a prop, it may cause React does not recognize the x prop on a DOM element error for the InputComponents that do not use it. e.g GridFilterInputBoolean or GridFilterInputSingleSelect as they destructure { ...others } to the underlying components.

mui-x/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx

Lines 538 to 545 in 13658f0

	<currentOperator.InputComponent
	apiRef={apiRef}
	item={item}
	applyValue={applyFilterChanges}
	focusElementRef={valueRef}
	{...currentOperator.InputComponentProps}
	{...InputComponentProps}
	/>

So, the possible options seem to be, either we stop destructuring the others object in the internal components and make it a part of filterFormProps or use something like slotProps.filterPanel.filterDebounceMs as I suggested in the comment above.

[romgrk]

Sounds good, let's go with slotProps.filterPanel.filterDebounceMs then.