DataGrid filtering

How can I make the DataGrid filter the data when I click a button outside of the datagrid? Do I use useGridApiRef?

2 Replies

kapa.ai•13mo ago

Hi @theshow72. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To filter data in the DataGrid when you click a button outside of the DataGrid, you can use the setFilters function from the useDataGrid hook in refine. You don't need to use useGridApiRef for this. Here's an example of how you can use a custom checkbox to filter the rows:

import { useDataGrid, List } from "@refinedev/mui";  
import { FormControlLabel, Checkbox } from "@mui/material";  
import { DataGrid, GridColumns } from "@mui/x-data-grid";  

const columns: GridColumns = [  
 {  
 field: "id",  
 headerName: "ID",  
 type: "number",  
 },  
 { field: "title", headerName: "Title" },  
 { field: "status", headerName: "Status" },  
];  

export const PostsList: React.FC = () => {  
 const { dataGridProps, setFilters } = useDataGrid();  

 const handleFilter = (  
 e: React.ChangeEvent<HTMLInputElement>,  
 checked: boolean,  
 ) => {  
 setFilters([  
 {  
 field: "status",  
 value: checked ? "draft" : undefined,  
 operator: "eq",  
 },  
 ]);  
 };  

 return (  
 <List>  
 <FormControlLabel  
 label="Filter by Draft Status"  
 control={<Checkbox onChange={handleFilter} />}  
 />  
 <DataGrid {...dataGridProps} columns={columns} autoHeight />  
 </List>  
 );  
};

import { useDataGrid, List } from "@refinedev/mui";  
import { FormControlLabel, Checkbox } from "@mui/material";  
import { DataGrid, GridColumns } from "@mui/x-data-grid";  

const columns: GridColumns = [  
 {  
 field: "id",  
 headerName: "ID",  
 type: "number",  
 },  
 { field: "title", headerName: "Title" },  
 { field: "status", headerName: "Status" },  
];  

export const PostsList: React.FC = () => {  
 const { dataGridProps, setFilters } = useDataGrid();  

 const handleFilter = (  
 e: React.ChangeEvent<HTMLInputElement>,  
 checked: boolean,  
 ) => {  
 setFilters([  
 {  
 field: "status",  
 value: checked ? "draft" : undefined,  
 operator: "eq",  
 },  
 ]);  
 };  

 return (  
 <List>  
 <FormControlLabel  
 label="Filter by Draft Status"  
 control={<Checkbox onChange={handleFilter} />}  
 />  
 <DataGrid {...dataGridProps} columns={columns} autoHeight />  
 </List>  
 );  
};

In this example, the setFilters function is used to set a filter state when the checkbox is clicked. The function accepts three properties to filter the table: 1. field - the column field in the table to apply the filter 2. operator - the criterion to filter the table 3. value - the value to search for You can replace the checkbox with a button and adjust the handleFilter function to suit your needs. For more information, you can refer to the refine documentation (https://refine.dev/docs/api-reference/mui/hooks/useDataGrid). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@1107774951605415976> kapa.ai is still learning and improving, please let us how it did by reacting below