[data grid] What is the best way to modify the toolbar menus ?

[adrianbws]

The problem in depth

Hello,

I are attempting to modify how the filters menu opens, instead of opening it in the default dropdown we are attempting to open them in a drawer component. The issue we are running into is that each time we apply a filter in the drawer the mui data grid renders and closes the drawer.

Here is a snippet of our code

const [filters, setFilters] = useState([]);
const [isDrawerOpen, setIsDrawerOpen] = useState(false);

Here is how we are using the custom toolbar.

<DataGridPremium
  checkboxSelection
  disableRowSelectionOnClick
  rows={data}
  columns={columns}
  onRowSelectionModelChange={(newSelectionModel) => {
    setSelectedRows(newSelectionModel);
  }}
  filterModel={{
    items: filters,
    onFilterModelChange: handleFiltersChange,
  }}
  columnVisibilityModel={columnVisibilityModel}
  onColumnVisibilityModelChange={(newModel) => setColumnVisibilityModel(newModel)}
  slots={{
    toolbar: () => (
      <CustomToolbarMemo
        handleFiltersChange={handleFiltersChange}
        isOpen={isDrawerOpen}
        setIsOpen={setIsDrawerOpen}
      />
    ),
    noRowsOverlay: () => <EmptyContent title="No Data" />,
    noResultsOverlay: () => <EmptyContent title="No results found" />,
  }}
  slotProps={{
    toolbar: {
      showQuickFilter: true,
    },
    columnsPanel: {
      getTogglableColumns,
    },
  }}
/>

Here is how we have customized it.

function CustomToolbar({ handleFiltersChange, isOpen, setIsOpen }) {
  return (
    <GridToolbarContainer>
      <GridToolbarQuickFilter variant="outlined" />
      <Box sx={{ flexGrow: 1 }} />
      <GridToolbarColumnsButton />
      <CustomFilterDrawerMemo
        onFiltersChange={handleFiltersChange}
        isOpen={isOpen}
        setIsOpen={setIsOpen}
      />
      <GridToolbarDensitySelector />
      <GridToolbarExport />
    </GridToolbarContainer>
  );
}

Do you have a suggestion on how we can accomplish modifying data grid filters within a drawer component with success ?

Here is a visualization of us opening the filters in the drawer component, where whenever we modify a filter, as soon as we do the grid re-renders.

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: filters, render
Order ID: 89853

[michelengelen]

Hey @adrianbws
The drawer closes because the data grid rerenders, and unmounts the drawer in the process.
What you would need to do is to extract the drawer outside of the direct component tree of the data grid and instead handle the opening by subscribing to the event that is fired on opening and closing the filter panel.

If you could provide us with a minimal reproduction of your implementation we can help you with it.

This could be a first implementation version:

import * as React from 'react';
import {
  DataGridPremium,
  useGridApiRef,
  GridToolbar,
  DataGridPremiumProps,
} from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';
import { Drawer } from '@mui/material';

type CustomFilterDrawerProps = {
  apiRef: DataGridPremiumProps['apiRef'];
};

const CustomFilterDrawer = (props: CustomFilterDrawerProps) => {
  const [isOpen, setIsOpen] = React.useState(false);
  if (!props.apiRef?.current) {
    return null;
  }
  // const filterModel = useGridSelector(props.apiRef, gridFilterModelSelector);
  React.useEffect(() => {
    props.apiRef?.current.subscribeEvent('preferencePanelOpen', () => {
      setIsOpen(true);
    });
    props.apiRef?.current.subscribeEvent('preferencePanelClose', () => {
      setIsOpen(false);
    });
  }, [props.apiRef]);
  return (
    <Drawer anchor="left" open={isOpen}>
      Custom filter panel content
    </Drawer>
  );
};

export default function CustomToolbarGrid() {
  const apiRef = useGridApiRef();
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <CustomFilterDrawer apiRef={apiRef} />
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        slots={{
          toolbar: GridToolbar,
          filterPanel: () => null,
        }}
      />
    </div>
  );
}

[michelengelen]

@cherniavskii this could be a candidate for an advanced recipe! WDYT?

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.