material-react-table 2.3.0 → 2.4.0

package/dist/index.js

@@ -71,6 +71,8 @@ var Chip = require('@mui/material/Chip');
 var InputAdornment = require('@mui/material/InputAdornment');
 var utils = require('@mui/material/utils');
 var DatePicker = require('@mui/x-date-pickers/DatePicker');
+var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
+var TimePicker = require('@mui/x-date-pickers/TimePicker');
 var FormHelperText = require('@mui/material/FormHelperText');
 var Slider = require('@mui/material/Slider');
 var Stack = require('@mui/material/Stack');
@@ -891,11 +893,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 && (jsxRuntime.jsx(Collapse__default["default"], { 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 = styles.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,
@@ -980,7 +983,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
                             rowIndex,
                             rowRef,
                             table,
-                            virtualIndex: columnVirtualizer
+                            virtualColumnIndex: columnVirtualizer
                                 ? cellOrVirtualCell.index
                                 : undefined,
                         };
@@ -1012,8 +1015,9 @@ const useMRT_ColumnVirtualizer = (table) => {
     //get first 16 column widths and average them if calc is needed
     const averageColumnWidth = react.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 : [];
@@ -1171,7 +1175,8 @@ const MRT_EditActionButtons = (_a) => {
             });
         }
     };
