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

package/dist/esm/material-react-table.esm.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import Paper from '@mui/material/Paper';
-import { useState, memo, useEffect, useMemo, useRef, useCallback, useLayoutEffect, Fragment as Fragment$1 } from 'react';
+import { useState, memo, useEffect, useMemo, useRef, useCallback, useLayoutEffect, Fragment as Fragment$1, useReducer } from 'react';
 import TableContainer from '@mui/material/TableContainer';
 import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
@@ -26,9 +26,11 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
+import Autocomplete from '@mui/material/Autocomplete';
 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 FormHelperText from '@mui/material/FormHelperText';
 import Slider from '@mui/material/Slider';
 import Stack from '@mui/material/Stack';
@@ -45,7 +47,10 @@ import CircularProgress from '@mui/material/CircularProgress';
 import Toolbar from '@mui/material/Toolbar';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import LinearProgress from '@mui/material/LinearProgress';
-import TablePagination from '@mui/material/TablePagination';
+import InputLabel from '@mui/material/InputLabel';
+import Pagination from '@mui/material/Pagination';
+import PaginationItem from '@mui/material/PaginationItem';
+import Select from '@mui/material/Select';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import Fade from '@mui/material/Fade';
@@ -54,6 +59,8 @@ import Radio from '@mui/material/Radio';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
+import ChevronLefIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
 import DensityLargeIcon from '@mui/icons-material/DensityLarge';
@@ -66,9 +73,11 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import LastPageIcon from '@mui/icons-material/LastPage';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import PushPinIcon from '@mui/icons-material/PushPin';
@@ -265,10 +274,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')
@@ -1136,7 +1145,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
@@ -1168,7 +1177,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) ||
@@ -1235,7 +1244,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();
@@ -1308,11 +1317,11 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
                 jsx(MenuItem, { disabled: !columnFilterValue ||
                         (Array.isArray(columnFilterValue) &&
                             !columnFilterValue.filter((value) => value).length), onClick: handleClearFilter, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListOffIcon, {}) }), localization.clearFilter] }) }, 3),
