CODEWITHSUNDEEP
reactjsmaterial-uidatagridcustomization
fBare
fBare

Reputation: 143

Customize MUI Gridtoolbar

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

This is the toolbar i wanna customize

Upvotes: 12

Views: 14826

Answers (2)

Luke Vanzweden
Luke Vanzweden

Reputation: 646

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

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

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

Upvotes: 8

Daniel Bueno
Daniel Bueno

Reputation: 472

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

Upvotes: 15

Related Questions