-
-
Notifications
You must be signed in to change notification settings - Fork 514
Description
material-react-table version
3.2.1
react & react-dom versions
18.2.0
Describe the bug and the steps to reproduce it
When using filterVariant="date" in Material React Table, I wanted to add custom actions to the calendar that opens inside the filter. According to the MUI documentation
, this should be possible by passing slotProps to the picker component.
However, the custom slotProps passed through muiFilterDatePickerProps were not being applied.
Code snippet for column
{
accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
id: 'hireDate',
header: 'Hire Date',
filterVariant: 'date-range',
muiFilterDatePickerProps: {
slotProps: {
actionBar: {
actions: ['clear'],
},
}
},
Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), // convert back to string for display
},
Root Cause
In MRT_FilterTextField.tsx, the DatePicker, DateTimePicker, and TimePicker components were given hardcoded slotProps where only field and textField props were spread. Any additional incoming slotProps (such as actionBar) were being overwritten and therefore ignored.
Fix
The fix is straightforward:
- Ensure that incoming slotProps passed via muiFilterDatePickerProps are spread into the component, instead of overriding them with only field and textField.
- This allows developers to fully customize picker components (e.g., adding custom actions to the calendar popup) without having to rely on global theme overrides.
Workaround (Current Behavior)
As a temporary workaround, I was able to pass the desired slotProps through the theme overrides. While this works, it’s less flexible and unintuitive compared to passing them directly via muiFilterDatePickerProps.
Why This Matters
- Makes slotProps consistent with MUI’s documented usage.
- Enables customization of filter pickers without unnecessary workarounds.
- Keeps the API intuitive and flexible.
Minimal, Reproducible Example - (Optional, but Recommended)
https://codesandbox.io/p/devbox/material-react-table-muifilterdatepickerprops-slotprops-c8djgy
Screenshots or Videos (Optional)
No response
Do you intend to try to help solve this bug with your own PR?
Yes, I am also opening a PR that solves the problem along side this issue
Terms
- I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.