Is there a way to change the toolbar button name in DataGrid?

Question

I have made a custom toolbar

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton />
      <GridToolbarDensitySelector />
      <GridToolbarExport />
    </GridToolbarContainer>
  )
}

But I'd like to change the names when displayed, not to be Columns, Filters, Density, Export, is there any solution?

score 6 · Accepted Answer · answered Oct 08 '21 at 11:47

6

You can change the localeText prop of DataGrid/DataGridPro, see all the translation keys and its default values here:

<DataGrid
  {...data}
  localeText={{
    toolbarColumns: "my columns",
    toolbarFilters: "my filters",
    toolbarDensity: "my density",
    toolbarExport: "my export"
  }}
  components={{
    Toolbar: CustomToolbar
  }}
/>

answered Oct 08 '21 at 11:47

NearHuscarl

66,950
18
261
230

Thank you so much, been struggling on this for hours – Filip Radojičić Oct 08 '21 at 12:14
Done it, i'm new around here, and yes it solved the issue, thanks once again! – Filip Radojičić Oct 08 '21 at 12:20
MUI X Data Grid localization docs for v6.11.0 (which include a link to the translation keys): https://mui.com/x/react-data-grid/localization/ – Phil Brown Aug 08 '23 at 19:50

Is there a way to change the toolbar button name in DataGrid?

1 Answers1

Linked