[data grid] Missing translation for key headerFilterOperatorBetween

[ankurheble]

Steps to reproduce

Link to live example: (required)
https://codesandbox.io/p/sandbox/nostalgic-pascal-9twstk?file=%2Fsrc%2FDemo.tsx%3A141%2C22
Steps:

1. Try to implement Multiple values filter as mentioned in the docs here https://mui.com/x/react-data-grid/filtering/customization/ by clicking on the codesandbox example
2. Inside codesandbox install @mui/x-data-grid-pro latest version
3. Enable Header Filters for the DataGridPro which has already got the custom quantity filter mentioned in above example.

Missing translation for key headerFilterOperatorBetween. is shown

Current behavior

Throws an error : Missing translation for key headerFilterOperatorBetween.

Expected behavior

Should use the same translation added for the custom operator.

Context

Trying to implement a multiple values operator for column type number in DataGridPro with headerFilters enabled.

Your environment

npx @mui/envinfo

System: OS: Windows 11 10.0.22631 Binaries: Node: 20.11.1 - C:\Program Files\nodejs\node.EXE npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Brave Browser: Chromium (125.0.6422.60) Edge: Chromium (123.0.2420.97) npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.18 @mui/icons-material: ^5.15.13 => 5.15.13 @mui/material: ^5.15.12 => 5.15.18 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/styled-engine-sc: ^6.0.0-alpha.17 => 6.0.0-alpha.17 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-data-grid: ^7.5.0 => 7.5.0 @mui/x-data-grid-pro: ^7.5.0 => 7.5.0 @mui/x-license: ^7.2.0 => 7.2.0 @types/react: ^18 => 18.2.62 react: ^18 => 18.2.0 react-dom: ^18 => 18.2.0 styled-components: ^6.1.8 => 6.1.8 typescript: ^5 => 5.3.3

Search keywords: data grid pro, header filters, translation error
Order ID: 90421

[MBilalShafi]

@ankurheble Just like you provide label for regular filter in a custom GridFilterOperator, you can add a headerLabel for header filters.

Something like:

const quantityOnlyOperators: GridFilterOperator<any, number>[] = [
  {
    label: "Between",
    headerLabel: "Between", // newly added property
    ...otherProperties,
  },
];

I've tried to update it in your demo, here's the forked version: https://codesandbox.io/p/sandbox/async-snow-nqcjz3

Let me know if it solves your issue.

Thanks

[flaviendelangle]

I had the same problem in my personal app

IMHO this is a bad practice:

const label =
  op?.headerLabel ??
  apiRef.current.getLocaleText(
    `headerFilterOperator${capitalize(op.value)}` as 'headerFilterOperatorContains',
  );

It crashes even though the headerLabel is supposed to be optional.
Not sure how we could improve it (wrap in a try to avoid crashing and render an empty label? check if the translation key exists before calling getLocaleText? Create a getOptionalLocaleText method?), but right now it's a bad DX.

To be clear, this code have been here for ages, it's not a new problem at all, it was already here when I was working on the grid.

[flaviendelangle]

Similar issues:

#11029
#10270

[ankurheble]

Thanks, this somehow didn't work in my local even though headerLabel was provided... but it might be something i'm doing wrong! I see the demo link you provided is working.. I'll try this again.. thanks @MBilalShafi

[ankurheble]

@MBilalShafi I tried your solution but it appears to work only for 1 custom filter.. I tried to include the default numeric filters along with the custom one and it still fails with the same translation key error.
Code snippet changed for operator declaration as below:

const quantityOnlyOperators: GridFilterOperator<any, number>[] = [
  ...getGridNumericOperators(),
  {
    label: "Between",
    value: "between",
    headerLabel: "Between",
    getApplyFilterFn: (filterItem) => {
      if (!Array.isArray(filterItem.value) || filterItem.value.length !== 2) {
        return null;
      }
      if (filterItem.value[0] == null || filterItem.value[1] == null) {
        return null;
      }
      return (value) => {
        return (
          value !== null &&
          filterItem.value[0] <= value &&
          value <= filterItem.value[1]
        );
      };
    },
    InputComponent: InputNumberInterval,
  },
];

Updated my codesandbox to reflect this https://codesandbox.io/p/sandbox/nostalgic-pascal-9twstk?file=%2Fsrc%2FDemo.tsx%3A91%2C1-114%2C3

[MBilalShafi]

Thank you @ankurheble for providing the updated demo, this indeed is something we could fix internally.
I've raised a PR for the fix to this particular problem, you can test it in this live csb example too. Let me know if it looks good to you now.

For the broader problem, I agree the dx is not great and it should be improved, thank you @flaviendelangle for the suggestion, I remember we did discuss the problem during the implementation of header filters but settled on the same thing which was in normal filters back then.

I've created a separate issue to track and solve this problem.

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@ankurheble: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.