-    return (jsxRuntime.jsx(Box__default["default"], { 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' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { title: localization.cancel, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.cancel, onClick: handleCancel, children: jsxRuntime.jsx(CancelIcon, {}) }) }), jsxRuntime.jsx(Tooltip__default["default"], { title: localization.save, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsxRuntime.jsx(CircularProgress__default["default"], { size: 18 }) : jsxRuntime.jsx(SaveIcon, {}) }) })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button__default["default"], { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxRuntime.jsxs(Button__default["default"], { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsxRuntime.jsx(CircularProgress__default["default"], { color: "inherit", size: 18 }), localization.save] })] })) }));
+    return (jsxRuntime.jsx(Box__default["default"], { 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' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { title: localization.cancel, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.cancel, onClick: handleCancel, children: jsxRuntime.jsx(CancelIcon, {}) }) }), ((isCreating && onCreatingRowSave) ||
+                    (isEditing && onEditingRowSave)) && (jsxRuntime.jsx(Tooltip__default["default"], { title: localization.save, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsxRuntime.jsx(CircularProgress__default["default"], { size: 18 }) : jsxRuntime.jsx(SaveIcon, {}) }) }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button__default["default"], { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxRuntime.jsxs(Button__default["default"], { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsxRuntime.jsx(CircularProgress__default["default"], { color: "inherit", size: 18 }), localization.save] })] })) }));
 };
 
 const mrtFilterOptions = (localization) => [
@@ -1263,7 +1268,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"]);
@@ -1566,7 +1571,7 @@ const MRT_SelectCheckbox = (_a) => {
             ? table.getIsAllPageRowsSelected()
             : table.getIsAllRowsSelected()
         : undefined;
-    const commonProps = Object.assign(Object.assign({ checked: selectAll ? allRowsSelected : row === null || row === void 0 ? void 0 : row.getIsSelected(), disabled: isLoading || (row && !row.getCanSelect()), inputProps: {
+    const commonProps = Object.assign(Object.assign({ checked: selectAll ? allRowsSelected : row === null || row === void 0 ? void 0 : row.getIsSelected(), disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
             'aria-label': selectAll
                 ? localization.toggleSelectAll
                 : localization.toggleSelectRow,
@@ -1779,14 +1784,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
-        ? reactVirtual.useVirtualizer(Object.assign({ count: getRowModel().rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: typeof window !== 'undefined' &&
+        ? reactVirtual.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: react.useCallback((range) => {
@@ -1815,7 +1821,7 @@ const MRT_SortingFns = Object.assign(Object.assign({}, reactTable.sortingFns), {
 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 = react.useMemo(() => getCanRankRows(table) &&
@@ -1830,9 +1836,6 @@ const useMRT_Rows = (table) => {
         manualSorting,
         sorting,
     ]);
-    const pinnedRowIds = react.useMemo(() => getRowModel()
-        .rows.filter((row) => row.getIsPinned())
-        .map((r) => r.id), [rowPinning, table.getRowModel().rows]);
     const rows = react.useMemo(() => {
         let rows = [];
         if (!shouldRankRows) {
@@ -2358,7 +2361,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);
@@ -2366,11 +2369,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 = react.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 = react.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;
@@ -2379,8 +2387,6 @@ const MRT_TableBody = (_a) => {
         numRows: rows.length,
         table,
         virtualColumns,
-        virtualPaddingLeft,
-        virtualPaddingRight,
     };
     const CreatingRow = creatingRow && createDisplayMode === 'row' && (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, commonRowProps, { row: creatingRow, rowIndex: -1 })));
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
@@ -2451,8 +2457,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) ||
@@ -2471,7 +2478,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, {
@@ -2488,11 +2495,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) => (jsxRuntime.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) => (jsxRuntime.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;
@@ -2512,7 +2519,7 @@ const MRT_TableHeadCellColumnActionsButton = (_a) => {
     })), rest);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { 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: jsxRuntime.jsx(IconButton__default["default"], 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: jsxRuntime.jsx(MoreVertIcon, { style: { transform: 'scale(0.9)' } }) })) }), anchorEl && (jsxRuntime.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 : (jsxRuntime.jsx(MoreVertIcon, { style: { transform: 'scale(0.9)' } })) })) }), anchorEl && (jsxRuntime.jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_FilterCheckbox = (_a) => {
@@ -2545,9 +2552,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;
@@ -2563,7 +2570,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';
@@ -2730,12 +2745,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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isDateFilter ? (jsxRuntime.jsx(DatePicker.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 ? (jsxRuntime.jsx(Autocomplete__default["default"], 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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')) ? (jsxRuntime.jsx(TimePicker.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')) ? (jsxRuntime.jsx(DateTimePicker.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')) ? (jsxRuntime.jsx(DatePicker.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 ? (jsxRuntime.jsx(Autocomplete__default["default"], 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 (jsxRuntime.jsx(TextField__default["default"], 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 }))) : (jsxRuntime.jsx(TextField__default["default"], Object.assign({ SelectProps: {
@@ -2750,7 +2775,7 @@ const MRT_FilterTextField = (_a) => {
                 }, onChange: handleTextFieldChange, select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
                     jsxRuntime.jsx(MenuItem__default["default"], { disabled: true, divider: true, hidden: true, value: "", children: jsxRuntime.jsx(Box__default["default"], { 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 (jsxRuntime.jsxs(MenuItem__default["default"], { sx: {
@@ -3159,8 +3184,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,
@@ -3229,7 +3255,7 @@ const MRT_TablePagination = (_a) => {
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, _rest))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { 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()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0 || disabled, onClick: () => setPageIndex(0), size: "small", children: jsxRuntime.jsx(FirstPageIcon, {}) })), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0 || disabled, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, {}) }), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount || disabled, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, {}) }), showLastButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount || disabled, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsxRuntime.jsx(LastPageIcon, {}) }))] })] })) : null] }));
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, _rest))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { 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()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(Tooltip__default["default"], { title: localization.goToFirstPage, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0 || disabled, onClick: () => setPageIndex(0), size: "small", children: jsxRuntime.jsx(FirstPageIcon, {}) }) })), jsxRuntime.jsx(Tooltip__default["default"], { title: localization.goToPreviousPage, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0 || disabled, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, {}) }) }), jsxRuntime.jsx(Tooltip__default["default"], { title: localization.goToNextPage, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount || disabled, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, {}) }) }), showLastButton && (jsxRuntime.jsx(Tooltip__default["default"], { title: localization.goToLastPage, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount || disabled, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsxRuntime.jsx(LastPageIcon, {}) }) }))] })] })) : null] }));
 };
 
 const MRT_GlobalFilterTextField = (_a) => {
@@ -3601,7 +3627,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);
@@ -3618,7 +3644,7 @@ const MRT_TableHead = (_a) => {
             }, children: jsxRuntime.jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
                     display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
                     padding: 0,
-                }, children: jsxRuntime.jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id)))) })));
+                }, children: jsxRuntime.jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table, virtualColumns: virtualColumns }, headerGroup.id)))) })));
 };
 
 const MRT_Table = (_a) => {
@@ -3641,18 +3667,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 (jsxRuntime.jsxs(Table__default["default"], 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 && jsxRuntime.jsx(MRT_TableHead, Object.assign({}, commonTableGroupProps)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsxRuntime.jsx(Memo_MRT_TableBody, Object.assign({}, commonTableBodyProps))) : (jsxRuntime.jsx(MRT_TableBody, Object.assign({}, commonTableBodyProps))), enableTableFooter && jsxRuntime.jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
+    return (jsxRuntime.jsxs(Table__default["default"], 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 && jsxRuntime.jsx(MRT_TableHead, Object.assign({}, commonTableGroupProps)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsxRuntime.jsx(Memo_MRT_TableBody, Object.assign({}, commonTableGroupProps))) : (jsxRuntime.jsx(MRT_TableBody, Object.assign({}, commonTableGroupProps))), enableTableFooter && jsxRuntime.jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
 };
 
 const MRT_TableLoadingOverlay = (_a) => {