Customize MUI Gridtoolbar

Question

I'm using MUI Datagrid and i wanna know if there is a way to customize the gridtoolbar with custom buttons and text.

Thanks.

Federico

Answer 1

I imagine that you know, thak to enable the toolbar you need to add the Toolbar: GridToolbar to the grid components prop - like

<DataGrid
  {...data}
  components={{
    Toolbar: GridToolbar,
  }}
/>

So, if you want to custom, and add others things, you must compose your own toolbar, for example:

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

And do the same thing:

<DataGrid
  {...data}
  components={{
    Toolbar: CustomToolbar,
  }}
/>

Source: https://mui.com/x/react-data-grid/components/#toolbar

Answer 2

The components prop is depricated. Now, you can do:

<DataGrid
  {...data}
  slots={{
    toolbar: CustomToolbar,
  }}
/>

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