material-react-table 2.3.1 → 2.4.1

package/src/inputs/MRT_FilterTextField.tsx

@@ -21,6 +21,14 @@ import {
   DatePicker,
   type DatePickerProps,
 } from '@mui/x-date-pickers/DatePicker';
+import {
+  DateTimePicker,
+  type DateTimePickerProps,
+} from '@mui/x-date-pickers/DateTimePicker';
+import {
+  TimePicker,
+  type TimePickerProps,
+} from '@mui/x-date-pickers/TimePicker';
 import { getValueAndLabel, parseFromValuesOrFunc } from '../column.utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import {
@@ -50,7 +58,9 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       manualFiltering,
       muiFilterAutocompleteProps,
       muiFilterDatePickerProps,
+      muiFilterDateTimePickerProps,
       muiFilterTextFieldProps,
+      muiFilterTimePickerProps,
     },
     refs: { filterInputRefs },
     setColumnFilterFns,
@@ -84,7 +94,24 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     }),
   };
 
-  const isDateFilter = filterVariant?.startsWith('date');
+  const dateTimePickerProps: DateTimePickerProps<any> = {
+    ...parseFromValuesOrFunc(muiFilterDateTimePickerProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, {
+      column,
+      table,
+    }),
+  };
+
+  const timePickerProps: TimePickerProps<any> = {
+    ...parseFromValuesOrFunc(muiFilterTimePickerProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, {
+      column,
+      table,
+    }),
+  };
+
+  const isDateFilter =
+    filterVariant?.startsWith('date') || filterVariant?.startsWith('time');
   const isAutocompleteFilter = filterVariant === 'autocomplete';
   const isRangeFilter =
     filterVariant?.includes('range') || rangeFilterIndex !== undefined;
@@ -350,14 +377,50 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     }),
   };
 
+  const commonDatePickerProps = {
+    onChange: (newDate: any) => {
+      handleChange(newDate);
+    },
+    value: filterValue || null,
+  };
+
   return (
     <>
-      {isDateFilter ? (
-        <DatePicker
-          onChange={(newDate) => {
-            handleChange(newDate);
+      {filterVariant?.startsWith('time') ? (
+        <TimePicker
+          {...commonDatePickerProps}
+          {...timePickerProps}
+          slotProps={{
+            field: {
+              clearable: true,
+              onClear: () => handleClear(),
+              ...timePickerProps?.slotProps?.field,
+            },
+            textField: {
+              ...commonTextFieldProps,
+              ...timePickerProps?.slotProps?.textField,
+            },
+          }}
+        />
+      ) : filterVariant?.startsWith('datetime') ? (
+        <DateTimePicker
+          {...commonDatePickerProps}
+          {...dateTimePickerProps}
+          slotProps={{
+            field: {
+              clearable: true,
+              onClear: () => handleClear(),
+              ...dateTimePickerProps?.slotProps?.field,
+            },
+            textField: {
+              ...commonTextFieldProps,
+              ...dateTimePickerProps?.slotProps?.textField,
+            },
           }}
-          value={filterValue || null}
+        />
+      ) : filterVariant?.startsWith('date') ? (
+        <DatePicker
+          {...commonDatePickerProps}
           {...datePickerProps}
           slotProps={{
             field: {

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -67,6 +67,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
       renderColumnActionsMenuItems,
     },
     refs: { filterInputRefs },
+    setColumnFilterFns,
     setColumnOrder,
     setColumnSizingInfo,
     setShowColumnFilters,
@@ -119,8 +120,14 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   };
 
   const handleClearFilter = () => {
-    column.setFilterValue('');
+    column.setFilterValue(undefined);
     setAnchorEl(null);
+    if (['empty', 'notEmpty'].includes(columnDef._filterFn)) {
+      setColumnFilterFns((prev) => ({
+        ...prev,
+        [header.id]: allowedColumnFilterOptions?.[0] ?? 'fuzzy',
+      }));
+    }
   };
 
   const handleFilterByColumn = () => {

package/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;

package/src/style.utils.ts

@@ -90,25 +90,6 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
       column.getIsPinned() === 'left'
         ? `${column.getStart('left')}px`
         : undefined,
-    ml:
-      table.options.enableColumnVirtualization &&
-      column.getIsPinned() === 'left' &&
-      column.getPinnedIndex() === 0
-        ? `-${
-            column.getSize() *
-            (table.getState().columnPinning.left?.length ?? 1)
-          }px`
-        : undefined,
-    mr:
-      table.options.enableColumnVirtualization &&
-      column.getIsPinned() === 'right' &&
-      column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
-        ? `-${
-            column.getSize() *
-            (table.getState().columnPinning.right?.length ?? 1) *
-            1.2
-          }px`
-        : undefined,
     opacity:
       table.getState().draggingColumn?.id === column.id ||
       table.getState().hoveredColumn?.id === column.id

package/src/table/MRT_Table.tsx

@@ -53,22 +53,9 @@ export const MRT_Table = <TData extends MRT_RowData>({
 
   const columnVirtualizer = useMRT_ColumnVirtualizer(table);
 
-  const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
-
-  const virtualColumns = columnVirtualizer
-    ? columnVirtualizer.getVirtualItems()
-    : undefined;
-
   const commonTableGroupProps = {
-    table,
-    virtualColumns,
-    virtualPaddingLeft,
-    virtualPaddingRight,
-  };
-
-  const commonTableBodyProps = {
-    ...commonTableGroupProps,
     columnVirtualizer,
+    table,
   };
 
   return (
@@ -84,9 +71,9 @@ export const MRT_Table = <TData extends MRT_RowData>({
     >
       {enableTableHead && <MRT_TableHead {...commonTableGroupProps} />}
       {memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (
-        <Memo_MRT_TableBody {...commonTableBodyProps} />
+        <Memo_MRT_TableBody {...commonTableGroupProps} />
       ) : (
-        <MRT_TableBody {...commonTableBodyProps} />
+        <MRT_TableBody {...commonTableGroupProps} />
       )}
       {enableTableFooter && <MRT_TableFooter {...commonTableGroupProps} />}
     </Table>

package/src/toolbar/MRT_TablePagination.tsx

@@ -4,7 +4,8 @@ import InputLabel from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
 import Pagination, { type PaginationProps } from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
-import Select from '@mui/material/Select';
+import Select, { type SelectProps } from '@mui/material/Select';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_RowData, type MRT_TableInstance } from '../types';
@@ -14,6 +15,7 @@ const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
 interface Props<TData extends MRT_RowData>
   extends Partial<
     PaginationProps & {
+      SelectProps?: Partial<SelectProps>;
       disabled?: boolean;
       rowsPerPageOptions?: { label: string; value: number }[] | number[];
       showRowsPerPage?: boolean;
@@ -70,6 +72,9 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
     ..._rest
   } = paginationProps ?? {};
 
+  const disableBack = pageIndex <= 0 || disabled;
+  const disableNext = lastRowIndex >= totalRowCount || disabled;
+
   return (
     <Box
       className="MuiTablePagination-root"
@@ -164,40 +169,56 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
           } ${totalRowCount.toLocaleString()}`}</Typography>
           <Box gap="xs">
             {showFirstButton && (
-              <IconButton
-                aria-label={localization.goToFirstPage}
-                disabled={pageIndex <= 0 || disabled}
-                onClick={() => setPageIndex(0)}
-                size="small"
-              >
-                <FirstPageIcon />
-              </IconButton>
+              <Tooltip enterDelay={1000} title={localization.goToFirstPage}>
+                <span>
+                  <IconButton
+                    aria-label={localization.goToFirstPage}
+                    disabled={disableBack}
+                    onClick={() => setPageIndex(0)}
+                    size="small"
+                  >
+                    <FirstPageIcon />
+                  </IconButton>
+                </span>
+              </Tooltip>
             )}
-            <IconButton
-              aria-label={localization.goToPreviousPage}
-              disabled={pageIndex <= 0 || disabled}
-              onClick={() => setPageIndex(pageIndex - 1)}
-              size="small"
-            >
-              <ChevronLeftIcon />
-            </IconButton>
-            <IconButton
-              aria-label={localization.goToNextPage}
-              disabled={lastRowIndex >= totalRowCount || disabled}
-              onClick={() => setPageIndex(pageIndex + 1)}
-              size="small"
-            >
-              <ChevronRightIcon />
-            </IconButton>
+            <Tooltip enterDelay={1000} title={localization.goToPreviousPage}>
+              <span>
+                <IconButton
+                  aria-label={localization.goToPreviousPage}
+                  disabled={disableBack}
+                  onClick={() => setPageIndex(pageIndex - 1)}
+                  size="small"
+                >
+                  <ChevronLeftIcon />
+                </IconButton>
+              </span>
+            </Tooltip>
+            <Tooltip enterDelay={1000} title={localization.goToNextPage}>
+              <span>
+                <IconButton
+                  aria-label={localization.goToNextPage}
+                  disabled={disableNext}
+                  onClick={() => setPageIndex(pageIndex + 1)}
+                  size="small"
+                >
+                  <ChevronRightIcon />
+                </IconButton>
+              </span>
+            </Tooltip>
             {showLastButton && (
-              <IconButton
-                aria-label={localization.goToLastPage}
-                disabled={lastRowIndex >= totalRowCount || disabled}
-                onClick={() => setPageIndex(numberOfPages - 1)}
-                size="small"
-              >
-                <LastPageIcon />
-              </IconButton>
+              <Tooltip enterDelay={1000} title={localization.goToLastPage}>
+                <span>
+                  <IconButton
+                    aria-label={localization.goToLastPage}
+                    disabled={disableNext}
+                    onClick={() => setPageIndex(numberOfPages - 1)}
+                    size="small"
+                  >
+                    <LastPageIcon />
+                  </IconButton>
+                </span>
+              </Tooltip>
             )}
           </Box>
         </>

package/src/types.ts

@@ -66,7 +66,11 @@ 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,
+  type TimePickerProps,
+} from '@mui/x-date-pickers';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
 import { type MRT_Icons } from './icons';
@@ -89,24 +93,48 @@ export type MRT_ColumnFilterFnsState = Record<string, MRT_FilterOption>;
 
 export type MRT_RowData = Record<string, any>;
 
-export type {
-  ColumnFiltersState as MRT_ColumnFiltersState,
-  ColumnOrderState as MRT_ColumnOrderState,
-  ColumnPinningState as MRT_ColumnPinningState,
-  ColumnSizingInfoState as MRT_ColumnSizingInfoState,
-  ColumnSizingState as MRT_ColumnSizingState,
-  ExpandedState as MRT_ExpandedState,
-  GroupingState as MRT_GroupingState,
-  PaginationState as MRT_PaginationState,
-  RowSelectionState as MRT_RowSelectionState,
-  SortingState as MRT_SortingState,
-  Updater as MRT_Updater,
-  VirtualItem as MRT_VirtualItem,
-  Virtualizer as MRT_Virtualizer,
-  VirtualizerOptions as MRT_VirtualizerOptions,
-  VisibilityState as MRT_VisibilityState,
+export type MRT_ColumnFiltersState = ColumnFiltersState;
+export type MRT_ColumnOrderState = ColumnOrderState;
+export type MRT_ColumnPinningState = ColumnPinningState;
+export type MRT_ColumnSizingInfoState = ColumnSizingInfoState;
+export type MRT_ColumnSizingState = ColumnSizingState;
+export type MRT_ExpandedState = ExpandedState;
+export type MRT_GroupingState = GroupingState;
+export type MRT_PaginationState = PaginationState;
+export type MRT_RowSelectionState = RowSelectionState;
+export type MRT_SortingState = SortingState;
+export type MRT_Updater<T> = Updater<T>;
+export type MRT_VirtualItem = VirtualItem;
+export type MRT_VisibilityState = VisibilityState;
+
+export type MRT_VirtualizerOptions<
+  TScrollElement extends Element | Window = Element | Window,
+  TItemElement extends Element = Element,
+> = VirtualizerOptions<TScrollElement, TItemElement>;
+
+export type MRT_ColumnVirtualizer<
+  TScrollElement extends Element | Window = HTMLDivElement,
+  TItemElement extends Element = HTMLTableCellElement,
+> = Virtualizer<TScrollElement, TItemElement> & {
+  virtualColumns: MRT_VirtualItem[];
+  virtualPaddingLeft?: number;
+  virtualPaddingRight?: number;
 };
 
+export type MRT_RowVirtualizer<
+  TScrollElement extends Element | Window = HTMLDivElement,
+  TItemElement extends Element = HTMLTableRowElement,
+> = Virtualizer<TScrollElement, TItemElement> & {
+  virtualRows: MRT_VirtualItem[];
+};
+
+/**
+ * @deprecated use `MRT_ColumnVirtualizer` or `MRT_RowVirtualizer` instead
+ */
+export type MRT_Virtualizer<_TScrollElement = any, _TItemElement = any> =
+  | MRT_ColumnVirtualizer
+  | MRT_RowVirtualizer;
+
 export type MRT_ColumnHelper<TData extends MRT_RowData> = {
   accessor: <
     TAccessor extends AccessorFn<TData> | DeepKeys<TData>,
@@ -463,11 +491,15 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
     | 'checkbox'
     | 'date'
     | 'date-range'
+    | 'datetime'
+    | 'datetime-range'
     | 'multi-select'
     | 'range'
     | 'range-slider'
     | 'select'
-    | 'text';
+    | 'text'
+    | 'time'
+    | 'time-range';
   /**
    * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
    */
@@ -533,6 +565,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>;
@@ -546,6 +585,13 @@ export type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<
         table: MRT_TableInstance<TData>;
       }) => TextFieldProps)
     | TextFieldProps;
+  muiFilterTimePickerProps?:
+    | ((props: {
+        column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
+        table: MRT_TableInstance<TData>;
+      }) => TimePickerProps<any>)
+    | TimePickerProps<any>;
   muiTableBodyCellProps?:
     | ((props: {
         cell: MRT_Cell<TData, TValue>;
@@ -708,10 +754,9 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   columnFilterModeOptions?: Array<
     LiteralUnion<string & MRT_FilterOption>
   > | null;
-  columnVirtualizerInstanceRef?: MutableRefObject<Virtualizer<
-    HTMLDivElement,
-    HTMLTableCellElement
-  > | null>;
+  columnVirtualizerInstanceRef?: MutableRefObject<
+    MRT_ColumnVirtualizer | MRT_Virtualizer | null
+  >;
   columnVirtualizerOptions?:
     | ((props: {
         table: MRT_TableInstance<TData>;
@@ -886,6 +931,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>;
@@ -899,6 +951,13 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
         table: MRT_TableInstance<TData>;
       }) => TextFieldProps)
     | TextFieldProps;
+  muiFilterTimePickerProps?:
+    | ((props: {
+        column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
+        table: MRT_TableInstance<TData>;
+      }) => TimePickerProps<any>)
+    | TimePickerProps<any>;
   muiLinearProgressProps?:
     | ((props: {
         isTopToolbar: boolean;
@@ -909,6 +968,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
     | ((props: { table: MRT_TableInstance<TData> }) => Partial<
         PaginationProps & {
           SelectProps?: Partial<SelectProps>;
+          disabled?: boolean;
           rowsPerPageOptions?: { label: string; value: number }[] | number[];
           showRowsPerPage?: boolean;
         }
@@ -916,6 +976,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
     | Partial<
         PaginationProps & {
           SelectProps?: Partial<SelectProps>;
+          disabled?: boolean;
           rowsPerPageOptions?: { label: string; value: number }[] | number[];
           showRowsPerPage?: boolean;
         }
@@ -1129,10 +1190,9 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
     | 'sticky'
     | 'top'
     | 'top-and-bottom';
-  rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<
-    HTMLDivElement,
-    HTMLTableRowElement
-  > | null>;
+  rowVirtualizerInstanceRef?: MutableRefObject<
+    MRT_RowVirtualizer | MRT_Virtualizer | null
+  >;
   rowVirtualizerOptions?:
     | ((props: {
         table: MRT_TableInstance<TData>;