material-react-table 1.9.1 → 1.9.3

package/dist/cjs/types/MaterialReactTable.d.ts

@@ -179,7 +179,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Prettify
     } | null>>;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
-    setShowFilters: Dispatch<SetStateAction<boolean>>;
+    setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
     setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
     setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
 }>;
@@ -617,7 +617,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Pr
     }) => TableRowProps);
     muiTablePaginationProps?: Partial<Omit<TablePaginationProps, 'rowsPerPage'>> | ((props: {
         table: MRT_TableInstance<TData>;
-    }) => Partial<TablePaginationProps>);
+    }) => Partial<Omit<TablePaginationProps, 'rowsPerPage'>>);
     muiTablePaperProps?: PaperProps | ((props: {
         table: MRT_TableInstance<TData>;
     }) => PaperProps);
@@ -656,7 +656,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Pr
     onHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
     onShowAlertBannerChange?: OnChangeFn<boolean>;
-    onShowFiltersChange?: OnChangeFn<boolean>;
+    onShowColumnFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
     onShowToolbarDropZoneChange?: OnChangeFn<boolean>;
     positionActionsColumn?: 'first' | 'last';

package/dist/cjs/types/sortingFns.d.ts

@@ -17,11 +17,14 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
     index: number;
     original: TData;
     depth: number;
+    parentId?: string | undefined;
     _uniqueValuesCache: Record<string, unknown>;
     getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
     getLeafRows: () => Row<TData>[];
     originalSubRows?: TData[] | undefined;
     _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+    getParentRow: () => Row<TData> | undefined;
+    getParentRows: () => Row<TData>[];
     _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
     getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
     getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
@@ -52,7 +55,48 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
         getIsPlaceholder: () => boolean;
         getIsAggregated: () => boolean;
         column: import("./MaterialReactTable").MRT_Column<TData>;
-        row: any;
+        row: {
+            getValue: <TValue>(columnId: string) => TValue;
+            renderValue: <TValue_1>(columnId: string) => TValue_1;
+            id: string;
+            columnFilters: Record<string, boolean>;
+            index: number;
+            original: TData;
+            depth: number;
+            parentId?: string | undefined;
+            _uniqueValuesCache: Record<string, unknown>;
+            getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
+            getLeafRows: () => Row<TData>[];
+            originalSubRows?: TData[] | undefined;
+            _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+            getParentRow: () => Row<TData> | undefined;
+            getParentRows: () => Row<TData>[];
+            _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getRightVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            columnFiltersMeta: Record<string, import("@tanstack/react-table").FilterMeta>;
+            groupingColumnId?: string | undefined;
+            groupingValue?: unknown;
+            getIsGrouped: () => boolean;
+            _groupingValuesCache: Record<string, any>;
+            getIsSelected: () => boolean;
+            getIsSomeSelected: () => boolean;
+            getIsAllSubRowsSelected: () => boolean;
+            getCanSelect: () => boolean;
+            getCanMultiSelect: () => boolean;
+            getCanSelectSubRows: () => boolean;
+            toggleSelected: (value?: boolean | undefined) => void;
+            getToggleSelectedHandler: () => (event: unknown) => void;
+            toggleExpanded: (expanded?: boolean | undefined) => void;
+            getIsExpanded: () => boolean;
+            getCanExpand: () => boolean;
+            getToggleExpandedHandler: () => () => void;
+            getAllCells: any;
+            getVisibleCells: () => any[];
+            subRows?: any[] | undefined;
+            _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
+        };
     }[];
     getVisibleCells: () => {
         getValue: import("@tanstack/react-table").Getter<unknown>;
@@ -63,9 +107,111 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
         getIsPlaceholder: () => boolean;
         getIsAggregated: () => boolean;
         column: import("./MaterialReactTable").MRT_Column<TData>;
-        row: any;
+        row: {
+            getValue: <TValue>(columnId: string) => TValue;
+            renderValue: <TValue_1>(columnId: string) => TValue_1;
+            id: string;
+            columnFilters: Record<string, boolean>;
+            index: number;
+            original: TData;
+            depth: number;
+            parentId?: string | undefined;
+            _uniqueValuesCache: Record<string, unknown>;
+            getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
+            getLeafRows: () => Row<TData>[];
+            originalSubRows?: TData[] | undefined;
+            _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+            getParentRow: () => Row<TData> | undefined;
+            getParentRows: () => Row<TData>[];
+            _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getRightVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            columnFiltersMeta: Record<string, import("@tanstack/react-table").FilterMeta>;
+            groupingColumnId?: string | undefined;
+            groupingValue?: unknown;
+            getIsGrouped: () => boolean;
+            _groupingValuesCache: Record<string, any>;
+            getIsSelected: () => boolean;
+            getIsSomeSelected: () => boolean;
+            getIsAllSubRowsSelected: () => boolean;
+            getCanSelect: () => boolean;
+            getCanMultiSelect: () => boolean;
+            getCanSelectSubRows: () => boolean;
+            toggleSelected: (value?: boolean | undefined) => void;
+            getToggleSelectedHandler: () => (event: unknown) => void;
+            toggleExpanded: (expanded?: boolean | undefined) => void;
+            getIsExpanded: () => boolean;
+            getCanExpand: () => boolean;
+            getToggleExpandedHandler: () => () => void;
+            getAllCells: () => any[];
+            getVisibleCells: any;
+            subRows?: any[] | undefined;
+            _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
+        };
     }[];
