material-react-table 2.3.1 → 2.4.0

package/dist/index.d.ts

@@ -30,7 +30,7 @@ import { TableHeadProps } from '@mui/material/TableHead';
 import { TableRowProps } from '@mui/material/TableRow';
 import { TextFieldProps } from '@mui/material/TextField';
 import { Theme } from '@mui/material/styles';
-import { DatePickerProps } from '@mui/x-date-pickers';
+import { DatePickerProps, DateTimePickerProps, TimePickerProps } from '@mui/x-date-pickers';
 import * as _tanstack_match_sorter_utils from '@tanstack/match-sorter-utils';
 import { RankingInfo } from '@tanstack/match-sorter-utils';
 import { CollapseProps } from '@mui/material/Collapse';
@@ -178,6 +178,11 @@ type MRT_DensityState = 'comfortable' | 'compact' | 'spacious';
 type MRT_ColumnFilterFnsState = Record<string, MRT_FilterOption>;
 type MRT_RowData = Record<string, any>;
 
+type MRT_ColumnVirtualizer<TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableCellElement> = Virtualizer<TScrollElement, TItemElement> & {
+    virtualPaddingLeft?: number;
+    virtualPaddingRight?: number;
+};
+type MRT_RowVirtualizer<TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableRowElement> = Virtualizer<TScrollElement, TItemElement>;
 type MRT_ColumnHelper<TData extends MRT_RowData> = {
     accessor: <TAccessor extends AccessorFn<TData> | DeepKeys<TData>, TValue extends TAccessor extends AccessorFn<TData, infer TReturn> ? TReturn : TAccessor extends DeepKeys<TData> ? DeepValue<TData, TAccessor> : never>(accessor: TAccessor, column: MRT_DisplayColumnDef<TData, TValue>) => MRT_ColumnDef<TData, TValue>;
     display: (column: MRT_DisplayColumnDef<TData>) => MRT_ColumnDef<TData>;
@@ -466,7 +471,7 @@ type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<ColumnDef
         text?: string;
         value: any;
     } | string)[];
-    filterVariant?: 'autocomplete' | 'checkbox' | 'date' | 'date-range' | 'multi-select' | 'range' | 'range-slider' | 'select' | 'text';
+    filterVariant?: 'autocomplete' | 'checkbox' | 'date' | 'date-range' | 'datetime' | 'datetime-range' | 'multi-select' | 'range' | 'range-slider' | 'select' | '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)
      */
@@ -518,6 +523,11 @@ type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<ColumnDef
         rangeFilterIndex?: number;
         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>;
         table: MRT_TableInstance<TData>;
@@ -527,6 +537,11 @@ type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<ColumnDef
         rangeFilterIndex?: number;
         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>;
         column: MRT_Column<TData>;
