wet-aquaW
Refine3y ago
16 replies
wet-aqua

setFilter with useDataGrid on mount

In the example for filtering in useDataGrid docs, handleFilter is called onChange. But how do I setFilter on mount?

Example from docs:
import { useDataGrid, List } from "@refinedev/mui";
import { FormControlLabel, Checkbox } from "@mui/material";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
const columns: GridColDef[] = [
    {
        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>
    );
};
Was this page helpful?