How to filter by date greater than current value in Material table?
This is what I managed so far, it's filtering by exact date and I need to filter all values which are >= that current value in table.
<TableMaterial
title=""
columns={[
{ title: `${t('description')}`, field: 'description' },
{title: `${t('due_date')}`, field: 'due_date', type: 'date', align: 'center',
filterComponent: (props) => <CustomDatePicker {...props} />}
}]
data={allData}
/>
And this is CustomDatePicker
const CustomDatePicker = (props) => {
const [date, setDate] = useState(null);
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
id="date-picker-dialog"
format="dd/MM/yyyy"
clearable
value={date}
onChange={(event) => {
setDate(event);
props.onFilterChanged(props.columnDef.tableData.id, event);
}}
KeyboardButtonProps={{
"aria-label": "change date"
}}
/>
</MuiPickersUtilsProvider>
);
};
Any help is appreciated. Thank you!
I managed to solve this without CustomDatePicker component, since material table has already built in date picker when field type:date is set.
So what is needed is only function and to call it in Material Table:
const handleDateFilter = (term, rowData) => {
return new Date(term).setHours(0, 0, 0, 0) <= new Date(rowData.due_date)
? true
: false;
};
<TableMaterial
title=""
columns={[
{ title: `${t("description")}`, field: "description" },
{
title: `${t("due_date")}`,
field: "due_date",
type: "date",
align: "center",
customFilterAndSearch: (term, rowData) => handleDateFilter(term, rowData),
},
]}
data={allData}
/>