Mui Grid Toolbar Filter Button

Question

I want to show to users filter bar when my Datagrid component created. When my component created, Users should see Datagrid as below (as if filtering button was clicked)

The codes of the Mui Datagrid component I use are down below.

<DataGrid
  rows={tableRows}
  columns={tableColumns}
  components={{ Toolbar: ReportRenderToolbar }}
  checkboxSelection
  disableRowSelectionOnClick
/>

Custom Toolbar component is:

import React from "react";

import {
  GridToolbarContainer,
  GridToolbarFilterButton,
} from "@mui/x-data-grid";

const ReportRenderToolbar = () => {
  return (
    <GridToolbarContainer>
      <GridToolbarFilterButton />
    </GridToolbarContainer>
  );
};

export default ReportRenderToolbar;

Is there any props I can pass to <GridToolbarFilterButton />? And how can I show filter bar above the datagrid?

Answer 1

To pass props down to your custom components.

The components prop is deprecated, see overriding components.

Instead you can use the new slots.

Provide the DataGrid with a slots prop for your custom components and pass props with slotProps.

<DataGrid
  rows={rows}
  columns={columns}
  slots={{
    toolbar: ReportRenderToolbar,
  }}
  slotProps={{
    toolbar: { counter: rows.length },
  }}
/>

Custom Toolbar

To position the filter panel a row lower you can add a negative top value.

const ReportRenderToolbar = (props) => {
  console.log(props);

  return (
    <GridToolbarContainer sx={{ top: -120 }}>
      <GridToolbarFilterButton />
    </GridToolbarContainer>
  );
};