material-react-table 2.0.0-alpha.2 → 2.0.0-alpha.4

package/dist/cjs/index.js

@@ -30,9 +30,11 @@ var ListItemIcon = require('@mui/material/ListItemIcon');
 var Menu = require('@mui/material/Menu');
 var Checkbox = require('@mui/material/Checkbox');
 var FormControlLabel = require('@mui/material/FormControlLabel');
+var Autocomplete = require('@mui/material/Autocomplete');
 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 FormHelperText = require('@mui/material/FormHelperText');
 var Slider = require('@mui/material/Slider');
 var Stack = require('@mui/material/Stack');
@@ -49,7 +51,10 @@ var CircularProgress = require('@mui/material/CircularProgress');
 var Toolbar = require('@mui/material/Toolbar');
 var useMediaQuery = require('@mui/material/useMediaQuery');
 var LinearProgress = require('@mui/material/LinearProgress');
-var TablePagination = require('@mui/material/TablePagination');
+var InputLabel = require('@mui/material/InputLabel');
+var Pagination = require('@mui/material/Pagination');
+var PaginationItem = require('@mui/material/PaginationItem');
+var Select = require('@mui/material/Select');
 var Alert = require('@mui/material/Alert');
 var AlertTitle = require('@mui/material/AlertTitle');
 var Fade = require('@mui/material/Fade');
@@ -58,6 +63,8 @@ var Radio = require('@mui/material/Radio');
 var ArrowDownwardIcon = require('@mui/icons-material/ArrowDownward');
 var ArrowRightIcon = require('@mui/icons-material/ArrowRight');
 var CancelIcon = require('@mui/icons-material/Cancel');
+var ChevronLefIcon = require('@mui/icons-material/ChevronLeft');
+var ChevronRightIcon = require('@mui/icons-material/ChevronRight');
 var ClearAllIcon = require('@mui/icons-material/ClearAll');
 var CloseIcon = require('@mui/icons-material/Close');
 var DensityLargeIcon = require('@mui/icons-material/DensityLarge');
@@ -70,9 +77,11 @@ var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 var FilterAltIcon = require('@mui/icons-material/FilterAlt');
 var FilterListIcon = require('@mui/icons-material/FilterList');
 var FilterListOffIcon = require('@mui/icons-material/FilterListOff');
+var FirstPageIcon = require('@mui/icons-material/FirstPage');
 var FullscreenIcon = require('@mui/icons-material/Fullscreen');
 var FullscreenExitIcon = require('@mui/icons-material/FullscreenExit');
 var KeyboardDoubleArrowDownIcon = require('@mui/icons-material/KeyboardDoubleArrowDown');
+var LastPageIcon = require('@mui/icons-material/LastPage');
 var MoreHorizIcon = require('@mui/icons-material/MoreHoriz');
 var MoreVertIcon = require('@mui/icons-material/MoreVert');
 var PushPinIcon = require('@mui/icons-material/PushPin');
@@ -108,6 +117,7 @@ var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon);
 var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
 var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
 var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
+var Autocomplete__default = /*#__PURE__*/_interopDefaultLegacy(Autocomplete);
 var Chip__default = /*#__PURE__*/_interopDefaultLegacy(Chip);
 var InputAdornment__default = /*#__PURE__*/_interopDefaultLegacy(InputAdornment);
 var FormHelperText__default = /*#__PURE__*/_interopDefaultLegacy(FormHelperText);
@@ -126,7 +136,10 @@ var CircularProgress__default = /*#__PURE__*/_interopDefaultLegacy(CircularProgr
 var Toolbar__default = /*#__PURE__*/_interopDefaultLegacy(Toolbar);
 var useMediaQuery__default = /*#__PURE__*/_interopDefaultLegacy(useMediaQuery);
 var LinearProgress__default = /*#__PURE__*/_interopDefaultLegacy(LinearProgress);
-var TablePagination__default = /*#__PURE__*/_interopDefaultLegacy(TablePagination);
+var InputLabel__default = /*#__PURE__*/_interopDefaultLegacy(InputLabel);
+var Pagination__default = /*#__PURE__*/_interopDefaultLegacy(Pagination);
+var PaginationItem__default = /*#__PURE__*/_interopDefaultLegacy(PaginationItem);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
 var AlertTitle__default = /*#__PURE__*/_interopDefaultLegacy(AlertTitle);
 var Fade__default = /*#__PURE__*/_interopDefaultLegacy(Fade);
@@ -135,6 +148,8 @@ var Radio__default = /*#__PURE__*/_interopDefaultLegacy(Radio);
 var ArrowDownwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownwardIcon);
 var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
 var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