@@ -613,7 +628,7 @@ type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row-expand
 type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'getRowId' | 'globalFilterFn' | 'initialState' | 'onStateChange' | 'state'> & {
     columnFilterDisplayMode?: 'custom' | 'popover' | 'subheader';
     columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
-    columnVirtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, HTMLTableCellElement> | null>;
+    columnVirtualizerInstanceRef?: MutableRefObject<MRT_ColumnVirtualizer | null>;
     columnVirtualizerOptions?: ((props: {
         table: MRT_TableInstance<TData>;
     }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>) | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>;
@@ -760,6 +775,11 @@ type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TDa
         rangeFilterIndex?: number;
         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>;
         table: MRT_TableInstance<TData>;
@@ -769,6 +789,11 @@ type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TDa
         rangeFilterIndex?: number;
         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;
         table: MRT_TableInstance<TData>;
@@ -976,7 +1001,7 @@ type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TDa
     rowCount?: number;
     rowNumberDisplayMode?: 'original' | 'static';
     rowPinningDisplayMode?: 'bottom' | 'select-bottom' | 'select-sticky' | 'select-top' | 'sticky' | 'top' | 'top-and-bottom';
-    rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<HTMLDivElement, HTMLTableRowElement> | null>;
+    rowVirtualizerInstanceRef?: MutableRefObject<MRT_RowVirtualizer | null>;
     rowVirtualizerOptions?: ((props: {
         table: MRT_TableInstance<TData>;
     }) => Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>) | Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>;
@@ -994,14 +1019,12 @@ type Props$U<TData extends MRT_RowData> = Xor<TableInstanceProp<TData>, MRT_Tabl
 declare const MaterialReactTable: <TData extends MRT_RowData>(props: Props$U<TData>) => react_jsx_runtime.JSX.Element;
 
 interface Props$T<TData extends MRT_RowData> extends TableBodyProps {
-    columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    columnVirtualizer?: MRT_ColumnVirtualizer;
     table: MRT_TableInstance<TData>;
     virtualColumns?: VirtualItem[];
-    virtualPaddingLeft?: number;
-    virtualPaddingRight?: number;
 }
-declare const MRT_TableBody: <TData extends MRT_RowData>({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, ...rest }: Props$T<TData>) => react_jsx_runtime.JSX.Element;
-declare const Memo_MRT_TableBody: <TData extends MRT_RowData>({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, ...rest }: Props$T<TData>) => react_jsx_runtime.JSX.Element;
+declare const MRT_TableBody: <TData extends MRT_RowData>({ columnVirtualizer, table, virtualColumns, ...rest }: Props$T<TData>) => react_jsx_runtime.JSX.Element;
+declare const Memo_MRT_TableBody: <TData extends MRT_RowData>({ columnVirtualizer, table, virtualColumns, ...rest }: Props$T<TData>) => react_jsx_runtime.JSX.Element;
 
 interface Props$S<TData extends MRT_RowData> extends TableCellProps {
     cell: MRT_Cell<TData>;
@@ -1022,7 +1045,7 @@ interface Props$R<TData extends MRT_RowData> {
 declare const MRT_TableBodyCellValue: <TData extends MRT_RowData>({ cell, table, }: Props$R<TData>) => ReactNode;
 
 interface Props$Q<TData extends MRT_RowData> {
-    columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+    columnVirtualizer?: MRT_ColumnVirtualizer;
     measureElement?: (element: HTMLTableRowElement) => void;
     numRows?: number;
     pinnedRowIds?: string[];
@@ -1030,12 +1053,10 @@ interface Props$Q<TData extends MRT_RowData> {
     rowIndex: number;
     table: MRT_TableInstance<TData>;
     virtualColumns?: VirtualItem[];
-    virtualPaddingLeft?: number;
-    virtualPaddingRight?: number;
     virtualRow?: VirtualItem;
 }
-declare const MRT_TableBodyRow: <TData extends MRT_RowData>({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }: Props$Q<TData>) => react_jsx_runtime.JSX.Element;
-declare const Memo_MRT_TableBodyRow: <TData extends MRT_RowData>({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }: Props$Q<TData>) => react_jsx_runtime.JSX.Element;
+declare const MRT_TableBodyRow: <TData extends MRT_RowData>({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualRow, }: Props$Q<TData>) => react_jsx_runtime.JSX.Element;
+declare const Memo_MRT_TableBodyRow: <TData extends MRT_RowData>({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualRow, }: Props$Q<TData>) => react_jsx_runtime.JSX.Element;
 
 interface Props$P<TData extends MRT_RowData> extends IconButtonProps {
     row: MRT_Row<TData>;
@@ -1259,12 +1280,11 @@ declare const getValueAndLabel: (option: {
 };
 
 interface Props$z<TData extends MRT_RowData> extends TableFooterProps {
+    columnVirtualizer?: MRT_ColumnVirtualizer;
     table: MRT_TableInstance<TData>;
     virtualColumns?: VirtualItem[];
-    virtualPaddingLeft?: number;
-    virtualPaddingRight?: number;
 }
-declare const MRT_TableFooter: <TData extends MRT_RowData>({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, ...rest }: Props$z<TData>) => react_jsx_runtime.JSX.Element;
+declare const MRT_TableFooter: <TData extends MRT_RowData>({ columnVirtualizer, table, virtualColumns, ...rest }: Props$z<TData>) => react_jsx_runtime.JSX.Element;
 
 interface Props$y<TData extends MRT_RowData> extends TableCellProps {
     footer: MRT_Header<TData>;
@@ -1273,21 +1293,19 @@ interface Props$y<TData extends MRT_RowData> extends TableCellProps {
 declare const MRT_TableFooterCell: <TData extends MRT_RowData>({ footer, table, ...rest }: Props$y<TData>) => react_jsx_runtime.JSX.Element;
 
 interface Props$x<TData extends MRT_RowData> extends TableRowProps {
+    columnVirtualizer?: MRT_ColumnVirtualizer;
     footerGroup: MRT_HeaderGroup<TData>;
     table: MRT_TableInstance<TData>;
     virtualColumns?: VirtualItem[];
-    virtualPaddingLeft?: number;
-    virtualPaddingRight?: number;
 }
-declare const MRT_TableFooterRow: <TData extends MRT_RowData>({ footerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, ...rest }: Props$x<TData>) => react_jsx_runtime.JSX.Element | null;
+declare const MRT_TableFooterRow: <TData extends MRT_RowData>({ columnVirtualizer, footerGroup, table, virtualColumns, ...rest }: Props$x<TData>) => react_jsx_runtime.JSX.Element | null;
 
 interface Props$w<TData extends MRT_RowData> extends TableHeadProps {
+    columnVirtualizer?: MRT_ColumnVirtualizer;
     table: MRT_TableInstance<TData>;
     virtualColumns?: VirtualItem[];
-    virtualPaddingLeft?: number;
-    virtualPaddingRight?: number;
 }
-declare const MRT_TableHead: <TData extends MRT_RowData>({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, ...rest }: Props$w<TData>) => react_jsx_runtime.JSX.Element;
+declare const MRT_TableHead: <TData extends MRT_RowData>({ columnVirtualizer, table, virtualColumns, ...rest }: Props$w<TData>) => react_jsx_runtime.JSX.Element;
 
 interface Props$v<TData extends MRT_RowData> extends TableCellProps {
     header: MRT_Header<TData>;
@@ -1333,18 +1351,14 @@ interface Props$p<TData extends MRT_RowData> extends TableSortLabelProps {
 declare const MRT_TableHeadCellSortLabel: <TData extends MRT_RowData>({ header, table, ...rest }: Props$p<TData>) => react_jsx_runtime.JSX.Element;
 
 interface Props$o<TData extends MRT_RowData> extends TableRowProps {
+    columnVirtualizer?: MRT_ColumnVirtualizer;
     headerGroup: MRT_HeaderGroup<TData>;
     table: MRT_TableInstance<TData>;
     virtualColumns?: VirtualItem[];
-    virtualPaddingLeft?: number;
-    virtualPaddingRight?: number;
 }
-declare const MRT_TableHeadRow: <TData extends MRT_RowData>({ headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, ...rest }: Props$o<TData>) => react_jsx_runtime.JSX.Element;
+declare const MRT_TableHeadRow: <TData extends MRT_RowData>({ columnVirtualizer, headerGroup, table, virtualColumns, ...rest }: Props$o<TData>) => react_jsx_runtime.JSX.Element;
 
-declare const useMRT_ColumnVirtualizer: <TData extends MRT_RowData, TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableCellElement>(table: MRT_TableInstance<TData>) => (Virtualizer<TScrollElement, TItemElement> & {
-    virtualPaddingLeft?: number | undefined;
-    virtualPaddingRight?: number | undefined;
-}) | undefined;
+declare const useMRT_ColumnVirtualizer: <TData extends MRT_RowData, TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableCellElement>(table: MRT_TableInstance<TData>) => MRT_ColumnVirtualizer | undefined;
 
 interface Params<TData extends MRT_RowData> {
     columnOrder: ColumnOrderState;
@@ -1356,9 +1370,9 @@ declare const useMRT_DisplayColumns: <TData extends MRT_RowData>(params: Params<
 
 declare const useMRT_Effects: <TData extends MRT_RowData>(table: MRT_TableInstance<TData>) => void;
 
-declare const useMRT_RowVirtualizer: <TData extends MRT_RowData, TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableRowElement>(table: MRT_TableInstance<TData>) => Virtualizer<TScrollElement, TItemElement> | undefined;
+declare const useMRT_RowVirtualizer: <TData extends MRT_RowData, TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableRowElement>(table: MRT_TableInstance<TData>, rows?: MRT_Row<TData>[] | undefined) => MRT_RowVirtualizer<TScrollElement, TItemElement> | undefined;
 
-declare const useMRT_Rows: <TData extends MRT_RowData>(table: MRT_TableInstance<TData>) => MRT_Row<TData>[];
+declare const useMRT_Rows: <TData extends MRT_RowData>(table: MRT_TableInstance<TData>, pinnedRowIds?: string[]) => MRT_Row<TData>[];
 
 declare const useMRT_TableInstance: <TData extends MRT_RowData>(tableOptions: MRT_DefinedTableOptions<TData>) => MRT_TableInstance<TData>;
 
@@ -1585,4 +1599,4 @@ declare const MRT_TopToolbar: <TData extends MRT_RowData>({ table, }: Props<TDat
 
 declare const useMaterialReactTable: <TData extends MRT_RowData>(tableOptions: MRT_TableOptions<TData>) => MRT_TableInstance<TData>;
 
-export { type LiteralUnion, type MRT_AggregationFn, MRT_AggregationFns, type MRT_AggregationOption, MRT_BottomToolbar, type MRT_Cell, type MRT_Column, MRT_ColumnActionMenu, type MRT_ColumnDef, type MRT_ColumnFilterFnsState, type MRT_ColumnHelper, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, type MRT_DefinedColumnDef, type MRT_DefinedTableOptions, type MRT_DensityState, type MRT_DisplayColumnDef, type MRT_DisplayColumnIds, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, type MRT_FilterFn, MRT_FilterFns, type MRT_FilterOption, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, type MRT_GroupColumnDef, type MRT_Header, type MRT_HeaderGroup, type MRT_Icons, type MRT_InternalFilterOption, MRT_LinearProgressBar, type MRT_Localization, type MRT_Row, MRT_RowActionMenu, type MRT_RowData, type MRT_RowModel, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, type MRT_SortingFn, MRT_SortingFns, type MRT_SortingOption, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, type MRT_TableInstance, MRT_TableLoadingOverlay, type MRT_TableOptions, MRT_TablePagination, MRT_TablePaper, type MRT_TableState, type MRT_Theme, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, type Prettify, type Xor, commonListItemStyles, commonMenuItemStyles, createMRTColumnHelper, createRow, extraIndexRangeExtractor, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonMRTCellStyles, getCommonToolbarStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getMRTTheme, getTotalRight, getTrailingDisplayColumnIds, getValueAndLabel, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMRT_ColumnVirtualizer, useMRT_DisplayColumns, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
+export { type LiteralUnion, type MRT_AggregationFn, MRT_AggregationFns, type MRT_AggregationOption, MRT_BottomToolbar, type MRT_Cell, type MRT_Column, MRT_ColumnActionMenu, type MRT_ColumnDef, type MRT_ColumnFilterFnsState, type MRT_ColumnHelper, MRT_ColumnPinningButtons, type MRT_ColumnVirtualizer, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, type MRT_DefinedColumnDef, type MRT_DefinedTableOptions, type MRT_DensityState, type MRT_DisplayColumnDef, type MRT_DisplayColumnIds, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, type MRT_FilterFn, MRT_FilterFns, type MRT_FilterOption, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, type MRT_GroupColumnDef, type MRT_Header, type MRT_HeaderGroup, type MRT_Icons, type MRT_InternalFilterOption, MRT_LinearProgressBar, type MRT_Localization, type MRT_Row, MRT_RowActionMenu, type MRT_RowData, type MRT_RowModel, MRT_RowPinButton, type MRT_RowVirtualizer, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, type MRT_SortingFn, MRT_SortingFns, type MRT_SortingOption, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, type MRT_TableInstance, MRT_TableLoadingOverlay, type MRT_TableOptions, MRT_TablePagination, MRT_TablePaper, type MRT_TableState, type MRT_Theme, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, type Prettify, type Xor, commonListItemStyles, commonMenuItemStyles, createMRTColumnHelper, createRow, extraIndexRangeExtractor, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonMRTCellStyles, getCommonToolbarStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getMRTTheme, getTotalRight, getTrailingDisplayColumnIds, getValueAndLabel, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMRT_ColumnVirtualizer, useMRT_DisplayColumns, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };

package/dist/index.esm.js

@@ -67,6 +67,8 @@ import Chip from '@mui/material/Chip';
 import InputAdornment from '@mui/material/InputAdornment';
 import { debounce } from '@mui/material/utils';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import FormHelperText from '@mui/material/FormHelperText';
 import Slider from '@mui/material/Slider';
 import Stack from '@mui/material/Stack';
@@ -802,11 +804,12 @@ const MRT_TableDetailPanel = (_a) => {
                     : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
 };
 
-const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
+const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualRow, }) => {
     var _a, _b, _c, _d;
     const theme = useTheme();
     const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
     const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
+    const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
     const isPinned = enableRowPinning && row.getIsPinned();
     const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
         row,
@@ -923,8 +926,9 @@ const useMRT_ColumnVirtualizer = (table) => {
     //get first 16 column widths and average them if calc is needed
     const averageColumnWidth = useMemo(() => {
         var _a, _b, _c, _d;
-        if (!enableColumnVirtualization || (columnVirtualizerProps === null || columnVirtualizerProps === void 0 ? void 0 : columnVirtualizerProps.estimateSize))
+        if (!enableColumnVirtualization || (columnVirtualizerProps === null || columnVirtualizerProps === void 0 ? void 0 : columnVirtualizerProps.estimateSize)) {
             return 0;
+        }
         const columnsWidths = (_d = (_c = (_b = (_a = table
             .getRowModel()
             .rows[0]) === null || _a === void 0 ? void 0 : _a.getCenterVisibleCells()) === null || _b === void 0 ? void 0 : _b.slice(0, 16)) === null || _c === void 0 ? void 0 : _c.map((cell) => cell.column.getSize() * 1.2)) !== null && _d !== void 0 ? _d : [];
@@ -1082,7 +1086,8 @@ const MRT_EditActionButtons = (_a) => {
             });
         }
     };
-    return (jsx(Box, { onClick: (e) => e.stopPropagation(), sx: (theme) => (Object.assign({ display: 'flex', gap: '0.75rem' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), jsx(Tooltip, { title: localization.save, children: jsx(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsx(CircularProgress, { size: 18 }) : jsx(SaveIcon, {}) }) })] })) : (jsxs(Fragment, { children: [jsx(Button, { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxs(Button, { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsx(CircularProgress, { color: "inherit", size: 18 }), localization.save] })] })) }));
+    return (jsx(Box, { onClick: (e) => e.stopPropagation(), sx: (theme) => (Object.assign({ display: 'flex', gap: '0.75rem' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), ((isCreating && onCreatingRowSave) ||
+                    (isEditing && onEditingRowSave)) && (jsx(Tooltip, { title: localization.save, children: jsx(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsx(CircularProgress, { size: 18 }) : jsx(SaveIcon, {}) }) }))] })) : (jsxs(Fragment, { children: [jsx(Button, { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxs(Button, { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsx(CircularProgress, { color: "inherit", size: 18 }), localization.save] })] })) }));
 };
 
 const mrtFilterOptions = (localization) => [
@@ -1174,7 +1179,7 @@ const mrtFilterOptions = (localization) => [
 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'];
 const MRT_FilterOptionMenu = (_a) => {
     var _b, _c, _d, _e;
     var { anchorEl, header, onSelect, setAnchorEl, setFilterValue, table } = _a, rest = __rest(_a, ["anchorEl", "header", "onSelect", "setAnchorEl", "setFilterValue", "table"]);
@@ -1690,14 +1695,15 @@ const useMRT_Effects = (table) => {
     }, [density]);
 };
 
-const useMRT_RowVirtualizer = (table) => {
+const useMRT_RowVirtualizer = (table, rows) => {
+    var _a;
     const { getRowModel, getState, options: { enableRowVirtualization, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef }, } = table;
     const { density, draggingRow } = getState();
     const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
         table,
     });
     const rowVirtualizer = enableRowVirtualization
-        ? useVirtualizer(Object.assign({ count: getRowModel().rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: typeof window !== 'undefined' &&
+        ? useVirtualizer(Object.assign({ count: (_a = rows === null || rows === void 0 ? void 0 : rows.length) !== null && _a !== void 0 ? _a : getRowModel().rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: typeof window !== 'undefined' &&
                 navigator.userAgent.indexOf('Firefox') === -1
                 ? (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height
                 : undefined, overscan: 4, rangeExtractor: useCallback((range) => {
@@ -1726,7 +1732,7 @@ const MRT_SortingFns = Object.assign(Object.assign({}, sortingFns), { fuzzy: fuz
 const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
     Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
 
-const useMRT_Rows = (table) => {
+const useMRT_Rows = (table, pinnedRowIds = []) => {
     const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { enableGlobalFilterRankedResults, enablePagination, enableRowPinning, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, rowPinningDisplayMode, }, } = table;
     const { expanded, globalFilter, pagination, rowPinning, sorting } = getState();
     const shouldRankRows = useMemo(() => getCanRankRows(table) &&
@@ -1741,9 +1747,6 @@ const useMRT_Rows = (table) => {
         manualSorting,
         sorting,
     ]);
-    const pinnedRowIds = useMemo(() => getRowModel()
-        .rows.filter((row) => row.getIsPinned())
-        .map((r) => r.id), [rowPinning, table.getRowModel().rows]);
     const rows = useMemo(() => {
         let rows = [];
         if (!shouldRankRows) {
@@ -2269,7 +2272,7 @@ const useMRT_TableOptions = (_a) => {
 
 const MRT_TableBody = (_a) => {
     var _b, _c, _d, _e, _f, _g;
-    var { columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["columnVirtualizer", "table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
+    var { columnVirtualizer, table, virtualColumns } = _a, rest = __rest(_a, ["columnVirtualizer", "table", "virtualColumns"]);
     const { getBottomRows, getIsSomeRowsPinned, getRowModel, getState, getTopRows, options: { createDisplayMode, enableStickyFooter, enableStickyHeader, layoutMode, localization, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
     const { columnFilters, creatingRow, globalFilter, isFullScreen, rowPinning } = getState();
     const tableBodyProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyProps, { table })), rest);
@@ -2277,11 +2280,16 @@ const MRT_TableBody = (_a) => {
         ((_b = tableHeadRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) ||
         0;
     const tableFooterHeight = (enableStickyFooter && ((_c = tableFooterRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight)) || 0;
-    const pinnedRowIds = useMemo(() => getRowModel()
-        .rows.filter((row) => row.getIsPinned())
-        .map((r) => r.id), [rowPinning, table.getRowModel().rows]);
-    const rows = useMRT_Rows(table);
-    const rowVirtualizer = useMRT_RowVirtualizer(table);
+    const pinnedRowIds = useMemo(() => {
+        var _a, _b;
+        if (!((_a = rowPinning.bottom) === null || _a === void 0 ? void 0 : _a.length) && !((_b = rowPinning.top) === null || _b === void 0 ? void 0 : _b.length))
+            return [];
+        return getRowModel()
+            .rows.filter((row) => row.getIsPinned())
+            .map((r) => r.id);
+    }, [rowPinning, getRowModel().rows]);
+    const rows = useMRT_Rows(table, pinnedRowIds);
+    const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
     const virtualRows = rowVirtualizer
         ? rowVirtualizer.getVirtualItems()
         : undefined;
@@ -2290,8 +2298,6 @@ const MRT_TableBody = (_a) => {
         numRows: rows.length,
         table,
         virtualColumns,
-        virtualPaddingLeft,
-        virtualPaddingRight,
     };
     const CreatingRow = creatingRow && createDisplayMode === 'row' && (jsx(MRT_TableBodyRow, Object.assign({}, commonRowProps, { row: creatingRow, rowIndex: -1 })));
     return (jsxs(Fragment, { children: [!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
@@ -2362,8 +2368,9 @@ const MRT_TableFooterCell = (_a) => {
 
 const MRT_TableFooterRow = (_a) => {
     var _b;
-    var { footerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["footerGroup", "table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
+    var { columnVirtualizer, footerGroup, table, virtualColumns } = _a, rest = __rest(_a, ["columnVirtualizer", "footerGroup", "table", "virtualColumns"]);
     const { options: { layoutMode, muiTableFooterRowProps }, } = table;
+    const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
     // if no content in row, skip row
     if (!((_b = footerGroup.headers) === null || _b === void 0 ? void 0 : _b.some((header) => (typeof header.column.columnDef.footer === 'string' &&
         !!header.column.columnDef.footer) ||
@@ -2382,7 +2389,7 @@ const MRT_TableFooterRow = (_a) => {
 };
 
 const MRT_TableFooter = (_a) => {
-    var { table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
+    var { columnVirtualizer, table, virtualColumns } = _a, rest = __rest(_a, ["columnVirtualizer", "table", "virtualColumns"]);
     const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef }, } = table;
     const { isFullScreen } = getState();
     const tableFooterProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterProps, {
@@ -2399,11 +2406,11 @@ const MRT_TableFooter = (_a) => {
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
-                : undefined, position: stickFooter ? 'sticky' : undefined, zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: getFooterGroups().map((footerGroup) => (jsx(MRT_TableFooterRow, { footerGroup: footerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, footerGroup.id))) })));
+                : undefined, position: stickFooter ? 'sticky' : undefined, zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: getFooterGroups().map((footerGroup) => (jsx(MRT_TableFooterRow, { columnVirtualizer: columnVirtualizer, footerGroup: footerGroup, table: table, virtualColumns: virtualColumns }, footerGroup.id))) })));
 };
 
 const MRT_TableHeadCellColumnActionsButton = (_a) => {
-    var _b;
+    var _b, _c;
     var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
     const { options: { icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps, }, } = table;
     const { column } = header;
@@ -2423,7 +2430,7 @@ const MRT_TableHeadCellColumnActionsButton = (_a) => {
     })), rest);
     return (jsxs(Fragment, { children: [jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.columnActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ '&:hover': {
                             opacity: 1,
-                        }, height: '2rem', m: '-8px -4px', opacity: 0.3, transition: 'all 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsx(MoreVertIcon, { style: { transform: 'scale(0.9)' } }) })) }), anchorEl && (jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
+                        }, height: '2rem', m: '-8px -4px', opacity: 0.3, transition: 'all 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_c = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _c !== void 0 ? _c : (jsx(MoreVertIcon, { style: { transform: 'scale(0.9)' } })) })) }), anchorEl && (jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_FilterCheckbox = (_a) => {
@@ -2456,9 +2463,9 @@ const MRT_FilterCheckbox = (_a) => {
 };
 
 const MRT_FilterTextField = (_a) => {
-    var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
     var { header, rangeFilterIndex, table } = _a, rest = __rest(_a, ["header", "rangeFilterIndex", "table"]);
-    const { options: { columnFilterModeOptions, enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
+    const { options: { columnFilterModeOptions, enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { filterVariant } = columnDef;
@@ -2474,7 +2481,15 @@ const MRT_FilterTextField = (_a) => {
         column,
         table,
     }));
-    const isDateFilter = filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date');
+    const dateTimePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDateTimePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, {
+        column,
+        table,
+    }));
+    const timePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTimePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, {
+        column,
+        table,
+    }));
+    const isDateFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) || (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time'));
     const isAutocompleteFilter = filterVariant === 'autocomplete';
     const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) || rangeFilterIndex !== undefined;
     const isSelectFilter = filterVariant === 'select';
@@ -2641,12 +2656,22 @@ const MRT_FilterTextField = (_a) => {
                         : !filterChipLabel
                             ? '120px'
                             : 'auto', mx: '-2px', p: 0, width: 'calc(100% + 4px)' }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))) });
-    return (jsxs(Fragment, { children: [isDateFilter ? (jsx(DatePicker, Object.assign({ onChange: (newDate) => {
-                    handleChange(newDate);
-                }, value: filterValue || null }, datePickerProps, { slotProps: {
-                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_m = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.field),
-                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_o = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.textField),
-                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleChange(getValueAndLabel(newValue).value), options: (_p = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _p !== void 0 ? _p : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
+    const commonDatePickerProps = {
+        onChange: (newDate) => {
+            handleChange(newDate);
+        },
+        value: filterValue || null,
+    };
+    return (jsxs(Fragment, { children: [(filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')) ? (jsx(TimePicker, Object.assign({}, commonDatePickerProps, timePickerProps, { slotProps: {
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_m = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_o = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.textField),
+                } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('datetime')) ? (jsx(DateTimePicker, Object.assign({}, commonDatePickerProps, dateTimePickerProps, { slotProps: {
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_p = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _p === void 0 ? void 0 : _p.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_q = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _q === void 0 ? void 0 : _q.textField),
+                } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsx(DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_s = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _s === void 0 ? void 0 : _s.textField),
+                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleChange(getValueAndLabel(newValue).value), options: (_t = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _t !== void 0 ? _t : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
                     var _a;
                     return (jsx(TextField, Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange })));
                 }, value: filterValue }))) : (jsx(TextField, Object.assign({ SelectProps: {
@@ -2661,7 +2686,7 @@ const MRT_FilterTextField = (_a) => {
                 }, onChange: handleTextFieldChange, select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
                     jsx(MenuItem, { disabled: true, divider: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
                     ...[
-                        (_q = textFieldProps.children) !== null && _q !== void 0 ? _q : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
+                        (_u = textFieldProps.children) !== null && _u !== void 0 ? _u : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
                             var _a;
                             const { label, value } = getValueAndLabel(option);
                             return (jsxs(MenuItem, { sx: {
@@ -3070,8 +3095,9 @@ const MRT_TableHeadCell = (_a) => {
 };
 
 const MRT_TableHeadRow = (_a) => {
-    var { headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["headerGroup", "table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
+    var { columnVirtualizer, headerGroup, table, virtualColumns } = _a, rest = __rest(_a, ["columnVirtualizer", "headerGroup", "table", "virtualColumns"]);
     const { options: { layoutMode, muiTableHeadRowProps }, } = table;
+    const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
     const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadRowProps, {
         headerGroup,
         table,
@@ -3140,7 +3166,7 @@ const MRT_TablePagination = (_a) => {
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, _rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0 || disabled, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) })), jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0 || disabled, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, {}) }), jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount || disabled, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }), showLastButton && (jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount || disabled, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }))] })] })) : null] }));
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, _rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, { title: localization.goToFirstPage, children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0 || disabled, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) }) })), jsx(Tooltip, { title: localization.goToPreviousPage, children: jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0 || disabled, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, {}) }) }), jsx(Tooltip, { title: localization.goToNextPage, children: jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount || disabled, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }) }), showLastButton && (jsx(Tooltip, { title: localization.goToLastPage, children: jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount || disabled, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }) }))] })] })) : null] }));
 };
 
 const MRT_GlobalFilterTextField = (_a) => {
@@ -3512,7 +3538,7 @@ const MRT_TopToolbar = ({ table, }) => {
 };
 
 const MRT_TableHead = (_a) => {
-    var { table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
+    var { columnVirtualizer, table, virtualColumns } = _a, rest = __rest(_a, ["columnVirtualizer", "table", "virtualColumns"]);
     const { getHeaderGroups, getSelectedRowModel, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
     const { isFullScreen, showAlertBanner } = getState();
     const tableHeadProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadProps, { table })), rest);
@@ -3529,7 +3555,7 @@ const MRT_TableHead = (_a) => {
             }, children: jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
                     display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
                     padding: 0,
-                }, children: jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id)))) })));
+                }, children: jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table, virtualColumns: virtualColumns }, headerGroup.id)))) })));
 };
 
 const MRT_Table = (_a) => {
@@ -3552,18 +3578,15 @@ const MRT_Table = (_a) => {
         return colSizes;
     }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
     const columnVirtualizer = useMRT_ColumnVirtualizer(table);
-    const { virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
     const virtualColumns = columnVirtualizer
         ? columnVirtualizer.getVirtualItems()
         : undefined;
     const commonTableGroupProps = {
+        columnVirtualizer,
         table,
         virtualColumns,
-        virtualPaddingLeft,
-        virtualPaddingRight,
     };
-    const commonTableBodyProps = Object.assign(Object.assign({}, commonTableGroupProps), { columnVirtualizer });
-    return (jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, commonTableGroupProps)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({}, commonTableBodyProps))) : (jsx(MRT_TableBody, Object.assign({}, commonTableBodyProps))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
+    return (jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, commonTableGroupProps)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({}, commonTableGroupProps))) : (jsx(MRT_TableBody, Object.assign({}, commonTableGroupProps))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
 };
 
 const MRT_TableLoadingOverlay = (_a) => {