Filtering reduces visible rows based on criteria.
Filter types:
- Text search (contains, starts with)
- Select from options
- Date range
- Number range
- Global search across all columns
Implementation:
const filteredData = useMemo(() => {
return data.filter(row => {
return Object.entries(filters).every(([col, value]) => {
return row[col].toLowerCase().includes(value.toLowerCase());
});
});
}, [data, filters]);
Debounce: Debounce filter input to avoid filtering on every keystroke.