javascriptreactjsmaterial-uimui-x-data-grid

Material UI Data Grid, customize the toolbar default slots with disableColumnMenu

enter image description here

Context I am using the Datagrid component from MUI library@6.9.1. I am using disableColumnMenu to show toolbar at the top of the table i.e. not on individual column.

 <DataGrid
      disableColumnMenu
      slots={ { toolbar: GridToolbar } }

         ...
  />

What I need? I want to change the header name from COLUMNS -> MyColumn, Density -> MyDensity.

How can I achieve this?

Thanks in Advance

Solution

  • you should use localeText prop in DataGrid , like this :

     <DataGrid
    disableColumnMenu
    slots={{ toolbar: GridToolbar }}
    localeText={{
       toolbarColumns: "MyColumns",
       toolbarFilters: "MyFilters",
       toolbarDensity: "MyDensity",
       toolbarExport: "MyExports",
     }}
  />