+var ChevronLefIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronLefIcon);
+var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
 var ClearAllIcon__default = /*#__PURE__*/_interopDefaultLegacy(ClearAllIcon);
 var CloseIcon__default = /*#__PURE__*/_interopDefaultLegacy(CloseIcon);
 var DensityLargeIcon__default = /*#__PURE__*/_interopDefaultLegacy(DensityLargeIcon);
@@ -147,9 +162,11 @@ var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon)
 var FilterAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterAltIcon);
 var FilterListIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListIcon);
 var FilterListOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterListOffIcon);
+var FirstPageIcon__default = /*#__PURE__*/_interopDefaultLegacy(FirstPageIcon);
 var FullscreenIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenIcon);
 var FullscreenExitIcon__default = /*#__PURE__*/_interopDefaultLegacy(FullscreenExitIcon);
 var KeyboardDoubleArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardDoubleArrowDownIcon);
+var LastPageIcon__default = /*#__PURE__*/_interopDefaultLegacy(LastPageIcon);
 var MoreHorizIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreHorizIcon);
 var MoreVertIcon__default = /*#__PURE__*/_interopDefaultLegacy(MoreVertIcon);
 var PushPinIcon__default = /*#__PURE__*/_interopDefaultLegacy(PushPinIcon);
@@ -346,10 +363,10 @@ const getDefaultColumnOrderIds = (props) => {
     return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
 };
 const getDefaultColumnFilterFn = (columnDef) => {
+    var _a;
     if (columnDef.filterVariant === 'multi-select')
         return 'arrIncludesSome';
-    if (columnDef.filterVariant === 'range' ||
-        columnDef.filterVariant === 'range-slider')
+    if ((_a = columnDef.filterVariant) === null || _a === void 0 ? void 0 : _a.includes('range'))
         return 'betweenInclusive';
     if (columnDef.filterVariant === 'select' ||
         columnDef.filterVariant === 'checkbox')
@@ -1217,7 +1234,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
             globalFilterModeOptions.includes(filterOption.option)) &&
             ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option)), []);
     const handleSelectFilterMode = (option) => {
-        var _a;
+        var _a, _b;
         const prevFilterMode = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef._filterFn) !== null && _a !== void 0 ? _a : '';
         if (!header || !column) {
             // global filter mode
@@ -1249,7 +1266,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
                     column.setFilterValue(currentFilterValue); // perform new filter render
                 }
             }
-            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range' ||
+            else if (((_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
                 rangeModes.includes(option)) {
                 // will now be range filter mode
                 if (!Array.isArray(currentFilterValue) ||
@@ -1316,7 +1333,7 @@ const commonListItemStyles = {
 };
 const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { getState, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ArrowRightIcon, ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, toggleAllColumnsVisible, } = table;
+    const { getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ArrowRightIcon, ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, toggleAllColumnsVisible, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
@@ -1389,11 +1406,11 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
                 jsxRuntime.jsx(MenuItem__default["default"], { disabled: !columnFilterValue ||
                         (Array.isArray(columnFilterValue) &&
                             !columnFilterValue.filter((value) => value).length), onClick: handleClearFilter, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListOffIcon, {}) }), localization.clearFilter] }) }, 3),
