[data grid] Missing translation for key `headerFilterOperatorBetween` about mui-x HOT 7 CLOSED

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.

from mui-x.

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.

from mui-x.

@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

from mui-x.

Similar issues:

#11029
#10270

from mui-x.

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

from mui-x.

@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

from mui-x.

⚠️ 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.

from mui-x.