[DataGridPro] "Missing translation for key" error when using custom operators with unstable_headerFilters

[GuilhermeCunha]

Steps to reproduce

Link to live example: https://codesandbox.io/embed/upbeat-almeida-mqy4mp?fontsize=14&hidenavigation=1&theme=dark

Steps:

1. Add unstable_headerFilters to Datagrid
2. Add a custom operator to one of your columns

Current behavior

Currently an exception is thrown stating that the translation was not found for the operator

Missing translation for key headerFilterOperatorIs_equal.
▼ 25 stack frames were expanded.
    at Object.eval [as getLocaleText] (https://mqy4mp.csb.app/node_modules/
mui/x-data-grid/hooks/core/useGridLocaleText.js:11:13
    at eval (https://mqy4mp.csb.app/node_modules/
mui/x-data-grid-pro/components/headerFiltering/GridHeaderFilterCell.js:151:120
renderWithHooks
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:16305:18
updateForwardRef
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19226:20
beginWork
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:21636:16
HTMLUnknownElement.callCallback
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4164:14
Object.invokeGuardedCallbackDev
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4213:16
invokeGuardedCallback
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4277:31
beginWork$1
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:27451:7
performUnitOfWork
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26557:12
workLoopSync
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26466:5
renderRootSync
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26434:7
recoverFromConcurrentError
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:25850:20
performSyncWorkOnRoot
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26096:20
flushSyncCallbacks
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:12042:22
commitRootImpl
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26959:3
commitRoot
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:26682:5
finishConcurrentRender
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:25981:9
performConcurrentWorkOnRoot
https://mqy4mp.csb.app/node_modules/react-dom/cjs/react-dom.development.js:25809:7
workLoop
https://mqy4mp.csb.app/node_modules/scheduler/cjs/scheduler.development.js:266:34
flushWork
https://mqy4mp.csb.app/node_modules/scheduler/cjs/scheduler.development.js:239:14
performWorkUntilDeadline
https://mqy4mp.csb.app/node_modules/scheduler/cjs/scheduler.development.js:533:21
(anonymous function)
https://codesandbox.io/static/js/vendors~react-devtools-backend.f9bb808e7.chunk.js:1:230301
h
https://codesandbox.io/static/js/vendors~react-devtools-backend.f9bb808e7.chunk.js:1:230416
s
https://codesandbox.io/static/js/vendors~react-devtools-backend.f9bb808e7.chunk.js:1:229774

Expected behavior

The header filter should work by displaying the label of the custom operator if a translation is not found

Context

I need to integrate header filters into production, and I'd like to be able to use the custom operators that the company I work for already uses. This error is preventing me from using MUI for this purpose

Your environment

npx @mui/envinfo

System:
    OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
    Memory: 7.18 GB / 30.95 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
    Watchman: 20230118.214839.0 - /usr/local/bin/watchman
  Managers:
    Apt: 2.4.10 - /usr/bin/apt
    Homebrew: 4.0.5 - /home/linuxbrew/.linuxbrew/bin/brew
  Utilities:
    Make: 4.3 - /usr/bin/make
    GCC: 11.4.0 - /usr/bin/gcc
    Git: 2.34.1 - /usr/bin/git
    FFmpeg: 4.4.2 - /usr/bin/ffmpeg
    Curl: 7.81.0 - /usr/bin/curl
  Virtualization:
    Docker: 24.0.6 - /usr/bin/docker
    VirtualBox: 6.1.38 - /usr/bin/vboxmanage
  IDEs:
    Nano: 6.2 - /usr/bin/nano
    VSCode: 1.83.1 - /usr/bin/code
    Vim: 8.2 - /usr/bin/vim
  Languages:
    Bash: 5.1.16 - /usr/bin/bash
    Perl: 5.34.0 - /usr/bin/perl
    Python3: 3.10.12 - /usr/bin/python3
  Databases:
    MySQL: 0.22.04.1 - /usr/bin/mysql
  Browsers:
    Chrome: 118.0.5993.117

Search keywords: unstable_headerFilters Missing translation for key

Related issues:

#9034
#10556
#10550

[DanailH]

@GuilhermeCunha I think the main problem is the label of the custom filter operator that you are using is_equal. We don't have that label in our translation file. One option is for you to follow this guide and add the label yourself. The other option is to change is_equal -> equals so it starts working and then overwrite the existing translations to have the text you want showing.
To be honest Option 1 is better because you are not dependent on our GRID_DEFAULT_LOCALE_TEXT constant.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.

[yehudamakarov]

i'm trying to make my own locale translation and i'm having a hard time. the source above contains a lot of local imports so i can't figure out how much i need to copy paste, or how much i'm able to import. any help?

[yehudamakarov]

if i take this:

You can find the source in the GitHub repository.

To create your own translation or to customize the English text, copy this file to your project, make any changes needed and import the locale from there. Note that these translations of the Data Grid component depend on the Localization strategy of the whole library.

how do i "customize"

import { enUS as enUSCore } from '@mui/material/locale';
import { getGridLocalization, Localization } from '../utils/getGridLocalization';
import { GRID_DEFAULT_LOCALE_TEXT } from '../constants/localeTextConstants';

export const enUS: Localization = getGridLocalization(GRID_DEFAULT_LOCALE_TEXT, enUSCore);

if it is by making my own constants object

export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = {
  // Root
  noRowsLabel: 'No rows',
  noResultsOverlayLabel: 'No results found.',

  // Density selector toolbar button text
  toolbarDensity: 'Density',
  toolbarDensityLabel: 'Density',
  toolbarDensityCompact: 'Compact',
  toolbarDensityStandard: 'Standard',
  toolbarDensityComfortable: 'Comfortable',
etc...

it looks like i still need to manually import some things

---

am i doing something wrong?

[teddis]

I upgraded to Pro today and tried enabling headerFilters prop but immediately got this error as well. I'm not sure what's causing it. I have some custom filters that work perfectly in community edition. I am using custom renderHeaders as well to implement customer header Tooltips. Unfortunately, I do not have a live example yet to share.

[duynguyen-kun]

import { enUS as muiEnUS } from '@mui/material/locale';
import { GRID_DEFAULT_LOCALE_TEXT, GridLocaleText } from '@mui/x-data-grid';
import { getGridLocalization } from '@mui/x-data-grid/utils/getGridLocalization';

export const localeText: GridLocaleText = {
  ...GRID_DEFAULT_LOCALE_TEXT,
  noRowsLabel: 'There is no data to display',
  noResultsOverlayLabel: 'There is no data to display',
  MuiTablePagination: {
    labelRowsPerPage: 'Rows per page',
  },
};

const dataGridEnglish = getGridLocalization(localeText, muiEnUS);

export default dataGridEnglish;

I imported the dataGridEnglish into my theme and it did not change the text, which I have removed the colon