reactjsmaterial-uimui-x-data-grid

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


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?


Solution

  • 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
      }}
    />
    

    Codesandbox Demo