-    subRows?: any[] | undefined;
+    subRows?: {
+        getValue: <TValue>(columnId: string) => TValue;
+        renderValue: <TValue_1>(columnId: string) => TValue_1;
+        id: string;
+        columnFilters: Record<string, boolean>;
+        index: number;
+        original: TData;
+        depth: number;
+        parentId?: string | undefined;
+        _uniqueValuesCache: Record<string, unknown>;
+        getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
+        getLeafRows: () => Row<TData>[];
+        originalSubRows?: TData[] | undefined;
+        _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+        getParentRow: () => Row<TData> | undefined;
+        getParentRows: () => Row<TData>[];
+        _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        getRightVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        columnFiltersMeta: Record<string, import("@tanstack/react-table").FilterMeta>;
+        groupingColumnId?: string | undefined;
+        groupingValue?: unknown;
+        getIsGrouped: () => boolean;
+        _groupingValuesCache: Record<string, any>;
+        getIsSelected: () => boolean;
+        getIsSomeSelected: () => boolean;
+        getIsAllSubRowsSelected: () => boolean;
+        getCanSelect: () => boolean;
+        getCanMultiSelect: () => boolean;
+        getCanSelectSubRows: () => boolean;
+        toggleSelected: (value?: boolean | undefined) => void;
+        getToggleSelectedHandler: () => (event: unknown) => void;
+        toggleExpanded: (expanded?: boolean | undefined) => void;
+        getIsExpanded: () => boolean;
+        getCanExpand: () => boolean;
+        getToggleExpandedHandler: () => () => void;
+        getAllCells: () => {
+            getValue: import("@tanstack/react-table").Getter<unknown>;
+            renderValue: import("@tanstack/react-table").Getter<unknown>;
+            id: string;
+            getContext: () => import("@tanstack/react-table").CellContext<TData, unknown>;
+            getIsGrouped: () => boolean;
+            getIsPlaceholder: () => boolean;
+            getIsAggregated: () => boolean;
+            column: import("./MaterialReactTable").MRT_Column<TData>;
+            row: any;
+        }[];
+        getVisibleCells: () => {
+            getValue: import("@tanstack/react-table").Getter<unknown>;
+            renderValue: import("@tanstack/react-table").Getter<unknown>;
+            id: string;
+            getContext: () => import("@tanstack/react-table").CellContext<TData, unknown>;
+            getIsGrouped: () => boolean;
+            getIsPlaceholder: () => boolean;
+            getIsAggregated: () => boolean;
+            column: import("./MaterialReactTable").MRT_Column<TData>;
+            row: any;
+        }[];
+        subRows?: any[] | undefined;
+        _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
+    }[] | undefined;
     _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
 }, rowB: {
     getValue: <TValue>(columnId: string) => TValue;
@@ -75,11 +221,14 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
     index: number;
     original: TData;
     depth: number;
+    parentId?: string | undefined;
     _uniqueValuesCache: Record<string, unknown>;
     getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
     getLeafRows: () => Row<TData>[];
     originalSubRows?: TData[] | undefined;
     _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+    getParentRow: () => Row<TData> | undefined;
+    getParentRows: () => Row<TData>[];
     _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
     getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
     getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
@@ -110,7 +259,48 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
         getIsPlaceholder: () => boolean;
         getIsAggregated: () => boolean;
         column: import("./MaterialReactTable").MRT_Column<TData>;
-        row: any;
+        row: {
+            getValue: <TValue>(columnId: string) => TValue;
+            renderValue: <TValue_1>(columnId: string) => TValue_1;
+            id: string;
+            columnFilters: Record<string, boolean>;
+            index: number;
+            original: TData;
+            depth: number;
+            parentId?: string | undefined;
+            _uniqueValuesCache: Record<string, unknown>;
+            getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
+            getLeafRows: () => Row<TData>[];
+            originalSubRows?: TData[] | undefined;
+            _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+            getParentRow: () => Row<TData> | undefined;
+            getParentRows: () => Row<TData>[];
+            _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getRightVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            columnFiltersMeta: Record<string, import("@tanstack/react-table").FilterMeta>;
+            groupingColumnId?: string | undefined;
+            groupingValue?: unknown;
+            getIsGrouped: () => boolean;
+            _groupingValuesCache: Record<string, any>;
+            getIsSelected: () => boolean;
+            getIsSomeSelected: () => boolean;
+            getIsAllSubRowsSelected: () => boolean;
+            getCanSelect: () => boolean;
+            getCanMultiSelect: () => boolean;
+            getCanSelectSubRows: () => boolean;
+            toggleSelected: (value?: boolean | undefined) => void;
+            getToggleSelectedHandler: () => (event: unknown) => void;
+            toggleExpanded: (expanded?: boolean | undefined) => void;
+            getIsExpanded: () => boolean;
+            getCanExpand: () => boolean;
+            getToggleExpandedHandler: () => () => void;
+            getAllCells: any;
+            getVisibleCells: () => any[];
+            subRows?: any[] | undefined;
+            _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
+        };
     }[];
     getVisibleCells: () => {
         getValue: import("@tanstack/react-table").Getter<unknown>;
@@ -121,8 +311,110 @@ export declare const rankGlobalFuzzy: <TData extends Record<string, any> = {}>(r
         getIsPlaceholder: () => boolean;
         getIsAggregated: () => boolean;
         column: import("./MaterialReactTable").MRT_Column<TData>;
-        row: any;
+        row: {
+            getValue: <TValue>(columnId: string) => TValue;
+            renderValue: <TValue_1>(columnId: string) => TValue_1;
+            id: string;
+            columnFilters: Record<string, boolean>;
+            index: number;
+            original: TData;
+            depth: number;
+            parentId?: string | undefined;
+            _uniqueValuesCache: Record<string, unknown>;
+            getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
+            getLeafRows: () => Row<TData>[];
+            originalSubRows?: TData[] | undefined;
+            _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+            getParentRow: () => Row<TData> | undefined;
+            getParentRows: () => Row<TData>[];
+            _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            getRightVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+            columnFiltersMeta: Record<string, import("@tanstack/react-table").FilterMeta>;
+            groupingColumnId?: string | undefined;
+            groupingValue?: unknown;
+            getIsGrouped: () => boolean;
+            _groupingValuesCache: Record<string, any>;
+            getIsSelected: () => boolean;
+            getIsSomeSelected: () => boolean;
+            getIsAllSubRowsSelected: () => boolean;
+            getCanSelect: () => boolean;
+            getCanMultiSelect: () => boolean;
+            getCanSelectSubRows: () => boolean;
+            toggleSelected: (value?: boolean | undefined) => void;
+            getToggleSelectedHandler: () => (event: unknown) => void;
+            toggleExpanded: (expanded?: boolean | undefined) => void;
+            getIsExpanded: () => boolean;
+            getCanExpand: () => boolean;
+            getToggleExpandedHandler: () => () => void;
+            getAllCells: () => any[];
+            getVisibleCells: any;
+            subRows?: any[] | undefined;
+            _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
+        };
     }[];
-    subRows?: any[] | undefined;
+    subRows?: {
+        getValue: <TValue>(columnId: string) => TValue;
+        renderValue: <TValue_1>(columnId: string) => TValue_1;
+        id: string;
+        columnFilters: Record<string, boolean>;
+        index: number;
+        original: TData;
+        depth: number;
+        parentId?: string | undefined;
+        _uniqueValuesCache: Record<string, unknown>;
+        getUniqueValues: <TValue_2>(columnId: string) => TValue_2[];
+        getLeafRows: () => Row<TData>[];
+        originalSubRows?: TData[] | undefined;
+        _getAllCellsByColumnId: () => Record<string, import("@tanstack/react-table").Cell<TData, unknown>>;
+        getParentRow: () => Row<TData> | undefined;
+        getParentRows: () => Row<TData>[];
+        _getAllVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        getLeftVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        getCenterVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        getRightVisibleCells: () => import("@tanstack/react-table").Cell<TData, unknown>[];
+        columnFiltersMeta: Record<string, import("@tanstack/react-table").FilterMeta>;
+        groupingColumnId?: string | undefined;
+        groupingValue?: unknown;
+        getIsGrouped: () => boolean;
+        _groupingValuesCache: Record<string, any>;
+        getIsSelected: () => boolean;
+        getIsSomeSelected: () => boolean;
+        getIsAllSubRowsSelected: () => boolean;
+        getCanSelect: () => boolean;
+        getCanMultiSelect: () => boolean;
+        getCanSelectSubRows: () => boolean;
+        toggleSelected: (value?: boolean | undefined) => void;
+        getToggleSelectedHandler: () => (event: unknown) => void;
+        toggleExpanded: (expanded?: boolean | undefined) => void;
+        getIsExpanded: () => boolean;
+        getCanExpand: () => boolean;
+        getToggleExpandedHandler: () => () => void;
+        getAllCells: () => {
+            getValue: import("@tanstack/react-table").Getter<unknown>;
+            renderValue: import("@tanstack/react-table").Getter<unknown>;
+            id: string;
+            getContext: () => import("@tanstack/react-table").CellContext<TData, unknown>;
+            getIsGrouped: () => boolean;
+            getIsPlaceholder: () => boolean;
+            getIsAggregated: () => boolean;
+            column: import("./MaterialReactTable").MRT_Column<TData>;
+            row: any;
+        }[];
+        getVisibleCells: () => {
+            getValue: import("@tanstack/react-table").Getter<unknown>;
+            renderValue: import("@tanstack/react-table").Getter<unknown>;
+            id: string;
+            getContext: () => import("@tanstack/react-table").CellContext<TData, unknown>;
+            getIsGrouped: () => boolean;
+            getIsPlaceholder: () => boolean;
+            getIsAggregated: () => boolean;
+            column: import("./MaterialReactTable").MRT_Column<TData>;
+            row: any;
+        }[];
+        subRows?: any[] | undefined;
+        _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
+    }[] | undefined;
     _valuesCache: Record<(string & Record<never, never>) | (string & import("@tanstack/react-table").DeepKeys<TData>), any>;
 }) => number;

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

