How to search in datagrid
It seems like the docs are describing some props that don't exists formSearchProps, so if not with that, how do I filter the table based on a search query?
useDataGriduseDataGriduseDataGriduseDataGridsetFilterssetFiltersformSearchPropsfilters.modefilters.modesearchTermfilteredRowsfilteredRowsuseMemoDataGriddataGridProps.rowsconst { dataGridProps, setFilters } = useDataGrid();const handleFilter = (
e: React.ChangeEvent<HTMLInputElement>,
checked: boolean,
) => {
setFilters([
{
field: "name",
value: e.target.value,
operator: "contains",
},
]);
};<Input
placeholder="Search by name"
onChange={(e) => handleFilter(e, true)}
/>
<DataGrid {...dataGridProps} columns={columns} />import React from "react";
import { useDataGrid, List } from "@refinedev/mui";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { Input } from "@mui/material";
const PostsList: React.FC = () => {
const { dataGridProps, setFilters } = useDataGrid();
const columns = React.useMemo<GridColDef[]>(
() => [
{ field: "id", headerName: "ID", width: 50 },
{ field: "title", headerName: "Title", flex: 1 },
],
[],
);
const handleFilter = (
e: React.ChangeEvent<HTMLInputElement>,
) => {
setFilters([
{
field: "title",
value: e.target.value,
operator: "contains",
},
]);
};
return (
<List>
<Input
placeholder="Search by title"
onChange={handleFilter}
/>
<DataGrid {...dataGridProps} columns={columns} />
</List>
);
};
export default PostsList;import React, { useMemo, useState } from "react";
import { useDataGrid, List } from "@refinedev/mui";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { Input } from "@mui/material";
const PostsList: React.FC = () => {
const [searchTerm, setSearchTerm] = useState("");
const { dataGridProps } = useDataGrid({
filters: {
mode: "off", // This disables server-side filtering
},
});
const columns = React.useMemo<GridColDef[]>(
() => [
{ field: "id", headerName: "ID", width: 50 },
{ field: "title", headerName: "Title", flex: 1 },
],
[],
);
const filteredRows = useMemo(() => {
return dataGridProps.rows.filter((row) =>
row.title.toLowerCase().includes(searchTerm.toLowerCase())
);
}, [dataGridProps.rows, searchTerm]);
return (
<List>
<Input
placeholder="Search by title"
onChange={(e) => setSearchTerm(e.target.value)}
/>
<DataGrid
{...dataGridProps}
columns={columns}
rows={filteredRows}
/>
</List>
);
};
export default PostsList;