To configure the Material UI DataGrid's initial state filter model specifically for dates, follow these steps:
const initialDateFilters = {
dateFrom: null,
dateTo: null,
}
import { GridFilterOperatorValue } from '@material-ui/data-grid';
type DateOperator = 'isAfter' | 'isBefore' | 'isOnOrAfter' | 'isOnOrBefore' | 'isBetween';
const dateOperators: { [key in DateOperator]: GridFilterOperatorValue } = {
isAfter: {
label: 'Is after',
value: '>',
getApplyFilterFn: (filterItem) => (params) => {
const cellDate = new Date(params.value);
const filterDate = new Date(filterItem.value);
return cellDate > filterDate;
},
},
// add more operators as needed
};
import { GridFilterModel } from '@material-ui/data-grid';
interface DateFilterModel extends GridFilterModel {
dateFrom: {
value: Date | null;
operatorValue: string;
};
dateTo: {
value: Date | null;
operatorValue: string;
};
}
const initialFilterModel: DateFilterModel = {
items: [],
dateFrom: {
value: null,
operatorValue: 'isOnOrAfter',
},
dateTo: {
value: null,
operatorValue: 'isOnOrBefore',
},
};
import { GridColDef } from '@material-ui/data-grid';
const columns: GridColDef[] = [
{
field: 'date',
headerName: 'Date',
filterOperators: dateOperators,
filterable: true,
filterType: 'date',
valueGetter: (params) => new Date(params.value).toLocaleDateString(),
},
// add more columns as needed
];
import { DataGrid, GridFilterModel } from '@material-ui/data-grid';
function MyGrid() {
const [dateFilters, setDateFilters] = React.useState(initialDateFilters);
const handleFilterChange = (model: GridFilterModel) => {
setDateFilters(model as DateFilterModel);
};
return (
<DataGrid
columns={columns}
rows={rows}
filterMode="server"
onFilterModelChange={handleFilterChange}
filterModel={initialFilterModel}
/>
);
}
Asked: 2022-06-06 11:00:00 +0000
Seen: 9 times
Last updated: May 02 '22