1 | initial version |
const [searchQuery, setSearchQuery] = useState("");
const [filteredItems, setFilteredItems] = useState(items);
<TextField
label="Search"
value={searchQuery}
onChange={(event) => setSearchQuery(event.target.value)}
/>
const handleSearch = (query) => {
const filteredData = items.filter((item) =>
item.name.toLowerCase().includes(query.toLowerCase())
);
setFilteredItems(filteredData);
};
useEffect(() => {
handleSearch(searchQuery);
}, [searchQuery]);
<DataGrid rows={filteredItems} columns={columns} />
This will allow the search feature to only filter the currently displayed results, rather than the entire dataset.