-                jsxRuntime.jsxs(MenuItem__default["default"], { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
+                columnFilterDisplayMode === 'subheader' && (jsxRuntime.jsxs(MenuItem__default["default"], { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
                         ? handleOpenFilterModeMenu
-                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListIcon, {}) }), (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsxRuntime.jsx(IconButton__default["default"], { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsxRuntime.jsx(ArrowRightIcon, {}) }))] }, 4),
+                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(FilterListIcon, {}) }), (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsxRuntime.jsx(IconButton__default["default"], { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsxRuntime.jsx(ArrowRightIcon, {}) }))] }, 4)),
                 showFilterModeSubMenu && (jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
-            ]
+            ].filter(Boolean)
             : []),
         ...(enableGrouping && column.getCanGroup()
             ? [
@@ -1487,18 +1504,29 @@ const MRT_FilterCheckbox = ({ column, table, }) => {
 };
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { options: { columnFilterModeOptions, enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
+    var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o;
+    const { options: { columnFilterModeOptions, enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
     const { columnDef } = column;
+    const { filterVariant } = columnDef;
     const textFieldProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTextFieldProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, {
         column,
         table,
     }));
-    const isRangeFilter = columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
-    const isSelectFilter = columnDef.filterVariant === 'select';
-    const isMultiSelectFilter = columnDef.filterVariant === 'multi-select';
-    const isTextboxFilter = columnDef.filterVariant === 'text' ||
+    const autocompleteProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterAutocompleteProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, {
+        column,
+        table,
+    }));
+    const datePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDatePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, {
+        column,
+        table,
+    }));
+    const isDateFilter = filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date');
+    const isAutocompleteFilter = filterVariant === 'autocomplete';
+    const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) || rangeFilterIndex !== undefined;
+    const isSelectFilter = filterVariant === 'select';
+    const isMultiSelectFilter = filterVariant === 'multi-select';
+    const isTextboxFilter = ['autocomplete', 'text'].includes(filterVariant) ||
         (!isSelectFilter && !isMultiSelectFilter);
     const currentFilterOption = columnDef._filterFn;
     const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
@@ -1513,55 +1541,48 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
             : rangeFilterIndex === 1
                 ? localization.max
                 : '';
