[data grid] I want to add Apply and Cancel buttons to the GridToolbarFilterButton

[mahammahmood]

The problem in depth

I want to add Apply and Cancel buttons to the GridToolbarFilterButton. Here is a design of my problem:

Your environment

`npx @mui/envinfo`

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

Search keywords: Data, Grid, Premium, GridToolbarFilterButton, Order ID: 91010

[michelengelen]

@MBilalShafi could you take this one please?

[MBilalShafi]

@mahammahmood A similar feature request has already been made in https://github.com/mui/mui-x/issues/10938, can you check if yours is the same? If that is the case, feel free to close this one and subscribe to the other one to track the progress on it.

Thank you!

[mahammahmood]

Can you please help me with an example? This is my code. What should I do to achieve this?

import * as React from 'react';
import {
  DataGrid,
  GridSlots, GridToolbarColumnsButton,
  GridToolbarContainer, GridToolbarExportContainer,
  GridToolbarFilterButton,
} from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];

interface CustomToolbarProps {
  setFilterButtonEl: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
}

function CustomToolbar({ setFilterButtonEl }: CustomToolbarProps) {
  return (
    <GridToolbarContainer>
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton ref={setFilterButtonEl} />
    </GridToolbarContainer>
  );
}

export default function CustomFilterPanelPosition() {
  const { data } = useDemoData({
    dataSet: 'Employee',
    visibleFields: VISIBLE_FIELDS,
    rowLength: 100,
  });

  const [filterButtonEl, setFilterButtonEl] =
    React.useState<HTMLButtonElement | null>(null);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        slots={{
          toolbar: CustomToolbar as GridSlots['toolbar'],
        }}
        slotProps={{
          panel: {
            anchorEl: filterButtonEl,
          },
          toolbar: {
            setFilterButtonEl,
          },
        }}
      />
    </div>
  );
}

[MBilalShafi]

@mahammahmood Apologies if it was not clear in the previous message, but this use-case is not possible with the Data Grid's default filter panel as of now. We are tracking it as a feature request in #10938.

Feel free to provide your feedback on the mentioned issue until one of the team members picks it up. You are more than welcome to open up a pull request for the solution yourself, that is probably the fastest way to have the feature available soon.

I'll close this one so that we can track this feature request in a single place.

Thank you. 🙇

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@mahammahmood: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.