[data grid] How to reset filter explicity or using apiRef?

[ashishchoudhary12]

Summary

I have two buttons here. ButtonOne and ButtonTwo on which I am adding the columns. When I apply filter on name and switch to ButtonTwo I want to reset the filter which ever I applied. Can I do that? Please check here

Examples

No response

Motivation

No response

Search keywords: How to reset filter explicity or using apiRef?

[michelengelen]

Hey @ashishchoudhary12 ... you can just use the apiRef for this task.

Here is a quick demo: Unsetting filter via apiRef

This should do the trick!

[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.

@ashishchoudhary12: 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.

[ashishchoudhary12]

Here is a quick demo: Unsetting filter via apiRef

Hi @michelengelen, I’m having trouble locating the reset code in the link you provided. I can’t seem to find it. Could you help me out?

[michelengelen]

Here is a quick demo: Unsetting filter via apiRef

Hi @michelengelen, I’m having trouble locating the reset code in the link you provided. I can’t seem to find it. Could you help me out?

For some reason it did not save it:

DEMO

Codesandbox seems broken atm:

Here is the code:

import * as React from 'react';
import { DataGrid, GridToolbar, useGridApiRef } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';
import { Button, Divider } from '@mui/material';

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

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

  const handleButtonClick = React.useCallback(() => {
    apiRef.current.setFilterModel({ items: [] });
  }, [apiRef]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <Button variant="contained" color="primary" onClick={handleButtonClick}>
        Unset Filters
      </Button>
      <Divider sx={{ my: 2 }} />
      <DataGrid {...data} apiRef={apiRef} slots={{ toolbar: GridToolbar }} />
    </div>
  );
}

[ashishchoudhary12]

@michelengelen Earlier also I tried this but not sure It wasn't worked. But now it works fine. Thank you

[michelengelen]

Glad it worked for you!