@@ -834,7 +834,7 @@ const commonListItemStyles = {
 };
 const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnSizingInfo, setShowFilters, } = table;
+    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnSizingInfo, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density } = getState();
@@ -875,7 +875,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         setAnchorEl(null);
     };
     const handleFilterByColumn = () => {
-        setShowFilters(true);
+        setShowColumnFilters(true);
         queueMicrotask(() => { var _a; return (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus(); });
         setAnchorEl(null);
     };
@@ -1131,6 +1131,7 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
     const textFieldProps = muiSearchTextFieldProps instanceof Function
         ? muiSearchTextFieldProps({ table })
         : muiSearchTextFieldProps;
+    const isMounted = useRef(false);
     const [anchorEl, setAnchorEl] = useState(null);
     const [searchValue, setSearchValue] = useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
     const handleChangeDebounced = useCallback(debounce((event) => {
@@ -1149,9 +1150,15 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
         setGlobalFilter(undefined);
     };
     useEffect(() => {
-        if (globalFilter === undefined) {
-            handleClear();
+        if (isMounted.current) {
+            if (globalFilter === undefined) {
+                handleClear();
+            }
+            else {
+                setSearchValue(globalFilter);
+            }
         }
+        isMounted.current = true;
     }, [globalFilter]);
     return (React.createElement(Collapse, { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true },
         React.createElement(TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
@@ -1205,7 +1212,7 @@ const MRT_TablePagination = ({ table, position = 'bottom', }) => {
                 ? localization.goToLastPage
                 : type === 'next'
                     ? localization.goToNextPage
-                    : localization.goToPreviousPage, labelDisplayedRows: ({ from, to, count }) => `${from}-${to} ${localization.of} ${count}`, labelRowsPerPage: localization.rowsPerPage, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: pageIndex, rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { SelectProps: Object.assign({ sx: { m: '0 1rem 0 1ch' }, MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } } }, tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.SelectProps), sx: (theme) => (Object.assign({ '& .MuiTablePagination-toolbar': {
+                    : localization.goToPreviousPage, labelDisplayedRows: ({ from, to, count }) => `${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({ sx: { m: '0 1rem 0 1ch' }, MenuProps: { MenuListProps: { disablePadding: true }, sx: { m: 0 } } }, tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.SelectProps), sx: (theme) => (Object.assign({ '& .MuiTablePagination-toolbar': {
                 display: 'flex',
                 alignItems: 'center',
             }, '& .MuiTablePagination-selectLabel': {
@@ -1310,10 +1317,10 @@ const MRT_ToggleDensePaddingButton = (_a) => {
 const MRT_ToggleFiltersButton = (_a) => {
     var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
-    const { getState, options: { icons: { FilterListIcon, FilterListOffIcon }, localization, }, setShowFilters, } = table;
+    const { getState, options: { icons: { FilterListIcon, FilterListOffIcon }, localization, }, setShowColumnFilters, } = table;
     const { showColumnFilters } = getState();
     const handleToggleShowFilters = () => {
-        setShowFilters(!showColumnFilters);
+        setShowColumnFilters(!showColumnFilters);
     };
     return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters },
         React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined }), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null))));
@@ -1777,7 +1784,7 @@ const MRT_TableHeadCellFilterContainer = ({ header, table }) => {
 
 const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
     var _a, _b, _c;
-    const { options: { icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowFilters, } = table;
+    const { options: { icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const isRangeFilter = columnDef.filterVariant === 'range' ||
@@ -1799,7 +1806,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         React.createElement(Box, { component: "span", sx: { flex: '0 0' } },
             React.createElement(Tooltip, { arrow: true, placement: "top", title: filterTooltip },
                 React.createElement(IconButton, { disableRipple: true, onClick: (event) => {
-                        setShowFilters(true);
+                        setShowColumnFilters(true);
                         queueMicrotask(() => {
                             var _a, _b;
                             (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -2215,11 +2222,11 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table }) => {
 
 const allowedTypes = ['string', 'number'];
 const MRT_TableBodyCellValue = ({ cell, table }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const { getState, options: { enableFilterMatchHighlighting }, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
-    const { globalFilter } = getState();
+    const { globalFilter, globalFilterFn } = getState();
     const filterValue = column.getFilterValue();
     let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
         ? columnDef.AggregatedCell({
@@ -2249,13 +2256,16 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
         ((filterValue &&
             allowedTypes.includes(typeof filterValue) &&
             columnDef.filterVariant === 'text') ||
-            (globalFilter && allowedTypes.includes(typeof globalFilter)))) {
+            (globalFilter &&
+                allowedTypes.includes(typeof globalFilter) &&
+                column.getCanGlobalFilter()))) {
         const chunks = highlightWords === null || highlightWords === void 0 ? void 0 : highlightWords({
             text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
-            query: ((_b = (_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : globalFilter) !== null && _b !== void 0 ? _b : '').toString(),
+            query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
+            matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
         });
-        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_c = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _c === void 0 ? void 0 : _c.match)) {
-            renderedCellValue = (React.createElement("span", { "aria-label": renderedCellValue, role: "note" }, (_d = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (React.createElement(Box, { "aria-hidden": "true", component: "span", key: key, sx: match
+        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
+            renderedCellValue = (React.createElement("span", { "aria-label": renderedCellValue, role: "note" }, (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (React.createElement(Box, { "aria-hidden": "true", component: "span", key: key, sx: match
                     ? {
                         backgroundColor: (theme) => theme.palette.mode === 'dark'
                             ? darken(theme.palette.warning.dark, 0.25)
@@ -2264,7 +2274,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
                         color: (theme) => theme.palette.mode === 'dark' ? 'white' : 'black',
                         padding: '2px 1px',
                     }
-                    : undefined }, text)))) !== null && _d !== void 0 ? _d : renderedCellValue));
+                    : undefined }, text)))) !== null && _c !== void 0 ? _c : renderedCellValue));
         }
     }
     if (columnDef.Cell && !isGroupedValue) {
@@ -2890,7 +2900,7 @@ const MRT_TableRoot = (props) => {
     const [hoveredRow, setHoveredRow] = useState((_k = initialState.hoveredRow) !== null && _k !== void 0 ? _k : null);
     const [isFullScreen, setIsFullScreen] = useState((_l = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _l !== void 0 ? _l : false);
     const [showAlertBanner, setShowAlertBanner] = useState((_o = (_m = props.initialState) === null || _m === void 0 ? void 0 : _m.showAlertBanner) !== null && _o !== void 0 ? _o : false);
-    const [showColumnFilters, setShowFilters] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
+    const [showColumnFilters, setShowColumnFilters] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
     const [showGlobalFilter, setShowGlobalFilter] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
     const [showToolbarDropZone, setShowToolbarDropZone] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _r !== void 0 ? _r : false);
     const displayColumns = useMemo(() => {
@@ -2987,7 +2997,7 @@ const MRT_TableRoot = (props) => {
             tableHeadCellRefs,
             tablePaperRef,
             topToolbarRef,
-        }, setColumnFilterFns: (_0 = props.onColumnFilterFnsChange) !== null && _0 !== void 0 ? _0 : setColumnFilterFns, setDensity: (_1 = props.onDensityChange) !== null && _1 !== void 0 ? _1 : setDensity, setDraggingColumn: (_2 = props.onDraggingColumnChange) !== null && _2 !== void 0 ? _2 : setDraggingColumn, setDraggingRow: (_3 = props.onDraggingRowChange) !== null && _3 !== void 0 ? _3 : setDraggingRow, setEditingCell: (_4 = props.onEditingCellChange) !== null && _4 !== void 0 ? _4 : setEditingCell, setEditingRow: (_5 = props.onEditingRowChange) !== null && _5 !== void 0 ? _5 : setEditingRow, setGlobalFilterFn: (_6 = props.onGlobalFilterFnChange) !== null && _6 !== void 0 ? _6 : setGlobalFilterFn, setHoveredColumn: (_7 = props.onHoveredColumnChange) !== null && _7 !== void 0 ? _7 : setHoveredColumn, setHoveredRow: (_8 = props.onHoveredRowChange) !== null && _8 !== void 0 ? _8 : setHoveredRow, setIsFullScreen: (_9 = props.onIsFullScreenChange) !== null && _9 !== void 0 ? _9 : setIsFullScreen, setShowAlertBanner: (_10 = props.onShowAlertBannerChange) !== null && _10 !== void 0 ? _10 : setShowAlertBanner, setShowFilters: (_11 = props.onShowFiltersChange) !== null && _11 !== void 0 ? _11 : setShowFilters, setShowGlobalFilter: (_12 = props.onShowGlobalFilterChange) !== null && _12 !== void 0 ? _12 : setShowGlobalFilter, setShowToolbarDropZone: (_13 = props.onShowToolbarDropZoneChange) !== null && _13 !== void 0 ? _13 : setShowToolbarDropZone });
+        }, setColumnFilterFns: (_0 = props.onColumnFilterFnsChange) !== null && _0 !== void 0 ? _0 : setColumnFilterFns, setDensity: (_1 = props.onDensityChange) !== null && _1 !== void 0 ? _1 : setDensity, setDraggingColumn: (_2 = props.onDraggingColumnChange) !== null && _2 !== void 0 ? _2 : setDraggingColumn, setDraggingRow: (_3 = props.onDraggingRowChange) !== null && _3 !== void 0 ? _3 : setDraggingRow, setEditingCell: (_4 = props.onEditingCellChange) !== null && _4 !== void 0 ? _4 : setEditingCell, setEditingRow: (_5 = props.onEditingRowChange) !== null && _5 !== void 0 ? _5 : setEditingRow, setGlobalFilterFn: (_6 = props.onGlobalFilterFnChange) !== null && _6 !== void 0 ? _6 : setGlobalFilterFn, setHoveredColumn: (_7 = props.onHoveredColumnChange) !== null && _7 !== void 0 ? _7 : setHoveredColumn, setHoveredRow: (_8 = props.onHoveredRowChange) !== null && _8 !== void 0 ? _8 : setHoveredRow, setIsFullScreen: (_9 = props.onIsFullScreenChange) !== null && _9 !== void 0 ? _9 : setIsFullScreen, setShowAlertBanner: (_10 = props.onShowAlertBannerChange) !== null && _10 !== void 0 ? _10 : setShowAlertBanner, setShowColumnFilters: (_11 = props.onShowColumnFiltersChange) !== null && _11 !== void 0 ? _11 : setShowColumnFilters, setShowGlobalFilter: (_12 = props.onShowGlobalFilterChange) !== null && _12 !== void 0 ? _12 : setShowGlobalFilter, setShowToolbarDropZone: (_13 = props.onShowToolbarDropZoneChange) !== null && _13 !== void 0 ? _13 : setShowToolbarDropZone });
     if (props.tableFeatures) {
         props.tableFeatures.forEach((feature) => {
             Object.assign(table, feature(table));
@@ -3012,6 +3022,16 @@ const MRT_TableRoot = (props) => {
             }
         }
     }, [table.getState().isFullScreen]);
+    //if page index is out of bounds, set it to the last page
+    useEffect(() => {
+        var _a;
+        const { pageIndex, pageSize } = table.getState().pagination;
+        const totalRowCount = (_a = props.rowCount) !== null && _a !== void 0 ? _a : table.getPrePaginationRowModel().rows.length;
+        const firstVisibleRowIndex = pageIndex * pageSize;
+        if (firstVisibleRowIndex > totalRowCount) {
+            table.setPageIndex(Math.floor(totalRowCount / pageSize));
+        }
+    }, [props.rowCount, table.getPrePaginationRowModel().rows.length]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: !props.enableRowVirtualization ? Grow : undefined, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
             React.createElement(MRT_TablePaper, { table: table })),