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.

Could you add some code to your question? Currently its really hard to recreate — RubenSmn, Mar 10 '23 at 14:52

score 0 · Accepted Answer · answered Mar 10 '23 at 17:10

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 sandbox for a live working example. You can take a look at this link for the full list of customizable texts.

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

1 Answers1