add datetime and datetime-range filter variants (#905)

KevinVandy · Jan 4, 2024 · ffb5172 · ffb5172 · vercel · Jan 4, 2024
1 parent 20bc9b0
commit ffb5172
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 4 deletions.
diff --git a/apps/material-react-table-docs/components/prop-tables/columnOptions.ts b/apps/material-react-table-docs/components/prop-tables/columnOptions.ts
@@ -509,6 +509,16 @@ export const columnOptions: ColumnOption[] = [
     required: false,
     type: 'DatePickerProps | ({ column, rangeFilterIndex, table }) => DatePickerProps',
   },
+  {
+    columnOption: 'muiFilterDateTimePickerProps',
+    defaultValue: '',
+    description: '',
+    link: 'https://mui.com/x/api/date-pickers/datetime-picker/',
+    linkText: 'MUI X DateTimePicker Props',
+    source: 'Material UI',
+    required: false,
+    type: 'DateTimePickerProps | ({ column, rangeFilterIndex, table }) => DateTimePickerProps',
+  },
   {
     columnOption: 'muiFilterSliderProps',
     defaultValue: '',

diff --git a/apps/material-react-table-docs/pages/docs/guides/column-filtering.mdx b/apps/material-react-table-docs/pages/docs/guides/column-filtering.mdx
@@ -105,7 +105,7 @@ Material React Table has several built-in filter variants for advanced filtering
 - `'date-range'` - shows a date range picker for filtering by date ranges
 - `'checkbox'` - shows a checkbox for filtering by `'true'` or `'false'` values
 
-> `'autocomplete'`, `'date'`, and `'date-range'` variants are new in v2
+> `'autocomplete'`, `'date'`, `'datetime'`, `'date-range'`, and `'datetime-range'` variants are new in v2
 
 <CustomizeFilterVariantsExample />
 

diff --git a/packages/material-react-table/src/inputs/MRT_FilterTextField.tsx b/packages/material-react-table/src/inputs/MRT_FilterTextField.tsx
@@ -21,6 +21,10 @@ import {
   DatePicker,
   type DatePickerProps,
 } from '@mui/x-date-pickers/DatePicker';
+import {
+  DateTimePicker,
+  type DateTimePickerProps,
+} from '@mui/x-date-pickers/DateTimePicker';
 import { getValueAndLabel, parseFromValuesOrFunc } from '../column.utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import {
@@ -50,6 +54,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       manualFiltering,
       muiFilterAutocompleteProps,
       muiFilterDatePickerProps,
+      muiFilterDateTimePickerProps,
       muiFilterTextFieldProps,
     },
     refs: { filterInputRefs },
@@ -84,6 +89,14 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     }),
   };
 
+  const dateTimePickerProps: DateTimePickerProps<any> = {
+    ...parseFromValuesOrFunc(muiFilterDateTimePickerProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, {
+      column,
+      table,
+    }),
+  };
+
   const isDateFilter = filterVariant?.startsWith('date');
   const isAutocompleteFilter = filterVariant === 'autocomplete';
   const isRangeFilter =
@@ -352,7 +365,26 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
 
   return (
     <>
-      {isDateFilter ? (
+      {filterVariant?.startsWith('datetime') ? (
+        <DateTimePicker
+          onChange={(newDate) => {
+            handleChange(newDate);
+          }}
+          value={filterValue || null}
+          {...dateTimePickerProps}
+          slotProps={{
+            field: {
+              clearable: true,
+              onClear: () => handleClear(),
+              ...dateTimePickerProps?.slotProps?.field,
+            },
+            textField: {
+              ...commonTextFieldProps,
+              ...dateTimePickerProps?.slotProps?.textField,
+            },
+          }}
+        />
+      ) : filterVariant?.startsWith('date') ? (
         <DatePicker
           onChange={(newDate) => {
             handleChange(newDate);

diff --git a/packages/material-react-table/src/menus/MRT_FilterOptionMenu.tsx b/packages/material-react-table/src/menus/MRT_FilterOptionMenu.tsx
@@ -103,7 +103,7 @@ export const mrtFilterOptions = (
 const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
 const emptyModes = ['empty', 'notEmpty'];
 const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
-const rangeVariants = ['range-slider', 'date-range', 'range'];
+const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
 
 interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;

diff --git a/packages/material-react-table/src/types.ts b/packages/material-react-table/src/types.ts
@@ -66,7 +66,10 @@ import { type TableHeadProps } from '@mui/material/TableHead';
 import { type TableRowProps } from '@mui/material/TableRow';
 import { type TextFieldProps } from '@mui/material/TextField';
 import { type Theme } from '@mui/material/styles';
-import { type DatePickerProps } from '@mui/x-date-pickers';
+import {
+  type DatePickerProps,
+  type DateTimePickerProps,
+} from '@mui/x-date-pickers';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
 import { type MRT_Icons } from './icons';
@@ -463,6 +466,8 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
     | 'checkbox'
     | 'date'
     | 'date-range'
+    | 'datetime'
+    | 'datetime-range'
     | 'multi-select'
     | 'range'
     | 'range-slider'
@@ -533,6 +538,13 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
         table: MRT_TableInstance<TData>;
       }) => DatePickerProps<any>)
     | DatePickerProps<any>;
+  muiFilterDateTimePickerProps?:
+    | ((props: {
+        column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
+        table: MRT_TableInstance<TData>;
+      }) => DateTimePickerProps<any>)
+    | DateTimePickerProps<any>;
   muiFilterSliderProps?:
     | ((props: {
         column: MRT_Column<TData>;
@@ -886,6 +898,13 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
         table: MRT_TableInstance<TData>;
       }) => DatePickerProps<any>)
     | DatePickerProps<any>;
+  muiFilterDateTimePickerProps?:
+    | ((props: {
+        column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
+        table: MRT_TableInstance<TData>;
+      }) => DateTimePickerProps<any>)
+    | DateTimePickerProps<any>;
   muiFilterSliderProps?:
     | ((props: {
         column: MRT_Column<TData>;

diff --git a/packages/material-react-table/stories/features/Filtering.stories.tsx b/packages/material-react-table/stories/features/Filtering.stories.tsx
@@ -78,6 +78,7 @@ const data = [...Array(120)].map(() => ({
   hireDate: faker.date.birthdate({ max: 2024, min: 2011 }),
   isActive: faker.datatype.boolean(),
   lastName: faker.person.lastName(),
+  arrivalTime: faker.date.recent(),
   state: faker.location.state(),
 }));
 
@@ -163,6 +164,14 @@ export const FilterFnAndFilterVariants = () => (
         header: 'Hire Date',
         id: 'hireDate',
       },
+      {
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleString(), //transform data to readable format for cell render
+        accessorFn: (row) => new Date(row.arrivalTime), //transform data before processing so sorting works
+        filterFn: 'greaterThan',
+        filterVariant: 'datetime',
+        header: 'Arrival time',
+        id: 'arrivalTime',
+      },
       {
         accessorKey: 'gender',
         filterSelectOptions: ['Male', 'Female', 'Other'],