Skip to content

Added slotProps can't be reflected in "muiFilterDatePickerProps", "muiFilterDateTimePickerProps" and "muiFilterTimePickerProps" #1457

@Siddhant2510

Description

@Siddhant2510

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

  1. Makes slotProps consistent with MUI’s documented usage.
  2. Enables customization of filter pickers without unnecessary workarounds.
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions