material-react-table 2.3.0 → 2.4.0

package/src/toolbar/MRT_TablePagination.tsx

@@ -5,6 +5,7 @@ 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 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';
@@ -164,40 +165,48 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
           } ${totalRowCount.toLocaleString()}`}</Typography>
           <Box gap="xs">
             {showFirstButton && (
+              <Tooltip title={localization.goToFirstPage}>
+                <IconButton
+                  aria-label={localization.goToFirstPage}
+                  disabled={pageIndex <= 0 || disabled}
+                  onClick={() => setPageIndex(0)}
+                  size="small"
+                >
+                  <FirstPageIcon />
+                </IconButton>
+              </Tooltip>
+            )}
+            <Tooltip title={localization.goToPreviousPage}>
               <IconButton
-                aria-label={localization.goToFirstPage}
+                aria-label={localization.goToPreviousPage}
                 disabled={pageIndex <= 0 || disabled}
-                onClick={() => setPageIndex(0)}
+                onClick={() => setPageIndex(pageIndex - 1)}
                 size="small"
               >
-                <FirstPageIcon />
+                <ChevronLeftIcon />
               </IconButton>
-            )}
-            <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>
-            {showLastButton && (
+            </Tooltip>
+            <Tooltip title={localization.goToNextPage}>
               <IconButton
-                aria-label={localization.goToLastPage}
+                aria-label={localization.goToNextPage}
                 disabled={lastRowIndex >= totalRowCount || disabled}
-                onClick={() => setPageIndex(numberOfPages - 1)}
+                onClick={() => setPageIndex(pageIndex + 1)}
                 size="small"
               >
-                <LastPageIcon />
+                <ChevronRightIcon />
               </IconButton>
+            </Tooltip>
+            {showLastButton && (
+              <Tooltip title={localization.goToLastPage}>
+                <IconButton
+                  aria-label={localization.goToLastPage}
+                  disabled={lastRowIndex >= totalRowCount || disabled}
+                  onClick={() => setPageIndex(numberOfPages - 1)}
+                  size="small"
+                >
+                  <LastPageIcon />
+                </IconButton>
+              </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';
@@ -107,6 +111,19 @@ export type {
   VisibilityState as MRT_VisibilityState,
 };
 
+export type MRT_ColumnVirtualizer<
+  TScrollElement extends Element | Window = HTMLDivElement,
+  TItemElement extends Element = HTMLTableCellElement,
+> = Virtualizer<TScrollElement, TItemElement> & {
+  virtualPaddingLeft?: number;
+  virtualPaddingRight?: number;
+};
+
+export type MRT_RowVirtualizer<
+  TScrollElement extends Element | Window = HTMLDivElement,
+  TItemElement extends Element = HTMLTableRowElement,
+> = Virtualizer<TScrollElement, TItemElement>;
+
 export type MRT_ColumnHelper<TData extends MRT_RowData> = {
   accessor: <
     TAccessor extends AccessorFn<TData> | DeepKeys<TData>,
@@ -463,11 +480,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 +554,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 +574,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 +743,7 @@ 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 | null>;
   columnVirtualizerOptions?:
     | ((props: {
         table: MRT_TableInstance<TData>;
@@ -886,6 +918,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 +938,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;
@@ -1129,10 +1175,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
     | 'sticky'
     | 'top'
     | 'top-and-bottom';
-  rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<
-    HTMLDivElement,
-    HTMLTableRowElement
-  > | null>;
+  rowVirtualizerInstanceRef?: MutableRefObject<MRT_RowVirtualizer | null>;
   rowVirtualizerOptions?:
     | ((props: {
         table: MRT_TableInstance<TData>;