-    const allowedColumnFilterOptions = (_e = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _e !== void 0 ? _e : columnFilterModeOptions;
+    const allowedColumnFilterOptions = (_f = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _f !== void 0 ? _f : columnFilterModeOptions;
     const showChangeModeButton = enableColumnFilterModes &&
         columnDef.enableColumnFilterModes !== false &&
         !rangeFilterIndex &&
         (allowedColumnFilterOptions === undefined ||
             !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
     const facetedUniqueValues = column.getFacetedUniqueValues();
-    const filterSelectOptions = react.useMemo(() => {
-        var _a;
-        return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter) && facetedUniqueValues
-            ? Array.from(facetedUniqueValues.keys())
-                .filter((value) => value !== null && value !== undefined)
-                .sort((a, b) => a.localeCompare(b))
-            : undefined);
-    }, [
-        columnDef.filterSelectOptions,
-        facetedUniqueValues,
-        isMultiSelectFilter,
-        isSelectFilter,
-    ]);
     const [anchorEl, setAnchorEl] = react.useState(null);
     const [filterValue, setFilterValue] = react.useState(() => {
         var _a, _b;
         return isMultiSelectFilter
             ? column.getFilterValue() || []
             : isRangeFilter
-                ? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || []
+                ? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || ''
                 : (_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '';
     });
-    const handleChangeDebounced = react.useCallback(utils.debounce((event) => {
-        const value = textFieldProps.type === 'date'
-            ? event.target.valueAsDate
-            : textFieldProps.type === 'number'
-                ? event.target.valueAsNumber
-                : event.target.value;
+    const handleChangeDebounced = react.useCallback(utils.debounce((newValue) => {
         if (isRangeFilter) {
             column.setFilterValue((old) => {
                 const newFilterValues = old !== null && old !== void 0 ? old : ['', ''];
-                newFilterValues[rangeFilterIndex] = value;
+                newFilterValues[rangeFilterIndex] = newValue;
                 return newFilterValues;
             });
         }
         else {
-            column.setFilterValue(value !== null && value !== void 0 ? value : undefined);
+            column.setFilterValue(newValue !== null && newValue !== void 0 ? newValue : undefined);
         }
     }, isTextboxFilter ? (manualFiltering ? 400 : 200) : 1), []);
-    const handleChange = (event) => {
-        setFilterValue(event.target.value);
-        handleChangeDebounced(event);
+    const handleChange = (newValue) => {
+        var _a;
+        setFilterValue((_a = newValue === null || newValue === void 0 ? void 0 : newValue.toString()) !== null && _a !== void 0 ? _a : '');
+        handleChangeDebounced(newValue);
+    };
+    const handleTextFieldChange = (event) => {
+        var _a;
+        const newValue = textFieldProps.type === 'date'
+            ? event.target.valueAsDate
+            : textFieldProps.type === 'number'
+                ? event.target.valueAsNumber
+                : event.target.value;
+        handleChange(newValue);
+        (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
     };
     const handleClear = () => {
         if (isMultiSelectFilter) {
@@ -1609,26 +1630,76 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         isMounted.current = true;
     }, [column.getFilterValue()]);
     if (columnDef.Filter) {
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_f = columnDef.Filter) === null || _f === void 0 ? void 0 : _f.call(columnDef, { column, header, rangeFilterIndex, table }) }));
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_g = columnDef.Filter) === null || _g === void 0 ? void 0 : _g.call(columnDef, { column, header, rangeFilterIndex, table }) }));
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TextField__default["default"], Object.assign({ FormHelperTextProps: {
-                    sx: {
-                        fontSize: '0.75rem',
-                        lineHeight: '0.8rem',
-                        whiteSpace: 'nowrap',
-                    },
-                }, InputProps: {
-                    endAdornment: !filterChipLabel && (jsxRuntime.jsx(InputAdornment__default["default"], { position: "end", children: jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, placement: "right", title: (_g = localization.clearFilter) !== null && _g !== void 0 ? _g : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.clearFilter, disabled: !((_h = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _h === void 0 ? void 0 : _h.length), onClick: handleClear, size: "small", sx: {
-                                        height: '1.75rem',
-                                        width: '1.75rem',
-                                    }, children: jsxRuntime.jsx(CloseIcon, {}) }) }) }) })),
-                    startAdornment: showChangeModeButton ? (jsxRuntime.jsxs(InputAdornment__default["default"], { position: "start", children: [jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: localization.changeFilterMode, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsxRuntime.jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsxRuntime.jsx(Chip__default["default"], { label: filterChipLabel, onDelete: handleClearEmptyFilterChip }))] })) : null,
-                }, SelectProps: {
+    const dropdownOptions = react.useMemo(() => {
+        var _a;
+        return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
+            facetedUniqueValues
+            ? Array.from(facetedUniqueValues.keys())
+                .filter((value) => value !== null && value !== undefined)
+                .sort((a, b) => a.localeCompare(b))
+            : undefined);
+    }, [
+        columnDef.filterSelectOptions,
+        facetedUniqueValues,
+        isMultiSelectFilter,
+        isSelectFilter,
+    ]);
+    const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsxRuntime.jsx(InputAdornment__default["default"], { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.clearFilter, disabled: !((_j = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _j === void 0 ? void 0 : _j.length), onClick: handleClear, size: "small", sx: {
+                        height: '2rem',
+                        transform: 'scale(0.9)',
+                        width: '2rem'
+                    }, children: jsxRuntime.jsx(CloseIcon, {}) }) }) }) })) : null;
+    const startAdornment = showChangeModeButton ? (jsxRuntime.jsxs(InputAdornment__default["default"], { position: "start", children: [jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, title: localization.changeFilterMode, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsxRuntime.jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsxRuntime.jsx(Chip__default["default"], { label: filterChipLabel, onDelete: handleClearEmptyFilterChip }))] })) : null;
+    const commonTextFieldProps = Object.assign(Object.assign({ FormHelperTextProps: {
+            sx: {
+                fontSize: '0.75rem',
+                lineHeight: '0.8rem',
+                whiteSpace: 'nowrap',
+            },
+        }, InputProps: endAdornment //hack because mui looks for presense of endAdornment key instead of undefined
+            ? { endAdornment, startAdornment }
+            : { startAdornment }, fullWidth: true, helperText: showChangeModeButton ? (jsxRuntime.jsx("label", { children: localization.filterMode.replace('{filterType}', 
+            // @ts-ignore
+            localization[`filter${((_k = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _k === void 0 ? void 0 : _k.toUpperCase()) +
+                (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
+            autoComplete: 'new-password',
+            disabled: !!filterChipLabel,
+            sx: {
+                textOverflow: 'ellipsis',
+                width: filterChipLabel ? 0 : undefined,
+            },
+            title: filterPlaceholder,
+        }, inputRef: (inputRef) => {
+            filterInputRefs.current[`${column.id}-${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : 0}`] =
+                inputRef;
+            if (textFieldProps.inputRef) {
+                textFieldProps.inputRef = inputRef;
+            }
+        }, margin: 'none', onClick: (e) => e.stopPropagation(), placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
+            ? undefined
+            : filterPlaceholder, variant: 'standard' }, textFieldProps), { sx: (theme) => (Object.assign({ minWidth: isDateFilter
+                ? '160px'
+                : isRangeFilter
+                    ? '100px'
+                    : !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() }, (_l = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _l === void 0 ? void 0 : _l.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_m = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.textField),
+                } }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], Object.assign({ getOptionLabel: (option) => option, onChange: (_e, newValue) => handleChange(newValue), options: dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : [] }, 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: {
                     displayEmpty: true,
                     multiple: isMultiSelectFilter,
                     renderValue: isMultiSelectFilter
                         ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsxRuntime.jsx(Box__default["default"], { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected === null || selected === void 0 ? void 0 : selected.map((value) => {
-                                const selectedValue = filterSelectOptions === null || filterSelectOptions === void 0 ? void 0 : filterSelectOptions.find((option) => option instanceof Object
+                                const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => option instanceof Object
                                     ? option.value === value
                                     : option === value);
                                 return (jsxRuntime.jsx(Chip__default["default"], { label: selectedValue instanceof Object
@@ -1636,52 +1707,33 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                                         : selectedValue }, value));
                             }) }))
                         : undefined,
-                }, fullWidth: true, helperText: showChangeModeButton ? (jsxRuntime.jsx("label", { children: localization.filterMode.replace('{filterType}', 
-                    // @ts-ignore
-                    localization[`filter${((_j = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _j === void 0 ? void 0 : _j.toUpperCase()) +
-                        (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
-                    disabled: !!filterChipLabel,
-                    sx: {
-                        textOverflow: 'ellipsis',
-                        width: filterChipLabel ? 0 : undefined,
-                    },
-                    title: filterPlaceholder,
-                }, margin: "none", onChange: handleChange, onClick: (e) => e.stopPropagation(), placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
-                    ? undefined
-                    : filterPlaceholder, select: isSelectFilter || isMultiSelectFilter, value: filterValue !== null && filterValue !== void 0 ? filterValue : '', variant: "standard" }, textFieldProps, { inputRef: (inputRef) => {
-                    filterInputRefs.current[`${column.id}-${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : 0}`] =
-                        inputRef;
-                    if (textFieldProps.inputRef) {
-                        textFieldProps.inputRef = inputRef;
-                    }
-                }, sx: (theme) => (Object.assign({ '& .MuiSelect-icon': {
-                        mr: '1.5rem',
-                    }, minWidth: isRangeFilter
-                        ? '100px'
-                        : !filterChipLabel
-                            ? '120px'
-                            : 'auto', mx: '-2px', p: 0, width: 'calc(100% + 4px)' }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))), 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 }) })), (_k = textFieldProps.children) !== null && _k !== void 0 ? _k : filterSelectOptions === null || filterSelectOptions === void 0 ? void 0 : filterSelectOptions.map((option) => {
-                        var _a;
-                        if (!option)
-                            return '';
-                        let value;
-                        let text;
-                        if (typeof option !== 'object') {
-                            value = option;
-                            text = option;
-                        }
-                        else {
-                            value = option.value;
-                            text = option.text;
-                        }
-                        return (jsxRuntime.jsxs(MenuItem__default["default"], { sx: {
-                                alignItems: 'center',
-                                display: 'flex',
-                                gap: '0.5rem',
-                                m: 0,
-                            }, value: value, children: [isMultiSelectFilter && (jsxRuntime.jsx(Checkbox__default["default"], { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text, ' ', !columnDef.filterSelectOptions &&
-                                    `(${facetedUniqueValues.get(value)})`] }, value));
-                    })] })), jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, setFilterValue: setFilterValue, table: table })] }));
+                }, 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"),
+                    ...[
+                        (_o = textFieldProps.children) !== null && _o !== void 0 ? _o : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
+                            var _a;
+                            if (!option)
+                                return '';
+                            let value;
+                            let text;
+                            if (typeof option !== 'object') {
+                                value = option;
+                                text = option;
+                            }
+                            else {
+                                value = option.value;
+                                text = option.text;
+                            }
+                            return (jsxRuntime.jsxs(MenuItem__default["default"], { sx: {
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    gap: '0.5rem',
+                                    m: 0,
+                                }, value: value, children: [isMultiSelectFilter && (jsxRuntime.jsx(Checkbox__default["default"], { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text, ' ', !columnDef.filterSelectOptions &&
+                                        `(${facetedUniqueValues.get(value)})`] }, `${index}-${value}`));
+                        }),
+                    ],
+                ] }))), jsxRuntime.jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, setFilterValue: setFilterValue, table: table })] }));
 };
 
 const MRT_FilterRangeFields = ({ header, table, }) => {
@@ -1760,16 +1812,17 @@ const MRT_FilterRangeSlider = ({ header, table, }) => {
 };
 
 const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
+    var _a;
     const { getState, options: { columnFilterDisplayMode }, } = table;
     const { showColumnFilters } = getState();
     const { column } = header;
     const { columnDef } = column;
-    return (jsxRuntime.jsx(Collapse__default["default"], { in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true, children: columnDef.filterVariant === 'checkbox' ? (jsxRuntime.jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsxRuntime.jsx(MRT_FilterRangeSlider, { header: header, table: table })) : columnDef.filterVariant === 'range' ||
+    return (jsxRuntime.jsx(Collapse__default["default"], { in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true, children: columnDef.filterVariant === 'checkbox' ? (jsxRuntime.jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsxRuntime.jsx(MRT_FilterRangeSlider, { header: header, table: table })) : ((_a = columnDef.filterVariant) === null || _a === void 0 ? void 0 : _a.includes('range')) ||
             ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (jsxRuntime.jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsxRuntime.jsx(MRT_FilterTextField, { header: header, table: table })) }));
 };
 
 const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const { options: { columnFilterDisplayMode, icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
@@ -1777,26 +1830,26 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
     const [anchorEl, setAnchorEl] = react.useState(null);
     const isFilterActive = (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
         (!!filterValue && !Array.isArray(filterValue));
-    const isRangeFilter = columnDef.filterVariant === 'range' ||
+    const isRangeFilter = ((_a = columnDef.filterVariant) === null || _a === void 0 ? void 0 : _a.includes('range')) ||
         ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
     const currentFilterOption = columnDef._filterFn;
     const filterTooltip = columnFilterDisplayMode === 'popover' && !isFilterActive
-        ? (_a = localization.filterByColumn) === null || _a === void 0 ? void 0 : _a.replace('{column}', String(columnDef.header))
+        ? (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', String(columnDef.header))
         : localization.filteringByColumn
             .replace('{column}', String(columnDef.header))
             .replace('{filterType}', currentFilterOption
             ? // @ts-ignore
-                localization[`filter${((_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
+                localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
                     (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
             : '')
-            .replace('{filterValue}', `"${Array.isArray(column.getFilterValue())
-            ? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
-            : column.getFilterValue()}"`)
+            .replace('{filterValue}', `"${Array.isArray(filterValue)
+            ? filterValue.join(`" ${isRangeFilter ? localization.and : localization.or} "`)
+            : filterValue}"`)
             .replace('" "', '');
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Grow__default["default"], { in: columnFilterDisplayMode === 'popover' ||
-                    (!!column.getFilterValue() && !isRangeFilter) ||
+                    (!!filterValue && !isRangeFilter) ||
                     (isRangeFilter && // @ts-ignore
-                        (!!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[0]) || !!((_d = column.getFilterValue()) === null || _d === void 0 ? void 0 : _d[1]))), unmountOnExit: true, children: jsxRuntime.jsx(Box__default["default"], { component: "span", sx: { flex: '0 0' }, children: jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, placement: "top", title: filterTooltip, children: jsxRuntime.jsx(IconButton__default["default"], { disableRipple: true, onClick: (event) => {
+                        (!!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[0]) || !!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[1]))), unmountOnExit: true, children: jsxRuntime.jsx(Box__default["default"], { component: "span", sx: { flex: '0 0' }, children: jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, placement: "top", title: filterTooltip, children: jsxRuntime.jsx(IconButton__default["default"], { disableRipple: true, onClick: (event) => {
                                 if (columnFilterDisplayMode === 'popover') {
                                     setAnchorEl(event.currentTarget);
                                 }
@@ -2273,41 +2326,40 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
         }, unmountOnExit: true, children: jsxRuntime.jsx(LinearProgress__default["default"], Object.assign({ "aria-busy": "true", "aria-label": "Loading", sx: { position: 'relative' } }, linearProgressProps)) }));
 };
 
+const defaultPageSizeOptions = [5, 10, 15, 20, 25, 30, 50, 100];
 const MRT_TablePagination = ({ position = 'bottom', table, }) => {
-    const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, localization, muiTablePaginationProps, rowCount, }, setPageIndex, setPageSize, } = table;
+    const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, icons: { ChevronLefIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiTablePaginationProps, paginationDisplayMode, rowCount, }, setPageIndex, setPageSize, } = table;
     const { pagination: { pageIndex = 0, pageSize = 10 }, showGlobalFilter, } = getState();
-    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
-    const showFirstLastPageButtons = totalRowCount / pageSize > 2;
-    const tablePaginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
+    const paginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
         table,
     });
-    const handleChangeRowsPerPage = (event) => {
-        setPageSize(+event.target.value);
-    };
-    return (jsxRuntime.jsx(TablePagination__default["default"], Object.assign({ component: "div", count: totalRowCount, getItemAriaLabel: (type) => type === 'first'
-            ? localization.goToFirstPage
-            : type === 'last'
-                ? localization.goToLastPage
-                : type === 'next'
-                    ? localization.goToNextPage
-                    : localization.goToPreviousPage, labelDisplayedRows: ({ count, from, to }) => `${from}-${to} ${localization.of} ${count}`, labelRowsPerPage: localization.rowsPerPage, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: Math.max(Math.min(pageIndex, Math.ceil(totalRowCount / pageSize) - 1), 0), rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { SelectProps: Object.assign({ MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } }, sx: { m: '0 1rem 0 1ch' } }, tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.SelectProps), sx: (theme) => (Object.assign({ '& . MuiTablePagination-select': {
-                m: '0 1px',
-            }, '& .MuiTablePagination-actions': {
-                m: '0 1px',
-            }, '& .MuiTablePagination-displayedRows': {
-                m: '0 1px',
-            }, '& .MuiTablePagination-selectLabel': {
-                m: '0 -1px',
-            }, '& .MuiTablePagination-toolbar': {
-                alignItems: 'center',
-                display: 'flex',
-            }, '&. MuiInputBase-root': {
-                m: '0 1px',
-            }, mt: position === 'top' &&
+    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
+    const numberOfPages = Math.ceil(totalRowCount / pageSize);
+    const showFirstLastPageButtons = numberOfPages > 2;
+    const showFirstButton = showFirstLastPageButtons && (paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.showFirstButton) !== false;
+    const showLastButton = showFirstLastPageButtons && (paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.showLastButton) !== false;
+    const firstRowIndex = pageIndex * pageSize;
+    const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
+    return (jsxRuntime.jsxs(Box__default["default"], { sx: {
+            alignItems: 'center',
+            display: 'flex',
+            gap: '8px',
+            justifyContent: 'space-between',
+            mt: position === 'top' &&
                 enableToolbarInternalActions &&
                 !showGlobalFilter
-                ? '3.5rem'
-                : undefined, position: 'relative', zIndex: 2 }, parseFromValuesOrFunc(tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx, theme))) })));
+                ? '3rem'
+                : undefined,
+            position: 'relative',
+            px: '4px',
+            py: '12px',
+            zIndex: 2,
+        }, children: [(paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.showRowsPerPage) !== false && (jsxRuntime.jsxs(Box__default["default"], { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsxRuntime.jsx(InputLabel__default["default"], { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsxRuntime.jsx(Select__default["default"], { id: "mrt-rows-per-page", label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { '&::before': { border: 'none' }, mb: 0 }, value: pageSize, variant: "standard", children: defaultPageSizeOptions.map((value) => (jsxRuntime.jsx(MenuItem__default["default"], { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsxRuntime.jsx(Pagination__default["default"], Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsxRuntime.jsx(PaginationItem__default["default"], Object.assign({ slots: {
+                        first: FirstPageIcon,
+                        last: LastPageIcon,
+                        next: ChevronRightIcon,
+                        previous: ChevronLefIcon,
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, paginationProps))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { mb: "0", mx: "8px", 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, onClick: () => setPageIndex(0), size: "small", children: jsxRuntime.jsx(FirstPageIcon, {}) })), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsxRuntime.jsx(ChevronLefIcon, {}) }), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, {}) }), showLastButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsxRuntime.jsx(LastPageIcon, {}) }))] })] })) : null] }));
 };
 
 const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
@@ -2955,8 +3007,9 @@ const useMRT_DisplayColumns = ({ columnOrder, creatingRow, grouping, tableOption
 };
 
 const useMRT_Effects = (table) => {
-    const { getState, options: { enablePagination, rowCount }, } = table;
-    const { globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
+    const { getIsSomeRowsPinned, getState, options: { enablePagination, enableRowPinning, rowCount }, } = table;
+    const { density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
+    const rerender = react.useReducer(() => ({}), {})[1];
     const isMounted = react.useRef(false);
     const initialBodyHeight = react.useRef();
     const previousTop = react.useRef();
@@ -3012,6 +3065,13 @@ const useMRT_Effects = (table) => {
             table.setSorting(() => appliedSort.current || []);
         }
     }, [globalFilter]);
+    react.useEffect(() => {
+        if (enableRowPinning && getIsSomeRowsPinned()) {
+            setTimeout(() => {
+                rerender();
+            }, 150);
+        }
+    }, [density]);
 };
 
 const useMRT_TableInstance = (tableOptions) => {
@@ -3280,6 +3340,8 @@ const MRT_Default_Icons = {
     ArrowDownwardIcon: ArrowDownwardIcon__default["default"],
     ArrowRightIcon: ArrowRightIcon__default["default"],
     CancelIcon: CancelIcon__default["default"],
+    ChevronLefIcon: ChevronLefIcon__default["default"],
+    ChevronRightIcon: ChevronRightIcon__default["default"],
     ClearAllIcon: ClearAllIcon__default["default"],
     CloseIcon: CloseIcon__default["default"],
     DensityLargeIcon: DensityLargeIcon__default["default"],
@@ -3292,9 +3354,11 @@ const MRT_Default_Icons = {
     FilterAltIcon: FilterAltIcon__default["default"],
     FilterListIcon: FilterListIcon__default["default"],
     FilterListOffIcon: FilterListOffIcon__default["default"],
+    FirstPageIcon: FirstPageIcon__default["default"],
     FullscreenExitIcon: FullscreenExitIcon__default["default"],
     FullscreenIcon: FullscreenIcon__default["default"],
     KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDownIcon__default["default"],
+    LastPageIcon: LastPageIcon__default["default"],
     MoreHorizIcon: MoreHorizIcon__default["default"],
     MoreVertIcon: MoreVertIcon__default["default"],
     PushPinIcon: PushPinIcon__default["default"],