-                jsxs(MenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
+                columnFilterDisplayMode === 'subheader' && (jsxs(MenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
                         ? handleOpenFilterModeMenu
-                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListIcon, {}) }), (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsx(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsx(ArrowRightIcon, {}) }))] }, 4),
+                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListIcon, {}) }), (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsx(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsx(ArrowRightIcon, {}) }))] }, 4)),
                 showFilterModeSubMenu && (jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
-            ]
+            ].filter(Boolean)
             : []),
         ...(enableGrouping && column.getCanGroup()
             ? [
@@ -1406,18 +1415,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)
@@ -1432,55 +1452,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 = 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] = useState(null);
     const [filterValue, setFilterValue] = 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 = useCallback(debounce((event) => {
-        const value = textFieldProps.type === 'date'
-            ? event.target.valueAsDate
-            : textFieldProps.type === 'number'
-                ? event.target.valueAsNumber
-                : event.target.value;
+    const handleChangeDebounced = useCallback(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) {
@@ -1528,26 +1541,76 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         isMounted.current = true;
     }, [column.getFilterValue()]);
     if (columnDef.Filter) {
-        return (jsx(Fragment, { children: (_f = columnDef.Filter) === null || _f === void 0 ? void 0 : _f.call(columnDef, { column, header, rangeFilterIndex, table }) }));
+        return (jsx(Fragment, { children: (_g = columnDef.Filter) === null || _g === void 0 ? void 0 : _g.call(columnDef, { column, header, rangeFilterIndex, table }) }));
     }
-    return (jsxs(Fragment, { children: [jsxs(TextField, Object.assign({ FormHelperTextProps: {
-                    sx: {
-                        fontSize: '0.75rem',
-                        lineHeight: '0.8rem',
-                        whiteSpace: 'nowrap',
-                    },
-                }, InputProps: {
-                    endAdornment: !filterChipLabel && (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { arrow: true, placement: "right", title: (_g = localization.clearFilter) !== null && _g !== void 0 ? _g : '', children: jsx("span", { children: jsx(IconButton, { "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: jsx(CloseIcon, {}) }) }) }) })),
-                    startAdornment: showChangeModeButton ? (jsxs(InputAdornment, { position: "start", children: [jsx(Tooltip, { arrow: true, title: localization.changeFilterMode, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsx(Chip, { label: filterChipLabel, onDelete: handleClearEmptyFilterChip }))] })) : null,
-                }, SelectProps: {
+    const dropdownOptions = 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 ? (jsx(InputAdornment, { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsx(Tooltip, { arrow: true, placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '', children: jsx("span", { children: jsx(IconButton, { "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: jsx(CloseIcon, {}) }) }) }) })) : null;
+    const startAdornment = showChangeModeButton ? (jsxs(InputAdornment, { position: "start", children: [jsx(Tooltip, { arrow: true, title: localization.changeFilterMode, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsx(Chip, { 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 ? (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 (jsxs(Fragment, { children: [isDateFilter ? (jsx(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 ? (jsx(Autocomplete, Object.assign({ getOptionLabel: (option) => option, onChange: (_e, newValue) => handleChange(newValue), options: dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : [] }, 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: {
                     displayEmpty: true,
                     multiple: isMultiSelectFilter,
                     renderValue: isMultiSelectFilter
                         ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsx(Box, { 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 (jsx(Chip, { label: selectedValue instanceof Object
@@ -1555,52 +1618,33 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                                         : selectedValue }, value));
                             }) }))
                         : undefined,
-                }, fullWidth: true, helperText: showChangeModeButton ? (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) && (jsx(MenuItem, { disabled: true, divider: true, hidden: true, value: "", children: jsx(Box, { 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 (jsxs(MenuItem, { sx: {
-                                alignItems: 'center',
-                                display: 'flex',
-                                gap: '0.5rem',
-                                m: 0,
-                            }, value: value, children: [isMultiSelectFilter && (jsx(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text, ' ', !columnDef.filterSelectOptions &&
-                                    `(${facetedUniqueValues.get(value)})`] }, value));
-                    })] })), 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) && [
+                    jsx(MenuItem, { disabled: true, divider: true, hidden: true, value: "", children: jsx(Box, { 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 (jsxs(MenuItem, { sx: {
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    gap: '0.5rem',
+                                    m: 0,
+                                }, value: value, children: [isMultiSelectFilter && (jsx(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text, ' ', !columnDef.filterSelectOptions &&
+                                        `(${facetedUniqueValues.get(value)})`] }, `${index}-${value}`));
+                        }),
+                    ],
+                ] }))), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, setFilterValue: setFilterValue, table: table })] }));
 };
 
 const MRT_FilterRangeFields = ({ header, table, }) => {
@@ -1679,16 +1723,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 (jsx(Collapse, { in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true, children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsx(MRT_FilterRangeSlider, { header: header, table: table })) : columnDef.filterVariant === 'range' ||
+    return (jsx(Collapse, { in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true, children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (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) ? (jsx(MRT_FilterRangeFields, { header: header, table: table })) : (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;
@@ -1696,26 +1741,26 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
     const [anchorEl, setAnchorEl] = 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 (jsxs(Fragment, { children: [jsx(Grow, { 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: jsx(Box, { component: "span", sx: { flex: '0 0' }, children: jsx(Tooltip, { arrow: true, placement: "top", title: filterTooltip, children: jsx(IconButton, { 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: jsx(Box, { component: "span", sx: { flex: '0 0' }, children: jsx(Tooltip, { arrow: true, placement: "top", title: filterTooltip, children: jsx(IconButton, { disableRipple: true, onClick: (event) => {
                                 if (columnFilterDisplayMode === 'popover') {
                                     setAnchorEl(event.currentTarget);
                                 }
@@ -2192,41 +2237,40 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
         }, unmountOnExit: true, children: jsx(LinearProgress, 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 (jsx(TablePagination, 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 (jsxs(Box, { 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 && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, { 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) => (jsx(MenuItem, { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
+                        first: FirstPageIcon,
+                        last: LastPageIcon,
+                        next: ChevronRightIcon,
+                        previous: ChevronLefIcon,
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, paginationProps))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { mb: "0", mx: "8px", 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, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) })), jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLefIcon, {}) }), jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }), showLastButton && (jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }))] })] })) : null] }));
 };
 
 const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
@@ -2874,8 +2918,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 = useReducer(() => ({}), {})[1];
     const isMounted = useRef(false);
     const initialBodyHeight = useRef();
     const previousTop = useRef();
@@ -2931,6 +2976,13 @@ const useMRT_Effects = (table) => {
             table.setSorting(() => appliedSort.current || []);
         }
     }, [globalFilter]);
+    useEffect(() => {
+        if (enableRowPinning && getIsSomeRowsPinned()) {
+            setTimeout(() => {
+                rerender();
+            }, 150);
+        }
+    }, [density]);
 };
 
 const useMRT_TableInstance = (tableOptions) => {
@@ -3199,6 +3251,8 @@ const MRT_Default_Icons = {
     ArrowDownwardIcon,
     ArrowRightIcon,
     CancelIcon,
+    ChevronLefIcon,
+    ChevronRightIcon,
     ClearAllIcon,
     CloseIcon,
     DensityLargeIcon,
@@ -3211,9 +3265,11 @@ const MRT_Default_Icons = {
     FilterAltIcon,
     FilterListIcon,
     FilterListOffIcon,
+    FirstPageIcon,
     FullscreenExitIcon,
     FullscreenIcon,
     KeyboardDoubleArrowDownIcon,
+    LastPageIcon,
     MoreHorizIcon,
     MoreVertIcon,
     PushPinIcon,