How to change Mui DataGrid Toolbar label and input placeholder text?

Question

I am currently using React MUI. I added toolbar button to my datagrid. In toolbar panel there is default "Find column" label and "Column title" input placeholder values. How can I change/replace those values?

I tried in sx prop giving to label class css -> content: "some value" but it did not work.

Answer 1

You can customize these texts by passing columnsPanelTextFieldLabel and columnsPanelTextFieldPlaceholder keys through localeText parameter like this:

<DataGrid
    {...data}
    slots={{
      toolbar: GridToolbar
    }}
    localeText={{
      columnsPanelTextFieldLabel: "Custom Find Column",
      columnsPanelTextFieldPlaceholder: "Custom Column Title"
    }}
/>

You can take a look at this StackBlitz for a live working example. You can take a look at this link for the full list of customizable texts.