Get filtermode localization in Column.Filter

[hippien]

In the advanced example there is a custom Date Picker Filter from @mui/x-date-pickers on the "Start date" column.
The table has 'enableColumnFilterModes'.

But the helperText in the columns Filter option is hard-coded to 'Filter Mode: Lesss Than' and will not update when the mode is change in the column filter menu.

(Try it here: Advanced example)

Is it possible to access the filter mode localization text for the current column filter mode so it can be displayed correctly?

Filter: ({ column }) => (
              <LocalizationProvider dateAdapter={AdapterDayjs}>
                <DatePicker
                  onChange={(newValue) => {
                    column.setFilterValue(newValue);
                  }}
                  renderInput={(params) => (
                    <TextField
                      {...params}
                      helperText={'Filter Mode: Lesss Than'}
                      sx={{ minWidth: '120px' }}
                      variant="standard"
                    />
                  )}
                  value={column.getFilterValue()}
                />
              </LocalizationProvider>
            )

[KevinVandy]

There's something here: https://www.material-react-table.com/docs/guides/column-filtering#customize-filter-modes-source-code
that might help

And I think there is some kind of bug there that needs to be looked into more

[hippien]

Not the cleanest solution but I imported the localization file:

import { MRT_Localization_EN } from 'material-react-table/locales/en';
const localization = MRT_Localization_EN;

Contructed the property name:

Filter: ({ column }) => {
          const s = column.columnDef.filterFn.name;
          const filterFnName = `filter${s ? s[0].toUpperCase() + s.slice(1) : ""}`;

And grabbed the text:

helperText={`Filter mode: ${localization[filterFnName]}`}

A bit cumbersome and ugly but will do for now. Maybe there is a better way to it?

[KevinVandy]

no need to import MRT_Localization_EN. It already gets spread internally like this:

_localization = { ...MRT_Localization_EN, ...props.localization }