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

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

@@ -1,8 +1,56 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo, useState, memo, useEffect, useRef, useCallback, Fragment as Fragment$1, useLayoutEffect } from 'react';
-import { aggregationFns, filterFns, sortingFns, flexRender as flexRender$1, createRow as createRow$1, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
-import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
-import { alpha, lighten, darken, useTheme } from '@mui/material/styles';
+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 TableContainer from '@mui/material/TableContainer';
+import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import Typography from '@mui/material/Typography';
+import TableRow from '@mui/material/TableRow';
+import { darken, lighten, alpha, useTheme } from '@mui/material/styles';
+import Skeleton from '@mui/material/Skeleton';
+import TableCell from '@mui/material/TableCell';
+import Box from '@mui/material/Box';
+import highlightWords from 'highlight-words';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { flexRender as flexRender$1, createRow as createRow$1, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, aggregationFns, filterFns } from '@tanstack/react-table';
+import Button from '@mui/material/Button';
+import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
+import Collapse from '@mui/material/Collapse';
+import { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils';
+import TableFooter from '@mui/material/TableFooter';
+import TableHead from '@mui/material/TableHead';
+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 Chip from '@mui/material/Chip';
+import InputAdornment from '@mui/material/InputAdornment';
+import { debounce } from '@mui/material/utils';
+import FormHelperText from '@mui/material/FormHelperText';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import Grow from '@mui/material/Grow';
+import Popover from '@mui/material/Popover';
+import Divider from '@mui/material/Divider';
+import Badge from '@mui/material/Badge';
+import TableSortLabel from '@mui/material/TableSortLabel';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+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 Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Fade from '@mui/material/Fade';
+import Switch from '@mui/material/Switch';
+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';
@@ -18,8 +66,8 @@ 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 FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -31,196 +79,91 @@ import SearchOffIcon from '@mui/icons-material/SearchOff';
 import SortIcon from '@mui/icons-material/Sort';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
-import TableBody from '@mui/material/TableBody';
-import Typography from '@mui/material/Typography';
-import TableRow from '@mui/material/TableRow';
-import Skeleton from '@mui/material/Skeleton';
-import TableCell from '@mui/material/TableCell';
-import TextField from '@mui/material/TextField';
-import MenuItem from '@mui/material/MenuItem';
-import Button from '@mui/material/Button';
-import highlightWords from 'highlight-words';
-import Collapse from '@mui/material/Collapse';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import Menu from '@mui/material/Menu';
-import CircularProgress from '@mui/material/CircularProgress';
-import Checkbox from '@mui/material/Checkbox';
-import Radio from '@mui/material/Radio';
-import Paper from '@mui/material/Paper';
-import Toolbar from '@mui/material/Toolbar';
-import useMediaQuery from '@mui/material/useMediaQuery';
-import InputAdornment from '@mui/material/InputAdornment';
-import { debounce } from '@mui/material/utils';
-import LinearProgress from '@mui/material/LinearProgress';
-import TablePagination from '@mui/material/TablePagination';
-import Alert from '@mui/material/Alert';
-import AlertTitle from '@mui/material/AlertTitle';
-import Chip from '@mui/material/Chip';
-import Divider from '@mui/material/Divider';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-import Fade from '@mui/material/Fade';
-import TableContainer from '@mui/material/TableContainer';
-import Table from '@mui/material/Table';
-import TableHead from '@mui/material/TableHead';
-import Slider from '@mui/material/Slider';
-import Stack from '@mui/material/Stack';
-import FormHelperText from '@mui/material/FormHelperText';
-import Grow from '@mui/material/Grow';
-import Badge from '@mui/material/Badge';
-import TableSortLabel from '@mui/material/TableSortLabel';
-import TableFooter from '@mui/material/TableFooter';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-}
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+const allowedTypes = ['string', 'number'];
+const MRT_TableBodyCellValue = ({ cell, table, }) => {
+    var _a, _b, _c;
+    const { getState, options: { enableFilterMatchHighlighting }, } = table;
+    const { column, row } = cell;
+    const { columnDef } = column;
+    const { globalFilter, globalFilterFn } = getState();
+    const filterValue = column.getFilterValue();
+    let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
+        ? columnDef.AggregatedCell({
+            cell,
+            column,
+            row,
+            table,
+        })
+        : row.getIsGrouped() && !cell.getIsGrouped()
+            ? null
+            : cell.getIsGrouped() && columnDef.GroupedCell
+                ? columnDef.GroupedCell({
+                    cell,
+                    column,
+                    row,
+                    table,
+                })
+                : undefined;
+    const isGroupedValue = renderedCellValue !== undefined;
+    if (!isGroupedValue) {
+        renderedCellValue = cell.renderValue();
+    }
+    if (enableFilterMatchHighlighting &&
+        columnDef.enableFilterMatchHighlighting !== false &&
+        renderedCellValue &&
+        allowedTypes.includes(typeof renderedCellValue) &&
+        ((filterValue &&
+            allowedTypes.includes(typeof filterValue) &&
+            columnDef.filterVariant === 'text') ||
+            (globalFilter &&
+                allowedTypes.includes(typeof globalFilter) &&
+                column.getCanGlobalFilter()))) {
+        const chunks = highlightWords === null || highlightWords === void 0 ? void 0 : highlightWords({
+            matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
+            query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
+            text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
+        });
+        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 = (jsx("span", { "aria-label": renderedCellValue, role: "note", children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsx(Box, { "aria-hidden": "true", component: "span", sx: match
+                        ? {
+                            backgroundColor: (theme) => theme.palette.mode === 'dark'
+                                ? darken(theme.palette.warning.dark, 0.25)
+                                : lighten(theme.palette.warning.light, 0.5),
+                            borderRadius: '2px',
+                            color: (theme) => theme.palette.mode === 'dark' ? 'white' : 'black',
+                            padding: '2px 1px',
+                        }
+                        : undefined, children: text }, key)))) !== null && _c !== void 0 ? _c : renderedCellValue }));
+        }
+    }
+    if (columnDef.Cell && !isGroupedValue) {
+        renderedCellValue = columnDef.Cell({
+            cell,
+            column,
+            renderedCellValue,
+            row,
+            table,
+        });
+    }
+    return jsx(Fragment, { children: renderedCellValue });
 };
 
-const MRT_AggregationFns = Object.assign({}, aggregationFns);
-
-const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
-    const itemRank = rankItem(row.getValue(columnId), filterValue, {
-        threshold: rankings.MATCHES,
-    });
-    addMeta(itemRank);
-    return itemRank.passed;
-};
-fuzzy$1.autoRemove = (val) => !val;
-const contains = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .includes(filterValue.toString().toLowerCase().trim());
-contains.autoRemove = (val) => !val;
-const startsWith = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .startsWith(filterValue.toString().toLowerCase().trim());
-startsWith.autoRemove = (val) => !val;
-const endsWith = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .endsWith(filterValue.toString().toLowerCase().trim());
-endsWith.autoRemove = (val) => !val;
-const equals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() ===
-    filterValue.toString().toLowerCase().trim();
-equals.autoRemove = (val) => !val;
-const notEquals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() !==
-    filterValue.toString().toLowerCase().trim();
-notEquals.autoRemove = (val) => !val;
-const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
-    ? +row.getValue(id) > +filterValue
-    : row.getValue(id).toString().toLowerCase().trim() >
-        filterValue.toString().toLowerCase().trim();
-greaterThan.autoRemove = (val) => !val;
-const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
-greaterThanOrEqualTo.autoRemove = (val) => !val;
-const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
-    ? +row.getValue(id) < +filterValue
-    : row.getValue(id).toString().toLowerCase().trim() <
-        filterValue.toString().toLowerCase().trim();
-lessThan.autoRemove = (val) => !val;
-const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
-lessThanOrEqualTo.autoRemove = (val) => !val;
-const between = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
-    greaterThan(row, id, filterValues[0])) &&
-    ((!isNaN(+filterValues[0]) &&
-        !isNaN(+filterValues[1]) &&
-        +filterValues[0] > +filterValues[1]) ||
-        ['', undefined].includes(filterValues[1]) ||
-        lessThan(row, id, filterValues[1]));
-between.autoRemove = (val) => !val;
-const betweenInclusive = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
-    greaterThanOrEqualTo(row, id, filterValues[0])) &&
-    ((!isNaN(+filterValues[0]) &&
-        !isNaN(+filterValues[1]) &&
-        +filterValues[0] > +filterValues[1]) ||
-        ['', undefined].includes(filterValues[1]) ||
-        lessThanOrEqualTo(row, id, filterValues[1]));
-betweenInclusive.autoRemove = (val) => !val;
-const empty = (row, id, _filterValue) => !row.getValue(id).toString().trim();
-empty.autoRemove = (val) => !val;
-const notEmpty = (row, id, _filterValue) => !!row.getValue(id).toString().trim();
-notEmpty.autoRemove = (val) => !val;
-const MRT_FilterFns = Object.assign(Object.assign({}, filterFns), { between,
-    betweenInclusive,
-    contains,
-    empty,
-    endsWith,
-    equals,
-    fuzzy: fuzzy$1,
-    greaterThan,
-    greaterThanOrEqualTo,
-    lessThan,
-    lessThanOrEqualTo,
-    notEmpty,
-    notEquals,
-    startsWith });
-
-const fuzzy = (rowA, rowB, columnId) => {
-    let dir = 0;
-    if (rowA.columnFiltersMeta[columnId]) {
-        dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
-    }
-    // Provide a fallback for when the item ranks are equal
-    return dir === 0
-        ? sortingFns.alphanumeric(rowA, rowB, columnId)
-        : dir;
-};
-const MRT_SortingFns = Object.assign(Object.assign({}, sortingFns), { fuzzy });
-const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
-    Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
-
-const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
-const getAllLeafColumnDefs = (columns) => {
-    const allLeafColumnDefs = [];
-    const getLeafColumns = (cols) => {
-        cols.forEach((col) => {
-            if (col.columns) {
-                getLeafColumns(col.columns);
-            }
-            else {
-                allLeafColumnDefs.push(col);
-            }
-        });
-    };
-    getLeafColumns(columns);
-    return allLeafColumnDefs;
+const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
+const getAllLeafColumnDefs = (columns) => {
+    const allLeafColumnDefs = [];
+    const getLeafColumns = (cols) => {
+        cols.forEach((col) => {
+            if (col.columns) {
+                getLeafColumns(col.columns);
+            }
+            else {
+                allLeafColumnDefs.push(col);
+            }
+        });
+    };
+    getLeafColumns(columns);
+    return allLeafColumnDefs;
 };
 const prepareColumns = ({ aggregationFns, columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
     var _a, _b;
@@ -290,7 +233,7 @@ const getLeadingDisplayColumnIds = (props) => {
         props.positionActionsColumn === 'first' &&
             (props.enableRowActions ||
                 (props.enableEditing &&
-                    ['row', 'modal'].includes((_b = props.editDisplayMode) !== null && _b !== void 0 ? _b : ''))) &&
+                    ['modal', 'row'].includes((_b = props.editDisplayMode) !== null && _b !== void 0 ? _b : ''))) &&
             'mrt-row-actions',
         props.positionExpandColumn === 'first' &&
             showExpandColumn(props) &&
@@ -305,7 +248,7 @@ const getTrailingDisplayColumnIds = (props) => {
         props.positionActionsColumn === 'last' &&
             (props.enableRowActions ||
                 (props.enableEditing &&
-                    ['row', 'modal'].includes((_a = props.editDisplayMode) !== null && _a !== void 0 ? _a : ''))) &&
+                    ['modal', 'row'].includes((_a = props.editDisplayMode) !== null && _a !== void 0 ? _a : ''))) &&
             'mrt-row-actions',
         props.positionExpandColumn === 'last' &&
             showExpandColumn(props) &&
@@ -333,11 +276,17 @@ const getDefaultColumnFilterFn = (columnDef) => {
     return 'fuzzy';
 };
 const getIsFirstColumn = (column, table) => {
-    return table.getVisibleLeafColumns()[0].id === column.id;
+    const leftColumns = table.getLeftVisibleLeafColumns();
+    return leftColumns.length
+        ? leftColumns[0].id === column.id
+        : table.getVisibleLeafColumns()[0].id === column.id;
 };
 const getIsLastColumn = (column, table) => {
+    const rightColumns = table.getRightVisibleLeafColumns();
     const columns = table.getVisibleLeafColumns();
-    return columns[columns.length - 1].id === column.id;
+    return rightColumns.length
+        ? rightColumns[rightColumns.length - 1].id === column.id
+        : columns[columns.length - 1].id === column.id;
 };
 const getIsLastLeftPinnedColumn = (table, column) => {
     return (column.getIsPinned() === 'left' &&
@@ -353,9 +302,9 @@ const getTotalRight = (table, column) => {
         .reduce((acc, col) => acc + col.getSize(), 0);
 };
 const getCanRankRows = (table) => {
-    const { options, getState } = table;
-    const { manualExpanding, manualFiltering, manualGrouping, manualSorting, enableGlobalFilterRankedResults, } = options;
-    const { globalFilterFn, expanded } = getState();
+    const { getState, options } = table;
+    const { enableGlobalFilterRankedResults, manualExpanding, manualFiltering, manualGrouping, manualSorting, } = options;
+    const { expanded, globalFilterFn } = getState();
     return (!manualExpanding &&
         !manualFiltering &&
         !manualGrouping &&
@@ -405,8 +354,8 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
 };
 const MRT_DefaultColumn = {
     filterVariant: 'text',
-    minSize: 40,
     maxSize: 1000,
+    minSize: 40,
     size: 180,
 };
 const MRT_DefaultDisplayColumn = {
@@ -430,240 +379,71 @@ const createRow = (table, originalRow) => createRow$1(table, 'mrt-row-create', o
     [getColumnId(col)]: '',
 }))), -1, 0);
 
-const MRT_Localization_EN = {
-    actions: 'Actions',
-    and: 'and',
-    cancel: 'Cancel',
-    changeFilterMode: 'Change filter mode',
-    changeSearchMode: 'Change search mode',
-    clearFilter: 'Clear filter',
-    clearSearch: 'Clear search',
-    clearSort: 'Clear sort',
-    clickToCopy: 'Click to copy',
-    collapse: 'Collapse',
-    collapseAll: 'Collapse all',
-    columnActions: 'Column Actions',
-    copiedToClipboard: 'Copied to clipboard',
-    dropToGroupBy: 'Drop to group by {column}',
-    edit: 'Edit',
-    expand: 'Expand',
-    expandAll: 'Expand all',
-    filterArrIncludes: 'Includes',
-    filterArrIncludesAll: 'Includes all',
-    filterArrIncludesSome: 'Includes',
-    filterBetween: 'Between',
-    filterBetweenInclusive: 'Between Inclusive',
-    filterByColumn: 'Filter by {column}',
-    filterContains: 'Contains',
-    filterEmpty: 'Empty',
-    filterEndsWith: 'Ends With',
-    filterEquals: 'Equals',
-    filterEqualsString: 'Equals',
-    filterFuzzy: 'Fuzzy',
-    filterGreaterThan: 'Greater Than',
-    filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
-    filterInNumberRange: 'Between',
-    filterIncludesString: 'Contains',
-    filterIncludesStringSensitive: 'Contains',
-    filterLessThan: 'Less Than',
-    filterLessThanOrEqualTo: 'Less Than Or Equal To',
-    filterMode: 'Filter Mode: {filterType}',
-    filterNotEmpty: 'Not Empty',
-    filterNotEquals: 'Not Equals',
-    filterStartsWith: 'Starts With',
-    filterWeakEquals: 'Equals',
-    filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
-    goToFirstPage: 'Go to first page',
-    goToLastPage: 'Go to last page',
-    goToNextPage: 'Go to next page',
-    goToPreviousPage: 'Go to previous page',
-    grab: 'Grab',
-    groupByColumn: 'Group by {column}',
-    groupedBy: 'Grouped by ',
-    hideAll: 'Hide all',
-    hideColumn: 'Hide {column} column',
-    max: 'Max',
-    min: 'Min',
-    move: 'Move',
-    noRecordsToDisplay: 'No records to display',
-    noResultsFound: 'No results found',
-    of: 'of',
-    or: 'or',
-    pin: 'Pin',
-    pinToLeft: 'Pin to left',
-    pinToRight: 'Pin to right',
-    resetColumnSize: 'Reset column size',
-    resetOrder: 'Reset order',
-    rowActions: 'Row Actions',
-    rowNumber: '#',
-    rowNumbers: 'Row Numbers',
-    rowsPerPage: 'Rows per page',
-    save: 'Save',
-    search: 'Search',
-    selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
-    select: 'Select',
-    showAll: 'Show all',
-    showAllColumns: 'Show all columns',
-    showHideColumns: 'Show/Hide columns',
-    showHideFilters: 'Show/Hide filters',
-    showHideSearch: 'Show/Hide search',
-    sortByColumnAsc: 'Sort by {column} ascending',
-    sortByColumnDesc: 'Sort by {column} descending',
-    sortedByColumnAsc: 'Sorted by {column} ascending',
-    sortedByColumnDesc: 'Sorted by {column} descending',
-    thenBy: ', then by ',
-    toggleDensity: 'Toggle density',
-    toggleFullScreen: 'Toggle full screen',
-    toggleSelectAll: 'Toggle select all',
-    toggleSelectRow: 'Toggle select row',
-    toggleVisibility: 'Toggle visibility',
-    ungroupByColumn: 'Ungroup by {column}',
-    unpin: 'Unpin',
-    unpinAll: 'Unpin all',
+const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
+    var _a;
+    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
+    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move, children: jsx(IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
+            }, onDragEnd: onDragEnd, onDragStart: onDragStart, sx: (theme) => (Object.assign({ '&:active': {
+                    cursor: 'grabbing',
+                }, '&:hover': {
+                    backgroundColor: 'transparent',
+                    opacity: 1,
+                }, cursor: 'grab', m: '0 -0.1rem', opacity: 0.5, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsx(DragHandleIcon, {}) })) }));
 };
 
-const MRT_Default_Icons = {
-    ArrowDownwardIcon,
-    ArrowRightIcon,
-    CancelIcon,
-    ClearAllIcon,
-    CloseIcon,
-    DensityLargeIcon,
-    DensityMediumIcon,
-    DensitySmallIcon,
-    DragHandleIcon,
-    DynamicFeedIcon,
-    EditIcon,
-    ExpandMoreIcon,
-    FilterAltIcon,
-    FilterListIcon,
-    FilterListOffIcon,
-    FullscreenExitIcon,
-    FullscreenIcon,
-    KeyboardDoubleArrowDownIcon,
-    MoreHorizIcon,
-    MoreVertIcon,
-    PushPinIcon,
-    RestartAltIcon,
-    SaveIcon,
-    SearchIcon,
-    SearchOffIcon,
-    SortIcon,
-    ViewColumnIcon,
-    VisibilityOffIcon,
+const MRT_TableBodyRowGrabHandle = ({ row, rowRef, table, }) => {
+    const { options: { muiRowDragHandleProps }, } = table;
+    const iconButtonProps = parseFromValuesOrFunc(muiRowDragHandleProps, {
+        row,
+        table,
+    });
+    const handleDragStart = (event) => {
+        var _a;
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
+        event.dataTransfer.setDragImage(rowRef.current, 0, 0);
+        table.setDraggingRow(row);
+    };
+    const handleDragEnd = (event) => {
+        var _a;
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
+        table.setDraggingRow(null);
+        table.setHoveredRow(null);
+    };
+    return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
 };
 
-const useMRT_TableOptions = (_a) => {
-    var _b;
-    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
-    const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
-    const _localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
-    const _aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
-    const _filterFns = useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
-    const _sortingFns = useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
-    const _defaultColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), [defaultColumn]);
-    const _defaultDisplayColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [defaultDisplayColumn]);
-    if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
-        layoutMode = 'grid';
-    }
-    if (rest.enableRowVirtualization) {
-        enableStickyHeader = true;
-    }
-    if (enablePagination === false && manualPagination === undefined) {
-        manualPagination = true;
-    }
-    if (!((_b = rest.data) === null || _b === void 0 ? void 0 : _b.length)) {
-        manualFiltering = true;
-        manualGrouping = true;
-        manualPagination = true;
-        manualSorting = true;
-    }
-    return Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded,
-        columnFilterDisplayMode,
-        columnResizeMode,
-        createDisplayMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editDisplayMode,
-        enableBottomToolbar,
-        enableColumnActions,
-        enableColumnFilters,
-        enableColumnOrdering,
-        enableColumnPinning,
-        enableColumnResizing,
-        enableDensityToggle,
-        enableExpandAll,
-        enableExpanding,
-        enableFilterMatchHighlighting,
-        enableFilters,
-        enableFullScreenToggle,
-        enableGlobalFilter,
-        enableGlobalFilterRankedResults,
-        enableGrouping,
-        enableHiding,
-        enableMultiRowSelection,
-        enableMultiSort,
-        enablePagination,
-        enableRowPinning,
-        enableRowSelection,
-        enableSelectAll,
-        enableSorting,
-        enableStickyHeader,
-        enableTableFooter,
-        enableTableHead,
-        enableToolbarInternalActions,
-        enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode, localization: _localization, manualFiltering,
-        manualGrouping,
-        manualPagination,
-        manualSorting,
-        paginationDisplayMode,
-        positionActionsColumn,
-        positionExpandColumn,
-        positionGlobalFilter,
-        positionPagination,
-        positionToolbarAlertBanner,
-        positionToolbarDropZone,
-        rowNumberMode,
-        rowPinningDisplayMode,
-        selectAllMode, sortingFns: _sortingFns }, rest);
-};
-
-const MRT_RowPinButton = ({ row, table, pinningPosition, }) => {
-    const { options: { icons: { PushPinIcon, CloseIcon }, localization, rowPinningDisplayMode, }, } = table;
-    const isPinned = row.getIsPinned();
-    const [tooltipOpened, setTooltipOpened] = useState(false);
-    const handleTogglePin = (event) => {
-        setTooltipOpened(false);
+const MRT_CopyButton = ({ cell, children, table, }) => {
+    var _a;
+    const { options: { localization, muiCopyButtonProps }, } = table;
+    const { column, row } = cell;
+    const { columnDef } = column;
+    const [copied, setCopied] = useState(false);
+    const handleCopy = (event, text) => {
         event.stopPropagation();
-        row.pin(isPinned ? false : pinningPosition);
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 4000);
     };
-    return (jsx(Tooltip, { arrow: true, open: tooltipOpened, enterDelay: 1000, enterNextDelay: 1000, title: isPinned ? localization.unpin : localization.pin, children: jsx(IconButton, { "aria-label": localization.pin, onClick: handleTogglePin, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small", sx: {
-                height: '24px',
-                width: '24px',
-            }, children: isPinned ? (jsx(CloseIcon, {})) : (jsx(PushPinIcon, { fontSize: "small", style: {
-                    transform: `rotate(${rowPinningDisplayMode === 'sticky'
-                        ? 135
-                        : pinningPosition === 'top'
-                            ? 180
-                            : 0}deg)`,
-                } })) }) }));
-};
-
-const MRT_TableBodyRowPinButton = ({ row, table, }) => {
-    const { getState, options: { enableRowPinning, rowPinningDisplayMode }, } = table;
-    const { density } = getState();
-    const canPin = parseFromValuesOrFunc(enableRowPinning, row);
-    if (!canPin)
-        return null;
-    if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
-        return (jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: density === 'compact' ? 'row' : 'column',
-            }, children: [jsx(MRT_RowPinButton, { row: row, table: table, pinningPosition: "top" }), jsx(MRT_RowPinButton, { row: row, table: table, pinningPosition: "bottom" })] }));
-    }
-    return (jsx(MRT_RowPinButton, { row: row, table: table, pinningPosition: rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top' }));
+    const buttonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCopyButtonProps, {
+        cell,
+        column,
+        row,
+        table,
+    })), parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
+        cell,
+        column,
+        row,
+        table,
+    }));
+    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsx(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined, children: children })) }));
 };
 
 const MRT_EditCellTextField = ({ cell, table, }) => {
     var _a, _b, _c;
-    const { getState, options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps }, refs: { editInputRefs }, setEditingCell, setEditingRow, setCreatingRow, } = table;
+    const { getState, options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps }, refs: { editInputRefs }, setCreatingRow, setEditingCell, setEditingRow, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
     const { creatingRow, editingRow } = getState();
@@ -723,15 +503,15 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
                     textFieldProps.inputRef = inputRef;
                 }
             }
-        }, label: ['modal', 'custom'].includes((isCreating ? createDisplayMode : editDisplayMode))
+        }, label: ['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
             ? column.columnDef.header
-            : undefined, margin: "none", name: column.id, placeholder: !['modal', 'custom'].includes((isCreating ? createDisplayMode : editDisplayMode))
+            : undefined, margin: "none", name: column.id, placeholder: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
             ? columnDef.header
-            : undefined, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { onClick: (e) => {
+            : undefined, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
             var _a;
             e.stopPropagation();
             (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
-        }, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown, children: (_b = textFieldProps.children) !== null && _b !== void 0 ? _b : (_c = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _c === void 0 ? void 0 : _c.map((option) => {
+        }, onKeyDown: handleEnterKeyDown, children: (_b = textFieldProps.children) !== null && _b !== void 0 ? _b : (_c = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _c === void 0 ? void 0 : _c.map((option) => {
             let value;
             let text;
             if (typeof option !== 'object') {
@@ -743,150 +523,19 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
                 text = option.text;
             }
             return (jsx(MenuItem, { sx: {
-                    display: 'flex',
-                    m: 0,
                     alignItems: 'center',
+                    display: 'flex',
                     gap: '0.5rem',
+                    m: 0,
                 }, value: value, children: text }, value));
         }) })));
 };
 
-const MRT_CopyButton = ({ cell, children, table, }) => {
-    var _a;
-    const { options: { localization, muiCopyButtonProps }, } = table;
-    const { column, row } = cell;
-    const { columnDef } = column;
-    const [copied, setCopied] = useState(false);
-    const handleCopy = (event, text) => {
-        event.stopPropagation();
-        navigator.clipboard.writeText(text);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 4000);
-    };
-    const buttonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCopyButtonProps, {
-        cell,
-        column,
-        row,
-        table,
-    })), parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
-        cell,
-        column,
-        row,
-        table,
-    }));
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsx(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined, children: children })) }));
-};
-
-const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
-    var _a;
-    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move, children: jsx(IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
-                var _a;
-                e.stopPropagation();
-                (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
-            }, onDragStart: onDragStart, onDragEnd: onDragEnd, sx: (theme) => (Object.assign({ cursor: 'grab', m: '0 -0.1rem', opacity: 0.5, p: '2px', transition: 'all 150ms ease-in-out', '&:hover': {
-                    backgroundColor: 'transparent',
-                    opacity: 1,
-                }, '&:active': {
-                    cursor: 'grabbing',
-                } }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsx(DragHandleIcon, {}) })) }));
-};
-
-const MRT_TableBodyRowGrabHandle = ({ row, rowRef, table, }) => {
-    const { options: { muiRowDragHandleProps }, } = table;
-    const iconButtonProps = parseFromValuesOrFunc(muiRowDragHandleProps, {
-        row,
-        table,
-    });
-    const handleDragStart = (event) => {
-        var _a;
-        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
-        event.dataTransfer.setDragImage(rowRef.current, 0, 0);
-        table.setDraggingRow(row);
-    };
-    const handleDragEnd = (event) => {
-        var _a;
-        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
-        table.setDraggingRow(null);
-        table.setHoveredRow(null);
-    };
-    return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
-};
-
-const allowedTypes = ['string', 'number'];
-const MRT_TableBodyCellValue = ({ cell, table, }) => {
-    var _a, _b, _c;
-    const { getState, options: { enableFilterMatchHighlighting }, } = table;
-    const { column, row } = cell;
-    const { columnDef } = column;
-    const { globalFilter, globalFilterFn } = getState();
-    const filterValue = column.getFilterValue();
-    let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
-        ? columnDef.AggregatedCell({
-            cell,
-            column,
-            row,
-            table,
-        })
-        : row.getIsGrouped() && !cell.getIsGrouped()
-            ? null
-            : cell.getIsGrouped() && columnDef.GroupedCell
-                ? columnDef.GroupedCell({
-                    cell,
-                    column,
-                    row,
-                    table,
-                })
-                : undefined;
-    const isGroupedValue = renderedCellValue !== undefined;
-    if (!isGroupedValue) {
-        renderedCellValue = cell.renderValue();
-    }
-    if (enableFilterMatchHighlighting &&
-        columnDef.enableFilterMatchHighlighting !== false &&
-        renderedCellValue &&
-        allowedTypes.includes(typeof renderedCellValue) &&
-        ((filterValue &&
-            allowedTypes.includes(typeof filterValue) &&
-            columnDef.filterVariant === 'text') ||
-            (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: ((_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 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
-            renderedCellValue = (jsx("span", { "aria-label": renderedCellValue, role: "note", children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsx(Box, { "aria-hidden": "true", component: "span", sx: match
-                        ? {
-                            backgroundColor: (theme) => theme.palette.mode === 'dark'
-                                ? darken(theme.palette.warning.dark, 0.25)
-                                : lighten(theme.palette.warning.light, 0.5),
-                            borderRadius: '2px',
-                            color: (theme) => theme.palette.mode === 'dark' ? 'white' : 'black',
-                            padding: '2px 1px',
-                        }
-                        : undefined, children: text }, key)))) !== null && _c !== void 0 ? _c : renderedCellValue }));
-        }
-    }
-    if (columnDef.Cell && !isGroupedValue) {
-        renderedCellValue = columnDef.Cell({
-            cell,
-            renderedCellValue,
-            column,
-            row,
-            table,
-        });
-    }
-    return jsx(Fragment, { children: renderedCellValue });
-};
-
 const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
     var _a, _b, _c, _d;
     const theme = useTheme();
-    const { getState, options: { createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiTableBodyCellProps, muiSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
-    const { creatingRow, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, density, isLoading, showSkeletons, } = getState();
+    const { getState, options: { createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiSkeletonProps, muiTableBodyCellProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
+    const { creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -931,6 +580,9 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
                 : undefined;
         return borderStyle
             ? {
+                borderBottom: isDraggingRow || isHoveredRow || isLastRow
+                    ? borderStyle
+                    : undefined,
                 borderLeft: isDraggingColumn ||
                     isHoveredColumn ||
                     ((isDraggingRow || isHoveredRow) && isFirstColumn)
@@ -941,9 +593,6 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
                     ((isDraggingRow || isHoveredRow) && isLastColumn)
                     ? borderStyle
                     : undefined,
-                borderBottom: isDraggingRow || isHoveredRow || isLastRow
-                    ? borderStyle
-                    : undefined,
                 borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
             }
             : undefined;
@@ -951,7 +600,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
     const isEditable = parseFromValuesOrFunc(enableEditing, row) &&
         parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
     const isEditing = isEditable &&
-        !['modal', 'custom'].includes(editDisplayMode) &&
+        !['custom', 'modal'].includes(editDisplayMode) &&
         (editDisplayMode === 'table' ||
             (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
             (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id) &&
@@ -986,7 +635,13 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
             if (node) {
                 measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
             }
-        } }, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit', justifyContent: layoutMode === 'grid' ? tableCellProps.align : undefined, overflow: 'hidden', p: density === 'compact'
+        } }, tableCellProps, { onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
+                outline: ['cell', 'table'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '')
+                    ? `1px solid ${theme.palette.text.secondary}`
+                    : undefined,
+                outlineOffset: '-1px',
+                textOverflow: 'clip',
+            }, alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit', justifyContent: layoutMode === 'grid' ? tableCellProps.align : undefined, overflow: 'hidden', p: density === 'compact'
                 ? columnDefType === 'display'
                     ? '0 0.5rem'
                     : '0.5rem'
@@ -1003,17 +658,11 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
                         : density === 'comfortable'
                             ? 0.75
                             : 1.25)}rem`
-                : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0, '&:hover': {
-                outline: ['table', 'cell'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '')
-                    ? `1px solid ${theme.palette.text.secondary}`
-                    : undefined,
-                outlineOffset: '-1px',
-                textOverflow: 'clip',
-            } }, getCommonCellStyles({
+                : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0 }, getCommonCellStyles({
             column,
             table,
-            theme,
             tableCellProps,
+            theme,
         })), draggingBorders)), children: jsxs(Fragment, { children: [cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : (isLoading || showSkeletons) && cell.getValue() === null ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
                     rowNumberMode === 'static' &&
                     column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
@@ -1021,8 +670,8 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
                         column.id === 'mrt-row-expand' ||
                         !row.getIsGrouped()) ? ((_c = columnDef.Cell) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
                     cell,
-                    renderedCellValue: cell.renderValue(),
                     column,
+                    renderedCellValue: cell.renderValue(),
                     row,
                     table,
                 })) : isCreating || isEditing ? (jsx(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
@@ -1031,7 +680,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
 const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
 const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow, }) => {
-    const { getVisibleLeafColumns, getState, options: { layoutMode, muiTableBodyRowProps, muiDetailPanelProps, renderDetailPanel, }, } = table;
+    const { getState, getVisibleLeafColumns, options: { layoutMode, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
     const { isLoading } = getState();
     const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
         isDetailPanel: true,
@@ -1058,7 +707,7 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow,
 const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
     var _a, _b, _c, _d;
     const theme = useTheme();
-    const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, rowPinningDisplayMode, memoMode, muiTableBodyRowProps, renderDetailPanel, }, refs: { tableHeadRef, tableFooterRef }, setHoveredRow, } = table;
+    const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
     const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
     const isPinned = enableRowPinning && row.getIsPinned();
     const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
@@ -1092,15 +741,25 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
         }
     };
     const rowRef = useRef(null);
-    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
+    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, onDragEnter: handleDragEnter, ref: (node) => {
                     if (node) {
                         rowRef.current = node;
                         measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
                     }
-                } }, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: `${lighten(theme.palette.background.default, 0.06)} !important`, boxSizing: 'border-box', bottom: bottomPinnedIndex !== undefined && isPinned
+                }, selected: row.getIsSelected() }, tableRowProps, { style: Object.assign({ transform: virtualRow
+                        ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
+                        : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), sx: (theme) => (Object.assign({ '&:hover td': {
+                        backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
+                            ? row.getIsSelected()
+                                ? `${alpha(theme.palette.primary.main, 0.2)}`
+                                : theme.palette.mode === 'dark'
+                                    ? `${lighten(theme.palette.background.default, 0.12)}`
+                                    : `${darken(theme.palette.background.default, 0.05)}`
+                            : undefined,
+                    }, backgroundColor: `${lighten(theme.palette.background.default, 0.06)} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isPinned
                         ? `${bottomPinnedIndex * rowHeight +
                             (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
-                        : undefined, display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: isPinned
+                        : undefined, boxSizing: 'border-box', display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: isPinned
                         ? 0.98
                         : (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id
                             ? 0.5
@@ -1108,30 +767,20 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
                         ? 'absolute'
                         : (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
                             ? 'sticky'
-                            : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', top: virtualRow
-                        ? 0
-                        : topPinnedIndex !== undefined && isPinned
-                            ? `${topPinnedIndex * rowHeight +
-                                (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)}px`
-                            : undefined, width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
-                        ? 1
-                        : undefined, td: {
+                            : undefined, td: {
                         backgroundColor: row.getIsSelected()
                             ? alpha(theme.palette.primary.main, 0.2)
                             : isPinned
                                 ? alpha(theme.palette.primary.main, 0.1)
                                 : undefined,
-                    }, '&:hover td': {
-                        backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
-                            ? row.getIsSelected()
-                                ? `${alpha(theme.palette.primary.main, 0.2)}`
-                                : theme.palette.mode === 'dark'
-                                    ? `${lighten(theme.palette.background.default, 0.12)}`
-                                    : `${darken(theme.palette.background.default, 0.05)}`
-                            : undefined,
-                    } }, sx)), style: Object.assign({ transform: virtualRow
-                        ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
-                        : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), children: [virtualPaddingLeft ? (jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
+                    }, top: virtualRow
+                        ? 0
+                        : topPinnedIndex !== undefined && isPinned
+                            ? `${topPinnedIndex * rowHeight +
+                                (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)}px`
+                            : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
+                        ? 1
+                        : undefined }, sx)), children: [virtualPaddingLeft ? (jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
                         const cell = columnVirtualizer
                             ? row.getVisibleCells()[cellOrVirtualCell.index]
                             : cellOrVirtualCell;
@@ -1156,18 +805,32 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
 };
 const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
 
-const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    var _a, _b, _c, _d, _e, _f;
-    const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getIsSomeRowsPinned, getTopRows, options: { enableGlobalFilterRankedResults, enablePagination, enableRowPinning, enableRowVirtualization, enableStickyHeader, enableStickyFooter, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tablePaperRef, tableFooterRef, tableHeadRef }, } = table;
-    const { columnFilters, density, expanded, globalFilter, globalFilterFn, pagination, sorting, rowPinning, isFullScreen, } = getState();
-    const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
-    const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
-        table,
-    });
-    const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
-        ((_a = tableHeadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) ||
-        0;
-    const tableFooterHeight = (enableStickyFooter && ((_b = tableFooterRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) || 0;
+const fuzzy$1 = (rowA, rowB, columnId) => {
+    let dir = 0;
+    if (rowA.columnFiltersMeta[columnId]) {
+        dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
+    }
+    // Provide a fallback for when the item ranks are equal
+    return dir === 0
+        ? sortingFns.alphanumeric(rowA, rowB, columnId)
+        : dir;
+};
+const MRT_SortingFns = Object.assign(Object.assign({}, sortingFns), { fuzzy: fuzzy$1 });
+const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
+    Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
+
+const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { getBottomRows, getCenterRows, getIsSomeRowsPinned, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { enableGlobalFilterRankedResults, enablePagination, enableRowPinning, enableRowVirtualization, enableStickyFooter, enableStickyHeader, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
+    const { columnFilters, density, expanded, globalFilter, globalFilterFn, isFullScreen, pagination, rowPinning, sorting, } = getState();
+    const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
+    const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
+        table,
+    });
+    const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
+        ((_a = tableHeadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) ||
+        0;
+    const tableFooterHeight = (enableStickyFooter && ((_b = tableFooterRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) || 0;
     const shouldRankResults = useMemo(() => !manualExpanding &&
         !manualFiltering &&
         !manualGrouping &&
@@ -1280,7 +943,7 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
                         };
                         return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
                     }) }))) })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
-                getIsSomeRowsPinned('bottom') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', position: 'sticky', bottom: tableFooterHeight - 1, zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, rowIndex) => {
+                getIsSomeRowsPinned('bottom') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ bottom: tableFooterHeight - 1, display: layoutMode === 'grid' ? 'grid' : 'table-row-group', position: 'sticky', zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, rowIndex) => {
                     const props = {
                         columnVirtualizer,
                         measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
@@ -1297,130 +960,155 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
 };
 const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
 
-const MRT_ExpandAllButton = ({ table, }) => {
+const MRT_TableFooterCell = ({ footer, table, }) => {
     var _a, _b;
-    const { getIsAllRowsExpanded, getIsSomeRowsExpanded, getCanSomeRowsExpand, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
-    const { density, isLoading } = getState();
-    const iconButtonProps = parseFromValuesOrFunc(muiExpandAllButtonProps, {
+    const { getState, options: { layoutMode, muiTableFooterCellProps }, } = table;
+    const { density } = getState();
+    const { column } = footer;
+    const { columnDef } = column;
+    const { columnDefType } = columnDef;
+    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, { column, table })), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, {
+        column,
+        table,
+    }));
+    return (jsx(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-cell', fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
+                ? '0.5rem'
+                : density === 'comfortable'
+                    ? '1rem'
+                    : '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1 }, getCommonCellStyles({
+            column,
+            table,
+            tableCellProps,
+            theme,
+        }))), children: jsx(Fragment, { children: footer.isPlaceholder
+                ? null
+                : (_b = (_a = parseFromValuesOrFunc(columnDef.Footer, { column, footer, table })) !== null && _a !== void 0 ? _a : columnDef.footer) !== null && _b !== void 0 ? _b : null }) })));
+};
+
+const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
+    var _a;
+    const { options: { layoutMode, muiTableFooterRowProps }, } = table;
+    // if no content in row, skip row
+    if (!((_a = footerGroup.headers) === null || _a === void 0 ? void 0 : _a.some((header) => (typeof header.column.columnDef.footer === 'string' &&
+        !!header.column.columnDef.footer) ||
+        header.column.columnDef.Footer)))
+        return null;
+    const tableRowProps = parseFromValuesOrFunc(muiTableFooterRowProps, {
+        footerGroup,
         table,
     });
-    const isAllRowsExpanded = getIsAllRowsExpanded();
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isAllRowsExpanded)
-            ? localization.collapseAll
-            : localization.expandAll, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(KeyboardDoubleArrowDownIcon, { style: {
-                        transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
-                        transition: 'transform 150ms',
-                    } })) })) }) }));
+    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), display: layoutMode === 'grid' ? 'flex' : 'table-row', width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
+                const footer = virtualColumns
+                    ? footerGroup.headers[footerOrVirtualFooter.index]
+                    : footerOrVirtualFooter;
+                return (jsx(MRT_TableFooterCell, { footer: footer, table: table }, footer.id));
+            }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
-const MRT_ExpandButton = ({ row, table, }) => {
-    var _a, _b;
-    const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = table;
-    const { density } = getState();
-    const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
-        row,
+const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
+    const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef }, } = table;
+    const { isFullScreen } = getState();
+    const tableFooterProps = parseFromValuesOrFunc(muiTableFooterProps, {
         table,
     });
-    const canExpand = row.getCanExpand();
-    const isExpanded = row.getIsExpanded();
-    const handleToggleExpand = (event) => {
-        var _a;
-        event.stopPropagation();
-        row.toggleExpanded();
-        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
-    };
-    return (jsx(Tooltip, { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
-            ? localization.collapse
-            : localization.expand, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(ExpandMoreIcon, { style: {
-                        transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
-                        transition: 'transform 150ms',
-                    } })) })) }) }));
+    const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
+    return (jsx(TableFooter, Object.assign({}, tableFooterProps, { ref: (ref) => {
+            tableFooterRef.current = ref;
+            if (tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.ref) {
+                // @ts-ignore
+                tableFooterProps.ref.current = ref;
+            }
+        }, sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
+                ? theme.palette.mode === 'light'
+                    ? `1px solid ${theme.palette.grey[300]}`
+                    : `1px solid ${theme.palette.grey[700]}`
+                : undefined, position: stickFooter ? 'sticky' : undefined, zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: getFooterGroups().map((footerGroup) => (jsx(MRT_TableFooterRow, { footerGroup: footerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, footerGroup.id))) })));
 };
 
 const mrtFilterOptions = (localization) => [
     {
+        divider: false,
+        label: localization.filterFuzzy,
         option: 'fuzzy',
         symbol: '≈',
-        label: localization.filterFuzzy,
-        divider: false,
     },
     {
+        divider: false,
+        label: localization.filterContains,
         option: 'contains',
         symbol: '*',
-        label: localization.filterContains,
-        divider: false,
     },
     {
+        divider: false,
+        label: localization.filterStartsWith,
         option: 'startsWith',
         symbol: 'a',
-        label: localization.filterStartsWith,
-        divider: false,
     },
     {
+        divider: true,
+        label: localization.filterEndsWith,
         option: 'endsWith',
         symbol: 'z',
-        label: localization.filterEndsWith,
-        divider: true,
     },
     {
+        divider: false,
+        label: localization.filterEquals,
         option: 'equals',
         symbol: '=',
-        label: localization.filterEquals,
-        divider: false,
     },
     {
+        divider: true,
+        label: localization.filterNotEquals,
         option: 'notEquals',
         symbol: '≠',
-        label: localization.filterNotEquals,
-        divider: true,
     },
     {
+        divider: false,
+        label: localization.filterBetween,
         option: 'between',
         symbol: '⇿',
-        label: localization.filterBetween,
-        divider: false,
     },
     {
+        divider: true,
+        label: localization.filterBetweenInclusive,
         option: 'betweenInclusive',
         symbol: '⬌',
-        label: localization.filterBetweenInclusive,
-        divider: true,
     },
     {
+        divider: false,
+        label: localization.filterGreaterThan,
         option: 'greaterThan',
         symbol: '>',
-        label: localization.filterGreaterThan,
-        divider: false,
     },
     {
+        divider: false,
+        label: localization.filterGreaterThanOrEqualTo,
         option: 'greaterThanOrEqualTo',
         symbol: '≥',
-        label: localization.filterGreaterThanOrEqualTo,
-        divider: false,
     },
     {
+        divider: false,
+        label: localization.filterLessThan,
         option: 'lessThan',
         symbol: '<',
-        label: localization.filterLessThan,
-        divider: false,
     },
     {
+        divider: true,
+        label: localization.filterLessThanOrEqualTo,
         option: 'lessThanOrEqualTo',
         symbol: '≤',
-        label: localization.filterLessThanOrEqualTo,
-        divider: true,
     },
     {
+        divider: false,
+        label: localization.filterEmpty,
         option: 'empty',
         symbol: '∅',
-        label: localization.filterEmpty,
-        divider: false,
     },
     {
+        divider: false,
+        label: localization.filterNotEmpty,
         option: 'notEmpty',
         symbol: '!∅',
-        label: localization.filterNotEmpty,
-        divider: false,
     },
 ];
 const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
@@ -1430,7 +1118,7 @@ const rangeVariants = ['range-slider', 'date-range', 'range'];
 const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, }) => {
     var _a, _b, _c, _d;
     const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
-    const { globalFilterFn, density } = getState();
+    const { density, globalFilterFn } = getState();
     const { column } = header !== null && header !== void 0 ? header : {};
     const { columnDef } = column !== null && column !== void 0 ? column : {};
     const currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
@@ -1446,7 +1134,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
             (allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
         : (!globalFilterModeOptions ||
             globalFilterModeOptions.includes(filterOption.option)) &&
-            ['fuzzy', 'contains', 'startsWith'].includes(filterOption.option)), []);
+            ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option)), []);
     const handleSelectFilterMode = (option) => {
         var _a;
         const prevFilterMode = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef._filterFn) !== null && _a !== void 0 ? _a : '';
@@ -1508,9 +1196,9 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     };
     const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
-    return (jsx(Menu, { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
+    return (jsx(Menu, { MenuListProps: {
             dense: density === 'compact',
-        }, children: (_d = (header && column && columnDef
+        }, anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'center' }, onClose: () => setAnchorEl(null), open: !!anchorEl, children: (_d = (header && column && columnDef
             ? (_c = (_b = columnDef.renderColumnFilterModeMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
                 column: column,
                 internalFilterOptions,
@@ -1526,7 +1214,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
                 internalFilterOptions,
                 onSelectFilterMode: handleSelectFilterMode,
                 table,
-            }))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (jsxs(MenuItem, { divider: divider, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
+            }))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ divider, label, option, symbol }, index) => (jsxs(MenuItem, { divider: divider, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
                 alignItems: 'center',
                 display: 'flex',
                 gap: '2ch',
@@ -1536,18 +1224,18 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
 };
 
 const commonMenuItemStyles = {
-    py: '6px',
-    my: 0,
-    justifyContent: 'space-between',
     alignItems: 'center',
+    justifyContent: 'space-between',
+    my: 0,
+    py: '6px',
 };
 const commonListItemStyles = {
-    display: 'flex',
     alignItems: 'center',
+    display: 'flex',
 };
 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, enableColumnPinning, enableSorting, enableSortingRemoval, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnSizingInfo, setShowColumnFilters, } = table;
+    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 { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
@@ -1612,7 +1300,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
             ? [
                 enableSortingRemoval !== false && (jsx(MenuItem, { disabled: !column.getIsSorted(), onClick: handleClearSort, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(ClearAllIcon, {}) }), localization.clearSort] }) }, 0)),
                 jsx(MenuItem, { disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_b = localization.sortByColumnAsc) === null || _b === void 0 ? void 0 : _b.replace('{column}', String(columnDef.header))] }) }, 1),
-                jsx(MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, {}) }), (_c = localization.sortByColumnDesc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))] }) }, 2),
+                jsx(MenuItem, { disabled: column.getIsSorted() === 'desc', divider: enableColumnFilters || enableGrouping || enableHiding, onClick: handleSortDesc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, {}) }), (_c = localization.sortByColumnDesc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))] }) }, 2),
             ]
             : []),
         ...(enableColumnFilters && column.getCanFilter()
@@ -1651,9 +1339,9 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
             ]
             : []),
     ].filter(Boolean);
-    return (jsx(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+    return (jsx(Menu, { MenuListProps: {
             dense: density === 'compact',
-        }, children: (_k = (_j = (_h = columnDef.renderColumnActionsMenuItems) === null || _h === void 0 ? void 0 : _h.call(columnDef, {
+        }, anchorEl: anchorEl, onClose: () => setAnchorEl(null), open: !!anchorEl, children: (_k = (_j = (_h = columnDef.renderColumnActionsMenuItems) === null || _h === void 0 ? void 0 : _h.call(columnDef, {
             closeMenu: () => setAnchorEl(null),
             column,
             internalColumnMenuItems,
@@ -1666,497 +1354,847 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         })) !== null && _k !== void 0 ? _k : internalColumnMenuItems }));
 };
 
-const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) => {
-    const { getState, options: { icons: { EditIcon }, enableEditing, localization, renderRowActionMenuItems, }, } = table;
-    const { density } = getState();
-    return (jsxs(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), MenuListProps: {
-            dense: density === 'compact',
-        }, children: [parseFromValuesOrFunc(enableEditing, row) && (jsx(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
-                row,
-                table,
-                closeMenu: () => setAnchorEl(null),
-            })] }));
-};
-
-const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
-    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowSave, onEditingRowCancel, }, refs: { editInputRefs }, setCreatingRow, setEditingRow, } = table;
-    const { creatingRow, editingRow, isSaving } = getState();
-    const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
-    const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
-    const handleCancel = () => {
-        if (isCreating) {
-            onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
-            setCreatingRow(null);
-        }
-        else if (isEditing) {
-            onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
-            setEditingRow(null);
-        }
-        row._valuesCache = {}; //reset values cache
-    };
-    const handleSubmitRow = () => {
-        var _a;
-        //look for auto-filled input values
-        (_a = Object.values(editInputRefs === null || editInputRefs === void 0 ? void 0 : editInputRefs.current)
-            .filter((inputRef) => { var _a, _b; return row.id === ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.name) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b[0]); })) === null || _a === void 0 ? void 0 : _a.forEach((input) => {
-            if (input.value !== undefined &&
-                Object.hasOwn(row === null || row === void 0 ? void 0 : row._valuesCache, input.name)) {
-                // @ts-ignore
-                row._valuesCache[input.name] = input.value;
-            }
-        });
-        if (isCreating)
-            onCreatingRowSave === null || onCreatingRowSave === void 0 ? void 0 : onCreatingRowSave({
-                exitCreatingMode: () => setCreatingRow(null),
-                row,
-                table,
-                values: row._valuesCache,
-            });
-        else if (isEditing) {
-            onEditingRowSave === null || onEditingRowSave === void 0 ? void 0 : onEditingRowSave({
-                exitEditingMode: () => setEditingRow(null),
-                row,
-                table,
-                values: row === null || row === void 0 ? void 0 : row._valuesCache,
-            });
-        }
-    };
-    return (jsx(Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' }, children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), jsx(Tooltip, { arrow: true, title: localization.save, children: jsx(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsx(CircularProgress, { size: 18 }) : jsx(SaveIcon, {}) }) })] })) : (jsxs(Fragment, { children: [jsx(Button, { sx: { minWidth: '100px' }, onClick: handleCancel, children: localization.cancel }), jsxs(Button, { sx: { minWidth: '100px' }, onClick: handleSubmitRow, variant: "contained", children: [isSaving && jsx(CircularProgress, { color: "inherit", size: 18 }), localization.save] })] })) }));
-};
-
-const commonIconButtonStyles = {
-    height: '2rem',
-    ml: '10px',
-    opacity: 0.5,
-    transition: 'opacity 150ms',
-    width: '2rem',
-    '&:hover': {
-        opacity: 1,
-    },
-};
-const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
-    const { getState, options: { createDisplayMode, editDisplayMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
-    const { creatingRow, editingRow } = getState();
-    const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
-    const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
-    const showEditActionButtons = (isCreating && createDisplayMode === 'row') ||
-        (isEditing && editDisplayMode === 'row');
+const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
+    var _a;
+    const { options: { columnFilterDisplayMode, icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps, }, } = table;
+    const { column } = header;
+    const { columnDef } = column;
     const [anchorEl, setAnchorEl] = useState(null);
-    const handleOpenRowActionMenu = (event) => {
+    const handleClick = (event) => {
         event.stopPropagation();
         event.preventDefault();
         setAnchorEl(event.currentTarget);
     };
-    const handleStartEditMode = (event) => {
-        event.stopPropagation();
-        setEditingRow(Object.assign({}, row));
-        setAnchorEl(null);
-    };
-    return (jsx(Fragment, { children: renderRowActions && !showEditActionButtons ? (renderRowActions({ cell, row, table })) : showEditActionButtons ? (jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
-            parseFromValuesOrFunc(enableEditing, row) ? (jsx(Tooltip, { placement: "right", arrow: true, title: localization.edit, children: jsx(IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode, children: jsx(EditIcon, {}) }) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsx(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles, children: jsx(MoreHorizIcon, {}) }) }), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
-};
-
-const MRT_SelectCheckbox = ({ row, selectAll, table, }) => {
-    var _a;
-    const { getState, options: { localization, enableMultiRowSelection, rowPinningDisplayMode, enableRowPinning, muiSelectCheckboxProps, muiSelectAllCheckboxProps, selectAllMode, }, } = table;
-    const { density, isLoading } = getState();
-    const checkboxProps = !row
-        ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
-        : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table });
-    const allRowsSelected = selectAll
-        ? selectAllMode === 'page'
-            ? table.getIsAllPageRowsSelected()
-            : table.getIsAllRowsSelected()
-        : undefined;
-    const commonProps = Object.assign(Object.assign({ checked: selectAll ? allRowsSelected : row === null || row === void 0 ? void 0 : row.getIsSelected(), disabled: isLoading || (row && !row.getCanSelect()), inputProps: {
-            'aria-label': selectAll
-                ? localization.toggleSelectAll
-                : localization.toggleSelectRow,
-        }, onChange: (event) => {
-            event.stopPropagation();
-            row
-                ? row.getToggleSelectedHandler()(event)
-                : selectAllMode === 'all'
-                    ? table.getToggleAllRowsSelectedHandler()(event)
-                    : table.getToggleAllPageRowsSelectedHandler()(event);
-            if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
-                if (row) {
-                    row.pin(!row.getIsPinned() && event.target.checked
-                        ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
-                            ? 'bottom'
-                            : 'top'
-                        : false);
-                }
-                else {
-                    table.setRowPinning({ bottom: [], top: [] });
-                }
-            }
-        }, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
-            var _a;
-            e.stopPropagation();
-            (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
-        }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined, zIndex: 0 }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))), title: undefined });
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
-            ? localization.toggleSelectAll
-            : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsx(Radio, Object.assign({}, commonProps))) : (jsx(Checkbox, Object.assign({ indeterminate: selectAll
-                ? table.getIsSomeRowsSelected() && !allRowsSelected
-                : row === null || row === void 0 ? void 0 : row.getIsSomeSelected() }, commonProps))) }));
+    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnActionsButtonProps, {
+        column,
+        table,
+    })), parseFromValuesOrFunc(columnDef.muiColumnActionsButtonProps, {
+        column,
+        table,
+    }));
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ '&:hover': {
+                            opacity: 1,
+                        }, height: '2rem', m: '-8px -4px', opacity: 0.5, transform: `scale(0.85) ${columnFilterDisplayMode !== 'popover' ? 'translateX(-4px)' : ''}`, transition: 'opacity 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsx(MoreVertIcon, {}) })) }), anchorEl && (jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
-const useMRT_DisplayColumns = ({ creatingRow, columnOrder, grouping, tableOptions, }) => {
-    var _a, _b;
-    return useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
-        return [
-            ((_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnOrder) !== null && _b !== void 0 ? _b : columnOrder).includes('mrt-row-pin') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_TableBodyRowPinButton, { row: row, table: table })), header: tableOptions.localization.pin, size: 60 }, tableOptions.defaultDisplayColumn), (_c = tableOptions.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-pin']), { id: 'mrt-row-pin' }),
-            ((_e = (_d = tableOptions.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, rowRef, table }) => (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), header: tableOptions.localization.move, size: 60 }, tableOptions.defaultDisplayColumn), (_f = tableOptions.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-drag']), { id: 'mrt-row-drag' }),
-            (((_h = (_g = tableOptions.state) === null || _g === void 0 ? void 0 : _g.columnOrder) !== null && _h !== void 0 ? _h : columnOrder).includes('mrt-row-actions') ||
-                (creatingRow && tableOptions.createDisplayMode === 'row')) && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row, table }) => (jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: tableOptions.localization.actions, size: 70 }, tableOptions.defaultDisplayColumn), (_j = tableOptions.displayColumnDefOptions) === null || _j === void 0 ? void 0 : _j['mrt-row-actions']), { id: 'mrt-row-actions' }),
-            ((_l = (_k = tableOptions.state) === null || _k === void 0 ? void 0 : _k.columnOrder) !== null && _l !== void 0 ? _l : columnOrder).includes('mrt-row-expand') &&
-                showExpandColumn(tableOptions, (_o = (_m = tableOptions.state) === null || _m === void 0 ? void 0 : _m.grouping) !== null && _o !== void 0 ? _o : grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_ExpandButton, { row: row, table: table })), Header: tableOptions.enableExpandAll
-                    ? ({ table }) => jsx(MRT_ExpandAllButton, { table: table })
-                    : null, header: tableOptions.localization.expand, size: 60 }, tableOptions.defaultDisplayColumn), (_p = tableOptions.displayColumnDefOptions) === null || _p === void 0 ? void 0 : _p['mrt-row-expand']), { id: 'mrt-row-expand' }),
-            ((_r = (_q = tableOptions.state) === null || _q === void 0 ? void 0 : _q.columnOrder) !== null && _r !== void 0 ? _r : columnOrder).includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_SelectCheckbox, { row: row, table: table })), Header: tableOptions.enableSelectAll &&
-                    tableOptions.enableMultiRowSelection
-                    ? ({ table }) => jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
-                    : null, header: tableOptions.localization.select, size: 60 }, tableOptions.defaultDisplayColumn), (_s = tableOptions.displayColumnDefOptions) === null || _s === void 0 ? void 0 : _s['mrt-row-select']), { id: 'mrt-row-select' }),
-            ((_u = (_t = tableOptions.state) === null || _t === void 0 ? void 0 : _t.columnOrder) !== null && _u !== void 0 ? _u : columnOrder).includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => tableOptions.localization.rowNumber, header: tableOptions.localization.rowNumbers, size: 60 }, tableOptions.defaultDisplayColumn), (_v = tableOptions.displayColumnDefOptions) === null || _v === void 0 ? void 0 : _v['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
-        ].filter(Boolean);
-    }, [
-        columnOrder,
-        grouping,
-        tableOptions.displayColumnDefOptions,
-        tableOptions.editDisplayMode,
-        tableOptions.enableColumnDragging,
-        tableOptions.enableColumnFilterModes,
-        tableOptions.enableColumnOrdering,
-        tableOptions.enableEditing,
-        tableOptions.enableExpandAll,
-        tableOptions.enableExpanding,
-        tableOptions.enableGrouping,
-        tableOptions.enableRowActions,
-        tableOptions.enableRowDragging,
-        tableOptions.enableRowNumbers,
-        tableOptions.enableRowOrdering,
-        tableOptions.enableRowSelection,
-        tableOptions.enableSelectAll,
-        tableOptions.localization,
-        tableOptions.positionActionsColumn,
-        tableOptions.renderDetailPanel,
-        tableOptions.renderRowActionMenuItems,
-        tableOptions.renderRowActions,
-        (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnOrder,
-        (_b = tableOptions.state) === null || _b === void 0 ? void 0 : _b.grouping,
-    ]);
+const MRT_FilterCheckbox = ({ column, table, }) => {
+    var _a, _b, _c;
+    const { getState, options: { localization, muiFilterCheckboxProps }, } = table;
+    const { density } = getState();
+    const { columnDef } = column;
+    const checkboxProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterCheckboxProps, {
+        column,
+        table,
+    })), parseFromValuesOrFunc(columnDef.muiFilterCheckboxProps, {
+        column,
+        table,
+    }));
+    const filterLabel = (_a = localization.filterByColumn) === null || _a === void 0 ? void 0 : _a.replace('{column}', columnDef.header);
+    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel, children: jsx(FormControlLabel, { control: jsx(Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', color: column.getFilterValue() === undefined ? 'default' : 'primary', indeterminate: column.getFilterValue() === undefined, size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onChange: (e, checked) => {
+                    var _a;
+                    column.setFilterValue(column.getFilterValue() === undefined
+                        ? 'true'
+                        : column.getFilterValue() === 'true'
+                            ? 'false'
+                            : undefined);
+                    (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onChange) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e, checked);
+                }, onClick: (e) => {
+                    var _a;
+                    e.stopPropagation();
+                    (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
+                }, sx: (theme) => (Object.assign({ height: '2.5rem', width: '2.5rem' }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))) })), disableTypography: true, label: (_c = checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, sx: { color: 'text.secondary', fontWeight: 'normal', mt: '-4px' }, title: undefined }) }));
 };
 
-const useMRT_Effects = (table) => {
-    const { getState, options: { enablePagination, rowCount }, } = table;
-    const { globalFilter, isFullScreen, pagination, sorting, isLoading, showSkeletons, } = getState();
-    const isMounted = useRef(false);
-    const initialBodyHeight = useRef();
-    const previousTop = useRef();
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            initialBodyHeight.current = document.body.style.height;
+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;
+    const { column } = header;
+    const { columnDef } = column;
+    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' ||
+        (!isSelectFilter && !isMultiSelectFilter);
+    const currentFilterOption = columnDef._filterFn;
+    const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
+        ? //@ts-ignore
+            localization[`filter${((_b = (_a = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt) === null || _a === void 0 ? void 0 : _a.call(currentFilterOption, 0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
+                (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
+        : '';
+    const filterPlaceholder = !isRangeFilter
+        ? (_c = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.placeholder) !== null && _c !== void 0 ? _c : (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))
+        : rangeFilterIndex === 0
+            ? localization.min
+            : rangeFilterIndex === 1
+                ? localization.max
+                : '';
+    const allowedColumnFilterOptions = (_e = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _e !== void 0 ? _e : 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]) || []
+                : (_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;
+        if (isRangeFilter) {
+            column.setFilterValue((old) => {
+                const newFilterValues = old !== null && old !== void 0 ? old : ['', ''];
+                newFilterValues[rangeFilterIndex] = value;
+                return newFilterValues;
+            });
         }
-    }, []);
+        else {
+            column.setFilterValue(value !== null && value !== void 0 ? value : undefined);
+        }
+    }, isTextboxFilter ? (manualFiltering ? 400 : 200) : 1), []);
+    const handleChange = (event) => {
+        setFilterValue(event.target.value);
+        handleChangeDebounced(event);
+    };
+    const handleClear = () => {
+        if (isMultiSelectFilter) {
+            setFilterValue([]);
+            column.setFilterValue([]);
+        }
+        else if (isRangeFilter) {
+            setFilterValue('');
+            column.setFilterValue((old) => {
+                const newFilterValues = (Array.isArray(old) && old) || ['', ''];
+                newFilterValues[rangeFilterIndex] = undefined;
+                return newFilterValues;
+            });
+        }
+        else {
+            setFilterValue('');
+            column.setFilterValue(undefined);
+        }
+    };
+    const handleClearEmptyFilterChip = () => {
+        setFilterValue('');
+        column.setFilterValue(undefined);
+        setColumnFilterFns((prev) => {
+            var _a;
+            return (Object.assign(Object.assign({}, prev), { [header.id]: (_a = allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions[0]) !== null && _a !== void 0 ? _a : 'fuzzy' }));
+        });
+    };
+    const handleFilterMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const isMounted = useRef(false);
     useEffect(() => {
-        if (isMounted && typeof window !== 'undefined') {
-            if (isFullScreen) {
-                previousTop.current = document.body.getBoundingClientRect().top; //save scroll position
-                document.body.style.height = '100vh'; //hide page scrollbars when table is in full screen mode
+        if (isMounted.current) {
+            const filterValue = column.getFilterValue();
+            if (filterValue === undefined) {
+                handleClear();
+            }
+            else if (isRangeFilter && rangeFilterIndex !== undefined) {
+                setFilterValue(filterValue[rangeFilterIndex]);
             }
             else {
-                document.body.style.height = initialBodyHeight.current;
-                if (!previousTop.current)
-                    return;
-                //restore scroll position
-                window.scrollTo({
-                    top: -1 * previousTop.current,
-                    behavior: 'instant',
-                });
+                setFilterValue(filterValue);
             }
         }
         isMounted.current = true;
-    }, [isFullScreen]);
-    //if page index is out of bounds, set it to the last page
-    useEffect(() => {
-        if (!enablePagination || isLoading || showSkeletons)
-            return;
-        const { pageIndex, pageSize } = pagination;
-        const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : table.getPrePaginationRowModel().rows.length;
-        const firstVisibleRowIndex = pageIndex * pageSize;
-        if (firstVisibleRowIndex > totalRowCount) {
-            table.setPageIndex(Math.floor(totalRowCount / pageSize));
-        }
-    }, [rowCount, table.getPrePaginationRowModel().rows.length]);
-    //turn off sort when global filter is looking for ranked results
-    const appliedSort = useRef(sorting);
+    }, [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 (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: {
+                    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
+                                    ? option.value === value
+                                    : option === value);
+                                return (jsx(Chip, { label: selectedValue instanceof Object
+                                        ? selectedValue.text
+                                        : 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 })] }));
+};
+
+const MRT_FilterRangeFields = ({ header, table, }) => {
+    return (jsxs(Box, { sx: { display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }, children: [jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }), jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })] }));
+};
+
+const MRT_FilterRangeSlider = ({ header, table, }) => {
+    var _a, _b;
+    const { options: { enableColumnFilterModes, localization, muiFilterSliderProps }, refs: { filterInputRefs }, } = table;
+    const { column } = header;
+    const { columnDef } = column;
+    const currentFilterOption = columnDef._filterFn;
+    const showChangeModeButton = enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
+    const sliderProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterSliderProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterSliderProps, { column, table }));
+    let [min, max] = sliderProps.min !== undefined && sliderProps.max !== undefined
+        ? [sliderProps.min, sliderProps.max]
+        : (_a = column.getFacetedMinMaxValues()) !== null && _a !== void 0 ? _a : [0, 1];
+    //fix potential TanStack Table bugs where min or max is an array
+    if (Array.isArray(min))
+        min = min[0];
+    if (Array.isArray(max))
+        max = max[0];
+    if (min === null)
+        min = 0;
+    if (max === null)
+        max = 1;
+    const [filterValues, setFilterValues] = useState([min, max]);
+    const columnFilterValue = column.getFilterValue();
+    const isMounted = useRef(false);
     useEffect(() => {
-        if (sorting.length) {
-            appliedSort.current = sorting;
+        if (isMounted.current) {
+            if (columnFilterValue === undefined) {
+                setFilterValues([min, max]);
+            }
+            else if (Array.isArray(columnFilterValue)) {
+                setFilterValues(columnFilterValue);
+            }
         }
-    }, [sorting]);
-    useEffect(() => {
-        if (!getCanRankRows(table))
-            return;
-        if (globalFilter) {
-            table.setSorting([]);
+        isMounted.current = true;
+    }, [columnFilterValue, min, max]);
+    return (jsxs(Stack, { children: [jsx(Slider, Object.assign({ disableSwap: true, max: max, min: min, onChange: (_event, values) => {
+                    setFilterValues(values);
+                }, onChangeCommitted: (_event, value) => {
+                    if (Array.isArray(value)) {
+                        if (value[0] <= min && value[1] >= max) {
+                            //if the user has selected the entire range, remove the filter
+                            column.setFilterValue(undefined);
+                        }
+                        else {
+                            column.setFilterValue(value);
+                        }
+                    }
+                }, value: filterValues, valueLabelDisplay: "auto" }, sliderProps, { slotProps: {
+                    input: {
+                        ref: (node) => {
+                            var _a, _b;
+                            if (node) {
+                                filterInputRefs.current[`${column.id}-0`] = node;
+                                // @ts-ignore
+                                if ((_b = (_a = sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.slotProps) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.ref) {
+                                    //@ts-ignore
+                                    sliderProps.slotProps.input.ref = node;
+                                }
+                            }
+                        },
+                    },
+                }, sx: (theme) => (Object.assign({ m: 'auto', mt: !showChangeModeButton ? '10px' : '6px', px: '4px', width: 'calc(100% - 8px)' }, parseFromValuesOrFunc(sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx, theme))) })), showChangeModeButton ? (jsx(FormHelperText, { sx: {
+                    fontSize: '0.75rem',
+                    lineHeight: '0.8rem',
+                    m: '-3px -6px',
+                    whiteSpace: 'nowrap',
+                }, children: localization.filterMode.replace('{filterType}', 
+                // @ts-ignore
+                localization[`filter${((_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
+                    (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null] }));
+};
+
+const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
+    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' ||
+            ['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;
+    const { options: { columnFilterDisplayMode, icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
+    const { column } = header;
+    const { columnDef } = column;
+    const filterValue = column.getFilterValue();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const isFilterActive = (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
+        (!!filterValue && !Array.isArray(filterValue));
+    const isRangeFilter = columnDef.filterVariant === '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))
+        : 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()) +
+                    (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('" "', '');
+    return (jsxs(Fragment, { children: [jsx(Grow, { in: columnFilterDisplayMode === 'popover' ||
+                    (!!column.getFilterValue() && !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) => {
+                                if (columnFilterDisplayMode === 'popover') {
+                                    setAnchorEl(event.currentTarget);
+                                }
+                                else {
+                                    setShowColumnFilters(true);
+                                }
+                                queueMicrotask(() => {
+                                    var _a, _b;
+                                    (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus();
+                                    (_b = filterInputRefs.current[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.select();
+                                });
+                                event.stopPropagation();
+                            }, sx: {
+                                height: '16px',
+                                opacity: 0.8,
+                                p: '8px',
+                                transform: 'scale(0.75)',
+                                width: '16px',
+                            }, children: jsx(FilterAltIcon, {}) }) }) }) }), jsx(Popover, { anchorEl: anchorEl, anchorOrigin: {
+                    horizontal: 'center',
+                    vertical: 'top',
+                }, onClose: (event) => {
+                    //@ts-ignore
+                    event.stopPropagation();
+                    setAnchorEl(null);
+                }, open: !!anchorEl, transformOrigin: {
+                    horizontal: 'center',
+                    vertical: 'bottom',
+                }, children: jsx(Box, { sx: { p: '1rem' }, children: jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) })] }));
+};
+
+const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
+    const { getState, options: { enableColumnOrdering, muiColumnDragHandleProps }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
+    const { columnDef } = column;
+    const { columnOrder, draggingColumn, hoveredColumn } = getState();
+    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table })), parseFromValuesOrFunc(columnDef.muiColumnDragHandleProps, {
+        column,
+        table,
+    }));
+    const handleDragStart = (event) => {
+        var _a;
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
+        setDraggingColumn(column);
+        event.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
+    };
+    const handleDragEnd = (event) => {
+        var _a;
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
+        if ((hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
+            column.toggleGrouping();
         }
-        else {
-            table.setSorting(() => appliedSort.current || []);
+        else if (enableColumnOrdering &&
+            hoveredColumn &&
+            (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) !== (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)) {
+            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
         }
-    }, [globalFilter]);
+        setDraggingColumn(null);
+        setHoveredColumn(null);
+    };
+    return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
 };
 
-const useMRT_TableInstance = (tableOptions) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
-    const bottomToolbarRef = useRef(null);
-    const editInputRefs = useRef({});
-    const filterInputRefs = useRef({});
-    const searchInputRef = useRef(null);
-    const tableContainerRef = useRef(null);
-    const tableHeadCellRefs = useRef({});
-    const tablePaperRef = useRef(null);
-    const topToolbarRef = useRef(null);
-    const tableHeadRef = useRef(null);
-    const tableFooterRef = useRef(null);
-    const initialState = useMemo(() => {
-        var _a, _b, _c;
-        const initState = (_a = tableOptions.initialState) !== null && _a !== void 0 ? _a : {};
-        initState.columnOrder =
-            (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(tableOptions);
-        initState.globalFilterFn = (_c = tableOptions.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
-        return initState;
-    }, []);
-    const [creatingRow, _setCreatingRow] = useState((_a = initialState.creatingRow) !== null && _a !== void 0 ? _a : null);
-    const [columnFilterFns, setColumnFilterFns] = useState(() => Object.assign({}, ...getAllLeafColumnDefs(tableOptions.columns).map((col) => {
-        var _a, _b, _c, _d;
-        return ({
-            [getColumnId(col)]: col.filterFn instanceof Function
-                ? (_a = col.filterFn.name) !== null && _a !== void 0 ? _a : 'custom'
-                : (_d = (_b = col.filterFn) !== null && _b !== void 0 ? _b : (_c = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _c === void 0 ? void 0 : _c[getColumnId(col)]) !== null && _d !== void 0 ? _d : getDefaultColumnFilterFn(col),
-        });
-    })));
-    const [columnOrder, setColumnOrder] = useState((_b = initialState.columnOrder) !== null && _b !== void 0 ? _b : []);
-    const [density, setDensity] = useState((_c = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _c !== void 0 ? _c : 'comfortable');
-    const [draggingColumn, setDraggingColumn] = useState((_d = initialState.draggingColumn) !== null && _d !== void 0 ? _d : null);
-    const [draggingRow, setDraggingRow] = useState((_e = initialState.draggingRow) !== null && _e !== void 0 ? _e : null);
-    const [editingCell, setEditingCell] = useState((_f = initialState.editingCell) !== null && _f !== void 0 ? _f : null);
-    const [editingRow, setEditingRow] = useState((_g = initialState.editingRow) !== null && _g !== void 0 ? _g : null);
-    const [globalFilterFn, setGlobalFilterFn] = useState((_h = initialState.globalFilterFn) !== null && _h !== void 0 ? _h : 'fuzzy');
-    const [grouping, setGrouping] = useState((_j = initialState.grouping) !== null && _j !== void 0 ? _j : []);
-    const [hoveredColumn, setHoveredColumn] = useState((_k = initialState.hoveredColumn) !== null && _k !== void 0 ? _k : null);
-    const [hoveredRow, setHoveredRow] = useState((_l = initialState.hoveredRow) !== null && _l !== void 0 ? _l : null);
-    const [isFullScreen, setIsFullScreen] = useState((_m = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _m !== void 0 ? _m : false);
-    const [showAlertBanner, setShowAlertBanner] = useState((_p = (_o = tableOptions.initialState) === null || _o === void 0 ? void 0 : _o.showAlertBanner) !== null && _p !== void 0 ? _p : false);
-    const [showColumnFilters, setShowColumnFilters] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _q !== void 0 ? _q : false);
-    const [showGlobalFilter, setShowGlobalFilter] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _r !== void 0 ? _r : false);
-    const [showToolbarDropZone, setShowToolbarDropZone] = useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _s !== void 0 ? _s : false);
-    const displayColumns = useMRT_DisplayColumns({
-        columnOrder,
-        creatingRow,
-        grouping,
-        tableOptions,
-    });
-    const columnDefs = useMemo(() => {
-        var _a, _b, _c;
-        return prepareColumns({
-            aggregationFns: tableOptions.aggregationFns,
-            columnDefs: [...displayColumns, ...tableOptions.columns],
-            columnFilterFns: (_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnFilterFns) !== null && _b !== void 0 ? _b : columnFilterFns,
-            defaultDisplayColumn: (_c = tableOptions.defaultDisplayColumn) !== null && _c !== void 0 ? _c : {},
-            filterFns: tableOptions.filterFns,
-            sortingFns: tableOptions.sortingFns,
-        });
-    }, [
-        columnFilterFns,
-        displayColumns,
-        tableOptions.columns,
-        (_t = tableOptions.state) === null || _t === void 0 ? void 0 : _t.columnFilterFns,
-    ]);
-    const data = useMemo(() => {
-        var _a, _b, _c, _d, _e;
-        return (((_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.isLoading) || ((_b = tableOptions.state) === null || _b === void 0 ? void 0 : _b.showSkeletons)) &&
-            !tableOptions.data.length
-            ? [
-                ...Array(((_d = (_c = tableOptions.state) === null || _c === void 0 ? void 0 : _c.pagination) === null || _d === void 0 ? void 0 : _d.pageSize) ||
-                    ((_e = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) === null || _e === void 0 ? void 0 : _e.pageSize) ||
-                    10).fill(null),
-            ].map(() => Object.assign({}, ...getAllLeafColumnDefs(tableOptions.columns).map((col) => ({
-                [getColumnId(col)]: null,
-            }))))
-            : tableOptions.data;
-    }, [
-        tableOptions.data,
-        (_u = tableOptions.state) === null || _u === void 0 ? void 0 : _u.isLoading,
-        (_v = tableOptions.state) === null || _v === void 0 ? void 0 : _v.showSkeletons,
-    ]);
-    //@ts-ignore
-    const table = useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: tableOptions.enableExpanding || tableOptions.enableGrouping
-            ? getExpandedRowModel()
-            : undefined, getFacetedMinMaxValues: tableOptions.enableFacetedValues
-            ? getFacetedMinMaxValues()
-            : undefined, getFacetedRowModel: tableOptions.enableFacetedValues
-            ? getFacetedRowModel()
-            : undefined, getFacetedUniqueValues: tableOptions.enableFacetedValues
-            ? getFacetedUniqueValues()
-            : undefined, getFilteredRowModel: tableOptions.enableColumnFilters ||
-            tableOptions.enableGlobalFilter ||
-            tableOptions.enableFilters
-            ? getFilteredRowModel()
-            : undefined, getGroupedRowModel: tableOptions.enableGrouping
-            ? getGroupedRowModel()
-            : undefined, getPaginationRowModel: tableOptions.enablePagination
-            ? getPaginationRowModel()
-            : undefined, getSortedRowModel: tableOptions.enableSorting
-            ? getSortedRowModel()
-            : undefined, onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, tableOptions), { 
-        //@ts-ignore
-        columns: columnDefs, data, globalFilterFn: (_w = tableOptions.filterFns) === null || _w === void 0 ? void 0 : _w[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'], initialState, state: Object.assign({ creatingRow,
-            columnFilterFns,
-            columnOrder,
-            density,
-            draggingColumn,
-            draggingRow,
-            editingCell,
-            editingRow,
-            globalFilterFn,
-            grouping,
-            hoveredColumn,
-            hoveredRow,
-            isFullScreen,
-            showAlertBanner,
-            showColumnFilters,
-            showGlobalFilter,
-            showToolbarDropZone }, tableOptions.state) }));
-    // @ts-ignore
-    table.refs = {
-        // @ts-ignore
-        bottomToolbarRef,
-        editInputRefs,
-        filterInputRefs,
-        // @ts-ignore
-        searchInputRef,
-        // @ts-ignore
-        tableContainerRef,
-        tableHeadCellRefs,
-        // @ts-ignore
-        tablePaperRef,
-        // @ts-ignore
-        topToolbarRef,
-        // @ts-ignore
-        tableFooterRef,
-        // @ts-ignore
-        tableHeadRef,
-    };
-    const setCreatingRow = (row) => {
-        if (row === true) {
-            table.setCreatingRow(createRow(table));
+const MRT_TableHeadCellResizeHandle = ({ header, table, }) => {
+    var _a;
+    const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
+    const { density } = getState();
+    const { column } = header;
+    return (jsx(Box, { className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
+            setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
+            column.resetSize();
+        }, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
+            transform: column.getIsResizing() && columnResizeMode === 'onEnd'
+                ? `translateX(${(_a = getState().columnSizingInfo.deltaOffset) !== null && _a !== void 0 ? _a : 0}px)`
+                : undefined,
+        }, sx: (theme) => ({
+            '&:active > hr': {
+                backgroundColor: theme.palette.info.main,
+                opacity: 1,
+            },
+            cursor: 'col-resize',
+            mr: density === 'compact' ? '-0.75rem' : '-1rem',
+            position: 'absolute',
+            px: '4px',
+            right: '4px',
+        }), children: jsx(Divider, { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
+                borderRadius: '2px',
+                borderWidth: '2px',
+                height: '24px',
+                touchAction: 'none',
+                transition: column.getIsResizing()
+                    ? undefined
+                    : 'all 150ms ease-in-out',
+                userSelect: 'none',
+                zIndex: 4,
+            } }) }));
+};
+
+const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
+    const { getState, options: { icons: { ArrowDownwardIcon }, localization, }, } = table;
+    const { column } = header;
+    const { columnDef } = column;
+    const { sorting } = getState();
+    const sortTooltip = column.getIsSorted()
+        ? column.getIsSorted() === 'desc'
+            ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
+            : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
+        : column.getNextSortingOrder() === 'desc'
+            ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
+            : localization.sortByColumnAsc.replace('{column}', columnDef.header);
+    return (jsx(Tooltip, { arrow: true, placement: "top", title: sortTooltip, children: jsx(Badge, { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsx(TableSortLabel, { IconComponent: ArrowDownwardIcon, active: !!column.getIsSorted(), "aria-label": sortTooltip, direction: column.getIsSorted()
+                    ? column.getIsSorted()
+                    : undefined, onClick: (e) => {
+                    var _a;
+                    e.stopPropagation();
+                    (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
+                }, sx: {
+                    flex: '0 0',
+                    transform: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) !== 'right'
+                        ? 'translateX(-0.5ch)'
+                        : undefined,
+                    width: '2.4ch',
+                } }) }) }));
+};
+
+const MRT_TableHeadCell = ({ header, table, }) => {
+    var _a, _b, _c, _d, _f;
+    const theme = useTheme();
+    const { getState, options: { columnFilterDisplayMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
+    const { density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
+    const { column } = header;
+    const { columnDef } = column;
+    const { columnDefType } = columnDef;
+    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadCellProps, { column, table })), parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
+        column,
+        table,
+    }));
+    const showColumnActions = (enableColumnActions || columnDef.enableColumnActions) &&
+        columnDef.enableColumnActions !== false;
+    const showDragHandle = enableColumnDragging !== false &&
+        columnDef.enableColumnDragging !== false &&
+        (enableColumnDragging ||
+            (enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
+            (enableGrouping &&
+                columnDef.enableGrouping !== false &&
+                !grouping.includes(column.id)));
+    const headerPL = useMemo(() => {
+        let pl = 0;
+        if (column.getCanSort())
+            pl++;
+        if (showColumnActions)
+            pl += 1.75;
+        if (showDragHandle)
+            pl += 1.25;
+        return pl;
+    }, [showColumnActions, showDragHandle]);
+    const draggingBorder = useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
+        ? `1px dashed ${theme.palette.text.secondary}`
+        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
+            ? `2px dashed ${theme.palette.primary.main}`
+            : undefined, [draggingColumn, hoveredColumn]);
+    const draggingBorders = draggingBorder
+        ? {
+            borderLeft: draggingBorder,
+            borderRight: draggingBorder,
+            borderTop: draggingBorder,
         }
-        else {
-            _setCreatingRow(row);
+        : undefined;
+    const handleDragEnter = (_e) => {
+        if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
+            setHoveredColumn(null);
+        }
+        if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
+            setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    table.setCreatingRow = setCreatingRow;
-    table.setColumnFilterFns =
-        (_x = tableOptions.onColumnFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns;
-    table.setDensity = (_y = tableOptions.onDensityChange) !== null && _y !== void 0 ? _y : setDensity;
-    table.setDraggingColumn =
-        (_z = tableOptions.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn;
-    table.setDraggingRow = (_0 = tableOptions.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow;
-    table.setEditingCell = (_1 = tableOptions.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell;
-    table.setEditingRow = (_2 = tableOptions.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow;
-    table.setGlobalFilterFn =
-        (_3 = tableOptions.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn;
-    table.setHoveredColumn =
-        (_4 = tableOptions.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn;
-    table.setHoveredRow = (_5 = tableOptions.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow;
-    table.setIsFullScreen = (_6 = tableOptions.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen;
-    table.setShowAlertBanner =
-        (_7 = tableOptions.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner;
-    table.setShowColumnFilters =
-        (_8 = tableOptions.onShowColumnFiltersChange) !== null && _8 !== void 0 ? _8 : setShowColumnFilters;
-    table.setShowGlobalFilter =
-        (_9 = tableOptions.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter;
-    table.setShowToolbarDropZone =
-        (_10 = tableOptions.onShowToolbarDropZoneChange) !== null && _10 !== void 0 ? _10 : setShowToolbarDropZone;
-    useMRT_Effects(table);
-    return table;
+    const headerElement = (_a = parseFromValuesOrFunc(columnDef.Header, {
+        column,
+        header,
+        table,
+    })) !== null && _a !== void 0 ? _a : columnDef.header;
+    return (jsxs(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
+            if (node) {
+                tableHeadCellRefs.current[column.id] = node;
+            }
+        } }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ flexDirection: layoutMode === 'grid' ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
+                ? '0.5rem'
+                : density === 'comfortable'
+                    ? columnDefType === 'display'
+                        ? '0.75rem'
+                        : '1rem'
+                    : columnDefType === 'display'
+                        ? '1rem 1.25rem'
+                        : '1.5rem', pb: columnDefType === 'display'
+                ? 0
+                : showColumnFilters || density === 'compact'
+                    ? '0.4rem'
+                    : '0.6rem', pt: columnDefType === 'group' || density === 'compact'
+                ? '0.25rem'
+                : density === 'comfortable'
+                    ? '.75rem'
+                    : '1.25rem', userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top', zIndex: column.getIsResizing() || (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
+                ? 3
+                : column.getIsPinned() && columnDefType !== 'group'
+                    ? 2
+                    : 1 }, getCommonCellStyles({
+            column,
+            header,
+            table,
+            tableCellProps,
+            theme,
+        })), draggingBorders)), children: [header.isPlaceholder ? null : (jsxs(Box, { className: "Mui-TableHeadCell-Content", sx: {
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
+                    justifyContent: columnDefType === 'group' || (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
+                        ? 'center'
+                        : column.getCanResize()
+                            ? 'space-between'
+                            : 'flex-start',
+                    position: 'relative',
+                    width: '100%',
+                }, children: [jsxs(Box, { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
+                            alignItems: 'center',
+                            cursor: column.getCanSort() && columnDefType !== 'group'
+                                ? 'pointer'
+                                : undefined,
+                            display: 'flex',
+                            flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
+                            overflow: columnDefType === 'data' ? 'hidden' : undefined,
+                            pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
+                                ? `${headerPL}rem`
+                                : undefined,
+                        }, children: [jsx(Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
+                                    '&:hover': {
+                                        textOverflow: 'clip',
+                                    },
+                                    minWidth: `${Math.min((_c = (_b = columnDef.header) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0, 5)}ch`,
+                                    overflow: columnDefType === 'data' ? 'hidden' : undefined,
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: ((_f = (_d = columnDef.header) === null || _d === void 0 ? void 0 : _d.length) !== null && _f !== void 0 ? _f : 0) < 20 ? 'nowrap' : 'normal',
+                                }, title: columnDefType === 'data' ? columnDef.header : undefined, children: headerElement }), column.getCanSort() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxs(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' }, children: [showDragHandle && (jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
+                                    current: tableHeadCellRefs.current[column.id],
+                                } })), showColumnActions && (jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] })), columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
+};
+
+const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
+    const { options: { layoutMode, muiTableHeadRowProps }, } = table;
+    const tableRowProps = parseFromValuesOrFunc(muiTableHeadRowProps, {
+        headerGroup,
+        table,
+    });
+    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
+                const header = virtualColumns
+                    ? headerGroup.headers[headerOrVirtualHeader.index]
+                    : headerOrVirtualHeader;
+                return (jsx(MRT_TableHeadCell, { header: header, table: table }, header.id));
+            }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
-const useMaterialReactTable = (tableOptions) => {
-    const parsedTableOptions = useMRT_TableOptions(tableOptions);
-    const tableInstance = useMRT_TableInstance(parsedTableOptions);
-    return tableInstance;
+const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
+    const { getHeaderGroups, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps }, refs: { tableHeadRef }, } = table;
+    const { isFullScreen } = getState();
+    const tableHeadProps = parseFromValuesOrFunc(muiTableHeadProps, { table });
+    const stickyHeader = enableStickyHeader || isFullScreen;
+    return (jsx(TableHead, Object.assign({}, tableHeadProps, { ref: (ref) => {
+            tableHeadRef.current = ref;
+            if (tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.ref) {
+                // @ts-ignore
+                tableHeadProps.ref.current = ref;
+            }
+        }, sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, parseFromValuesOrFunc(tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx, theme))), children: getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id))) })));
 };
 
-const MRT_GlobalFilterTextField = ({ table, }) => {
-    var _a;
-    const { getState, setGlobalFilter, options: { enableGlobalFilterModes, icons: { SearchIcon, CloseIcon }, localization, manualFiltering, muiSearchTextFieldProps, }, refs: { searchInputRef }, } = table;
-    const { globalFilter, showGlobalFilter } = getState();
-    const textFieldProps = parseFromValuesOrFunc(muiSearchTextFieldProps, {
+const MRT_Table = ({ table, }) => {
+    var _a, _b, _c, _d;
+    const { getFlatHeaders, getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, columns, enableColumnPinning, enableColumnResizing, enableColumnVirtualization, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, refs: { tableContainerRef }, } = table;
+    const { columnPinning, columnSizing, columnSizingInfo, columnVisibility, isFullScreen, } = getState();
+    const tableProps = parseFromValuesOrFunc(muiTableProps, { table });
+    const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, { table });
+    const columnSizeVars = useMemo(() => {
+        const headers = getFlatHeaders();
+        const colSizes = {};
+        for (let i = 0; i < headers.length; i++) {
+            const header = headers[i];
+            const colSize = header.getSize();
+            colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+            colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
+        }
+        return colSizes;
+    }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
+    //get first 16 column widths and average them
+    const averageColumnWidth = useMemo(() => {
+        var _a, _b, _c, _d;
+        if (!enableColumnVirtualization)
+            return 0;
+        const columnsWidths = (_d = (_c = (_b = (_a = table
+            .getRowModel()
+            .rows[0]) === null || _a === void 0 ? void 0 : _a.getCenterVisibleCells()) === null || _b === void 0 ? void 0 : _b.slice(0, 16)) === null || _c === void 0 ? void 0 : _c.map((cell) => cell.column.getSize() * 1.2)) !== null && _d !== void 0 ? _d : [];
+        return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
+    }, [table.getRowModel().rows, columnPinning, columnVisibility]);
+    const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnVirtualization && enableColumnPinning
+        ? [
+            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
+            table
+                .getRightLeafColumns()
+                .map((c) => table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1),
+        ]
+        : [[], []], [columnPinning, enableColumnVirtualization, enableColumnPinning]);
+    const columnVirtualizer = enableColumnVirtualization
+        ? useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: useCallback((range) => [
+                ...new Set([
+                    ...leftPinnedIndexes,
+                    ...defaultRangeExtractor(range),
+                    ...rightPinnedIndexes,
+                ]),
+            ], [leftPinnedIndexes, rightPinnedIndexes]) }, columnVirtualizerProps))
+        : undefined;
+    if (columnVirtualizerInstanceRef && columnVirtualizer) {
+        columnVirtualizerInstanceRef.current = columnVirtualizer;
+    }
+    const virtualColumns = columnVirtualizer
+        ? columnVirtualizer.getVirtualItems()
+        : undefined;
+    let virtualPaddingLeft;
+    let virtualPaddingRight;
+    if (columnVirtualizer && (virtualColumns === null || virtualColumns === void 0 ? void 0 : virtualColumns.length)) {
+        virtualPaddingLeft = (_b = (_a = virtualColumns[leftPinnedIndexes.length]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0;
+        virtualPaddingRight =
+            columnVirtualizer.getTotalSize() -
+                ((_d = (_c = virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes.length]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0);
+    }
+    const props = {
         table,
-    });
-    const isMounted = useRef(false);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [searchValue, setSearchValue] = useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
-    const handleChangeDebounced = useCallback(debounce((event) => {
-        var _a;
-        setGlobalFilter((_a = event.target.value) !== null && _a !== void 0 ? _a : undefined);
-    }, manualFiltering ? 500 : 250), []);
-    const handleChange = (event) => {
-        setSearchValue(event.target.value);
-        handleChangeDebounced(event);
+        virtualColumns,
+        virtualPaddingLeft,
+        virtualPaddingRight,
     };
-    const handleGlobalFilterMenuOpen = (event) => {
-        setAnchorEl(event.currentTarget);
+    return (jsx(Fragment, { children: jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, props))] })) }));
+};
+
+const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
+    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowCancel, onEditingRowSave, }, refs: { editInputRefs }, setCreatingRow, setEditingRow, } = table;
+    const { creatingRow, editingRow, isSaving } = getState();
+    const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
+    const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
+    const handleCancel = () => {
+        if (isCreating) {
+            onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
+            setCreatingRow(null);
+        }
+        else if (isEditing) {
+            onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
+            setEditingRow(null);
+        }
+        row._valuesCache = {}; //reset values cache
     };
-    const handleClear = () => {
-        setSearchValue('');
-        setGlobalFilter(undefined);
+    const handleSubmitRow = () => {
+        var _a;
+        //look for auto-filled input values
+        (_a = Object.values(editInputRefs === null || editInputRefs === void 0 ? void 0 : editInputRefs.current)
+            .filter((inputRef) => { var _a, _b; return row.id === ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.name) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b[0]); })) === null || _a === void 0 ? void 0 : _a.forEach((input) => {
+            if (input.value !== undefined &&
+                Object.hasOwn(row === null || row === void 0 ? void 0 : row._valuesCache, input.name)) {
+                // @ts-ignore
+                row._valuesCache[input.name] = input.value;
+            }
+        });
+        if (isCreating)
+            onCreatingRowSave === null || onCreatingRowSave === void 0 ? void 0 : onCreatingRowSave({
+                exitCreatingMode: () => setCreatingRow(null),
+                row,
+                table,
+                values: row._valuesCache,
+            });
+        else if (isEditing) {
+            onEditingRowSave === null || onEditingRowSave === void 0 ? void 0 : onEditingRowSave({
+                exitEditingMode: () => setEditingRow(null),
+                row,
+                table,
+                values: row === null || row === void 0 ? void 0 : row._valuesCache,
+            });
+        }
     };
-    useEffect(() => {
-        if (isMounted.current) {
-            if (globalFilter === undefined) {
-                handleClear();
+    return (jsx(Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' }, children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), jsx(Tooltip, { arrow: true, title: localization.save, children: jsx(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsx(CircularProgress, { size: 18 }) : jsx(SaveIcon, {}) }) })] })) : (jsxs(Fragment, { children: [jsx(Button, { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxs(Button, { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsx(CircularProgress, { color: "inherit", size: 18 }), localization.save] })] })) }));
+};
+
+const MRT_EditRowModal = ({ open, table, }) => {
+    var _a;
+    const { getState, options: { localization, muiCreateRowModalProps, muiEditRowModalProps, onCreatingRowCancel, onEditingRowCancel, renderCreateRowModalContent, renderEditRowModalContent, }, setCreatingRow, setEditingRow, } = table;
+    const { creatingRow, editingRow } = getState();
+    const row = (creatingRow !== null && creatingRow !== void 0 ? creatingRow : editingRow);
+    const dialogProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditRowModalProps, { row, table })), (creatingRow &&
+        parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })));
+    const internalEditComponents = row
+        .getAllCells()
+        .filter((cell) => cell.column.columnDef.columnDefType === 'data')
+        .map((cell) => (jsx(MRT_EditCellTextField, { cell: cell, table: table }, cell.id)));
+    return (jsx(Dialog, Object.assign({ fullWidth: true, maxWidth: "xs", onClose: (event, reason) => {
+            var _a;
+            if (creatingRow) {
+                onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
+                setCreatingRow(null);
             }
             else {
-                setSearchValue(globalFilter);
+                onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
+                setEditingRow(null);
             }
-        }
-        isMounted.current = true;
-    }, [globalFilter]);
-    return (jsxs(Collapse, { in: showGlobalFilter, orientation: "horizontal", unmountOnExit: true, mountOnEnter: true, children: [jsx(TextField, Object.assign({ placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
-                    startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment, { position: "start", children: jsx(Tooltip, { arrow: true, title: localization.changeSearchMode, children: jsx(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(SearchIcon, {}) }) }) })) : (jsx(SearchIcon, { style: { marginRight: '4px' } })),
-                    endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsx(CloseIcon, {}) }) }) }) })),
-                } }, textFieldProps, { inputRef: (inputRef) => {
-                    searchInputRef.current = inputRef;
-                    if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
-                        textFieldProps.inputRef = inputRef;
-                    }
-                } })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table, onSelect: handleClear })] }));
+            row._valuesCache = {}; //reset values cache
+            (_a = dialogProps.onClose) === null || _a === void 0 ? void 0 : _a.call(dialogProps, event, reason);
+        }, open: open }, dialogProps, { children: (_a = ((creatingRow &&
+            (renderCreateRowModalContent === null || renderCreateRowModalContent === void 0 ? void 0 : renderCreateRowModalContent({
+                internalEditComponents,
+                row,
+                table,
+            }))) ||
+            (renderEditRowModalContent === null || renderEditRowModalContent === void 0 ? void 0 : renderEditRowModalContent({
+                internalEditComponents,
+                row,
+                table,
+            })))) !== null && _a !== void 0 ? _a : (jsxs(Fragment, { children: [jsx(DialogTitle, { sx: { textAlign: 'center' }, children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
+                                gap: '24px',
+                                paddingTop: '16px',
+                                width: '100%',
+                            }, children: internalEditComponents }) }) }), jsx(DialogActions, { sx: { p: '1.25rem' }, children: jsx(MRT_EditActionButtons, { row: row, table: table, variant: "text" }) })] })) })));
+};
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+const MRT_TableContainer = ({ table, }) => {
+    const { getState, options: { createDisplayMode, editDisplayMode, enableStickyHeader, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
+    const { creatingRow, editingRow, isFullScreen } = getState();
+    const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
+    const tableContainerProps = parseFromValuesOrFunc(muiTableContainerProps, {
+        table,
+    });
+    useIsomorphicLayoutEffect(() => {
+        var _a, _b, _c, _d;
+        const topToolbarHeight = typeof document !== 'undefined'
+            ? (_b = (_a = topToolbarRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0
+            : 0;
+        const bottomToolbarHeight = typeof document !== 'undefined'
+            ? (_d = (_c = bottomToolbarRef === null || bottomToolbarRef === void 0 ? void 0 : bottomToolbarRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0
+            : 0;
+        setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
+    });
+    const createModalOpen = createDisplayMode === 'modal' && creatingRow;
+    const editModalOpen = editDisplayMode === 'modal' && editingRow;
+    return (jsxs(TableContainer, Object.assign({}, tableContainerProps, { ref: (node) => {
+            if (node) {
+                tableContainerRef.current = node;
+                if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
+                    //@ts-ignore
+                    tableContainerProps.ref.current = node;
+                }
+            }
+        }, style: Object.assign({ maxHeight: isFullScreen
+                ? `calc(100vh - ${totalToolbarHeight}px)`
+                : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style), sx: (theme) => (Object.assign({ maxHeight: enableStickyHeader
+                ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
+                : undefined, maxWidth: '100%', overflow: 'auto' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), children: [jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsx(MRT_EditRowModal, { open: true, table: table }))] })));
 };
 
 const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
-    const { options: { muiLinearProgressProps }, getState, } = table;
+    const { getState, options: { muiLinearProgressProps }, } = table;
     const { isLoading, showProgressBars } = getState();
     const linearProgressProps = parseFromValuesOrFunc(muiLinearProgressProps, {
         isTopToolbar,
         table,
     });
-    return (jsx(Collapse, { in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
+    return (jsx(Collapse, { in: isLoading || showProgressBars, mountOnEnter: true, sx: {
             bottom: isTopToolbar ? 0 : undefined,
             position: 'absolute',
             top: !isTopToolbar ? 0 : undefined,
             width: '100%',
-        }, children: jsx(LinearProgress, Object.assign({ "aria-label": "Loading", "aria-busy": "true", sx: { position: 'relative' } }, linearProgressProps)) }));
+        }, unmountOnExit: true, children: jsx(LinearProgress, Object.assign({ "aria-busy": "true", "aria-label": "Loading", sx: { position: 'relative' } }, linearProgressProps)) }));
 };
 
-const MRT_TablePagination = ({ table, position = 'bottom', }) => {
-    const { getPrePaginationRowModel, getState, setPageIndex, setPageSize, options: { muiTablePaginationProps, enableToolbarInternalActions, localization, rowCount, }, } = table;
-    const { pagination: { pageSize = 10, pageIndex = 0 }, showGlobalFilter, } = getState();
+const MRT_TablePagination = ({ position = 'bottom', table, }) => {
+    const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, localization, muiTablePaginationProps, 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, {
@@ -2171,18 +2209,18 @@ 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: 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': {
-                m: '0 -1px',
-            }, '&. MuiInputBase-root': {
+                    : 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-select': {
+            }, '& .MuiTablePagination-actions': {
                 m: '0 1px',
             }, '& .MuiTablePagination-displayedRows': {
                 m: '0 1px',
-            }, '& .MuiTablePagination-actions': {
+            }, '& .MuiTablePagination-selectLabel': {
+                m: '0 -1px',
+            }, '& .MuiTablePagination-toolbar': {
+                alignItems: 'center',
+                display: 'flex',
+            }, '&. MuiInputBase-root': {
                 m: '0 1px',
             }, mt: position === 'top' &&
                 enableToolbarInternalActions &&
@@ -2193,7 +2231,7 @@ const MRT_TablePagination = ({ table, position = 'bottom', }) => {
 
 const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
     var _a, _b;
-    const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { localization, muiToolbarAlertBannerProps, muiToolbarAlertBannerChipProps, positionToolbarAlertBanner, rowCount, }, } = table;
+    const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { localization, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, rowCount, }, } = table;
     const { grouping, showAlertBanner } = getState();
     const alertProps = parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
         table,
@@ -2205,24 +2243,69 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
         ? (_b = (_a = localization.selectedCountOfRowCountRowsSelected) === null || _a === void 0 ? void 0 : _a.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _b === void 0 ? void 0 : _b.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
         : null;
     const groupedByMessage = grouping.length > 0 ? (jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxs(Fragment$1, { children: [index > 0 ? localization.thenBy : '', jsx(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
-    return (jsx(Collapse, { in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0, children: jsxs(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, p: 0, position: 'relative', mb: stackAlertBanner
+    return (jsx(Collapse, { in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0, children: jsxs(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, mb: stackAlertBanner
                     ? 0
                     : positionToolbarAlertBanner === 'bottom'
                         ? '-1rem'
-                        : undefined, right: 0, top: 0, width: '100%', zIndex: 2 }, parseFromValuesOrFunc(alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx, theme))), children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsx(AlertTitle, { children: alertProps.title }), jsxs(Box, { sx: { p: '0.5rem 1rem' }, children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (jsx("br", {})), selectMessage, selectMessage && groupedByMessage && jsx("br", {}), groupedByMessage] })] })) }));
+                        : undefined, p: 0, position: 'relative', right: 0, top: 0, width: '100%', zIndex: 2 }, parseFromValuesOrFunc(alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx, theme))), children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsx(AlertTitle, { children: alertProps.title }), jsxs(Box, { sx: { p: '0.5rem 1rem' }, children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (jsx("br", {})), selectMessage, selectMessage && groupedByMessage && jsx("br", {}), groupedByMessage] })] })) }));
+};
+
+const MRT_ToolbarDropZone = ({ table, }) => {
+    var _a, _b;
+    const { getState, options: { enableGrouping, localization }, setHoveredColumn, setShowToolbarDropZone, } = table;
+    const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } = getState();
+    const handleDragEnter = (_event) => {
+        setHoveredColumn({ id: 'drop-zone' });
+    };
+    useEffect(() => {
+        var _a;
+        if (((_a = table.options.state) === null || _a === void 0 ? void 0 : _a.showToolbarDropZone) !== undefined) {
+            setShowToolbarDropZone(!!enableGrouping &&
+                !!draggingColumn &&
+                draggingColumn.columnDef.enableGrouping !== false &&
+                !grouping.includes(draggingColumn.id));
+        }
+    }, [enableGrouping, draggingColumn, grouping]);
+    return (jsx(Fade, { in: showToolbarDropZone, children: jsx(Box, { className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter, sx: (theme) => ({
+                alignItems: 'center',
+                backdropFilter: 'blur(4px)',
+                backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
+                border: `dashed ${theme.palette.info.main} 2px`,
+                boxSizing: 'border-box',
+                display: 'flex',
+                height: '100%',
+                justifyContent: 'center',
+                position: 'absolute',
+                width: '100%',
+                zIndex: 4,
+            }), children: jsx(Typography, { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '') }) }) }));
 };
 
-const MRT_ToggleFullScreenButton = (_a) => {
-    var _b;
-    var { table } = _a, rest = __rest(_a, ["table"]);
-    const { getState, options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization, }, setIsFullScreen, } = table;
-    const { isFullScreen } = getState();
-    const [tooltipOpened, setTooltipOpened] = useState(false);
-    const handleToggleFullScreen = () => {
-        setTooltipOpened(false);
-        setIsFullScreen(!isFullScreen);
-    };
-    return (jsx(Tooltip, { open: tooltipOpened, arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
 const MRT_ColumnPinningButtons = ({ column, table, }) => {
@@ -2237,9 +2320,9 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
                             } }) }) })] })) }));
 };
 
-const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, table, }) => {
+const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, setHoveredColumn, table, }) => {
     var _a;
-    const { getState, options: { enableColumnOrdering, enableHiding, enableColumnPinning, localization, }, setColumnOrder, } = table;
+    const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, }, setColumnOrder, } = table;
     const { columnOrder } = getState();
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -2275,17 +2358,17 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
             setHoveredColumn(column);
         }
     };
-    return (jsxs(Fragment, { children: [jsx(MenuItem, { disableRipple: true, ref: menuItemRef, onDragEnter: handleDragEnter, sx: (theme) => ({
+    return (jsxs(Fragment, { children: [jsx(MenuItem, { disableRipple: true, onDragEnter: handleDragEnter, ref: menuItemRef, sx: (theme) => ({
                     alignItems: 'center',
                     justifyContent: 'flex-start',
                     my: 0,
                     opacity: isDragging ? 0.5 : 1,
-                    outlineOffset: '-2px',
                     outline: isDragging
                         ? `2px dashed ${theme.palette.divider}`
                         : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
                             ? `2px dashed ${theme.palette.primary.main}`
                             : 'none',
+                    outlineOffset: '-2px',
                     pl: `${(column.depth + 0.5) * 2}rem`,
                     py: '6px',
                 }), children: jsxs(Box, { sx: {
@@ -2296,19 +2379,19 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
                             enableColumnOrdering &&
                             !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
                             (columnDef.enableColumnOrdering !== false ? (jsx(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (jsx(Box, { sx: { width: '28px' } }))), enableColumnPinning &&
-                            (column.getCanPin() ? (jsx(MRT_ColumnPinningButtons, { column: column, table: table })) : (jsx(Box, { sx: { width: '70px' } }))), enableHiding ? (jsx(FormControlLabel, { componentsProps: {
+                            (column.getCanPin() ? (jsx(MRT_ColumnPinningButtons, { column: column, table: table })) : (jsx(Box, { sx: { width: '70px' } }))), enableHiding ? (jsx(FormControlLabel, { checked: switchChecked, componentsProps: {
                                 typography: {
                                     sx: {
                                         mb: 0,
                                         opacity: columnDefType !== 'display' ? 1 : 0.5,
                                     },
                                 },
-                            }, checked: switchChecked, control: jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility, children: jsx(Switch, {}) }), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsx(Typography, { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) }), (_a = column.columns) === null || _a === void 0 ? void 0 : _a.map((c, i) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
+                            }, control: jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility, children: jsx(Switch, {}) }), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsx(Typography, { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) }), (_a = column.columns) === null || _a === void 0 ? void 0 : _a.map((c, i) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
 };
 
 const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, }) => {
-    const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, toggleAllColumnsVisible, options: { enableColumnOrdering, enableHiding, enableColumnPinning, localization, }, } = table;
-    const { density, columnOrder, columnPinning } = getState();
+    const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, }, toggleAllColumnsVisible, } = table;
+    const { columnOrder, columnPinning, density } = getState();
     const hideAllColumns = () => {
         getAllLeafColumns()
             .filter((col) => col.columnDef.enableHiding !== false)
@@ -2334,9 +2417,9 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, }) => {
         getRightLeafColumns(),
     ]);
     const [hoveredColumn, setHoveredColumn] = useState(null);
-    return (jsxs(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+    return (jsxs(Menu, { MenuListProps: {
             dense: density === 'compact',
-        }, children: [jsxs(Box, { sx: {
+        }, anchorEl: anchorEl, onClose: () => setAnchorEl(null), open: !!anchorEl, children: [jsxs(Box, { sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
                     p: '0.5rem',
@@ -2382,6 +2465,19 @@ const MRT_ToggleFiltersButton = (_a) => {
     return (jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters, children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined, children: showColumnFilters ? jsx(FilterListOffIcon, {}) : jsx(FilterListIcon, {}) })) }));
 };
 
+const MRT_ToggleFullScreenButton = (_a) => {
+    var _b;
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getState, options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization, }, setIsFullScreen, } = table;
+    const { isFullScreen } = getState();
+    const [tooltipOpened, setTooltipOpened] = useState(false);
+    const handleToggleFullScreen = () => {
+        setTooltipOpened(false);
+        setIsFullScreen(!isFullScreen);
+    };
+    return (jsx(Tooltip, { arrow: true, open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
+};
+
 const MRT_ToggleGlobalFilterButton = (_a) => {
     var _b, _c;
     var { table } = _a, rest = __rest(_a, ["table"]);
@@ -2396,7 +2492,7 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
 
 const MRT_ToolbarInternalButtons = ({ table, }) => {
     var _a;
-    const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enableColumnPinning, initialState, renderToolbarInternalActions, }, } = table;
+    const { options: { columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableColumnPinning, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, initialState, renderToolbarInternalActions, }, } = table;
     return (jsx(Box, { sx: {
             alignItems: 'center',
             display: 'flex',
@@ -2405,38 +2501,56 @@ const MRT_ToolbarInternalButtons = ({ table, }) => {
             table,
         })) !== null && _a !== void 0 ? _a : (jsxs(Fragment, { children: [enableFilters &&
                     enableGlobalFilter &&
-                    !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters && enableColumnFilters && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_ToggleFullScreenButton, { table: table }))] })) }));
+                    !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters &&
+                    enableColumnFilters &&
+                    columnFilterDisplayMode !== 'popover' && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_ToggleFullScreenButton, { table: table }))] })) }));
 };
 
-const MRT_ToolbarDropZone = ({ table, }) => {
-    var _a, _b;
-    const { getState, options: { enableGrouping, localization }, setHoveredColumn, setShowToolbarDropZone, } = table;
-    const { draggingColumn, hoveredColumn, grouping, showToolbarDropZone } = getState();
-    const handleDragEnter = (_event) => {
-        setHoveredColumn({ id: 'drop-zone' });
+const MRT_GlobalFilterTextField = ({ table, }) => {
+    var _a;
+    const { getState, options: { enableGlobalFilterModes, icons: { CloseIcon, SearchIcon }, localization, manualFiltering, muiSearchTextFieldProps, }, refs: { searchInputRef }, setGlobalFilter, } = table;
+    const { globalFilter, showGlobalFilter } = getState();
+    const textFieldProps = parseFromValuesOrFunc(muiSearchTextFieldProps, {
+        table,
+    });
+    const isMounted = useRef(false);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [searchValue, setSearchValue] = useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
+    const handleChangeDebounced = useCallback(debounce((event) => {
+        var _a;
+        setGlobalFilter((_a = event.target.value) !== null && _a !== void 0 ? _a : undefined);
+    }, manualFiltering ? 500 : 250), []);
+    const handleChange = (event) => {
+        setSearchValue(event.target.value);
+        handleChangeDebounced(event);
+    };
+    const handleGlobalFilterMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClear = () => {
+        setSearchValue('');
+        setGlobalFilter(undefined);
     };
     useEffect(() => {
-        var _a;
-        if (((_a = table.options.state) === null || _a === void 0 ? void 0 : _a.showToolbarDropZone) !== undefined) {
-            setShowToolbarDropZone(!!enableGrouping &&
-                !!draggingColumn &&
-                draggingColumn.columnDef.enableGrouping !== false &&
-                !grouping.includes(draggingColumn.id));
+        if (isMounted.current) {
+            if (globalFilter === undefined) {
+                handleClear();
+            }
+            else {
+                setSearchValue(globalFilter);
+            }
         }
-    }, [enableGrouping, draggingColumn, grouping]);
-    return (jsx(Fade, { in: showToolbarDropZone, children: jsx(Box, { className: "Mui-ToolbarDropZone", sx: (theme) => ({
-                alignItems: 'center',
-                backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
-                backdropFilter: 'blur(4px)',
-                boxSizing: 'border-box',
-                border: `dashed ${theme.palette.info.main} 2px`,
-                display: 'flex',
-                justifyContent: 'center',
-                height: '100%',
-                position: 'absolute',
-                width: '100%',
-                zIndex: 4,
-            }), onDragEnter: handleDragEnter, children: jsx(Typography, { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '') }) }) }));
+        isMounted.current = true;
+    }, [globalFilter]);
+    return (jsxs(Collapse, { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsx(TextField, Object.assign({ InputProps: {
+                    endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsx(CloseIcon, {}) }) }) }) })),
+                    startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment, { position: "start", children: jsx(Tooltip, { arrow: true, title: localization.changeSearchMode, children: jsx(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(SearchIcon, {}) }) }) })) : (jsx(SearchIcon, { style: { marginRight: '4px' } })),
+                }, onChange: handleChange, placeholder: localization.search, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard" }, textFieldProps, { inputRef: (inputRef) => {
+                    searchInputRef.current = inputRef;
+                    if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
+                        textFieldProps.inputRef = inputRef;
+                    }
+                } })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, onSelect: handleClear, setAnchorEl: setAnchorEl, table: table })] }));
 };
 
 const commonToolbarStyles = ({ theme }) => ({
@@ -2480,7 +2594,7 @@ const MRT_TopToolbar = ({ table, }) => {
                             justifyContent: 'flex-end',
                         }, children: [enableGlobalFilter && positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, { table: table })), jsx(MRT_ToolbarInternalButtons, { table: table })] })) : (enableGlobalFilter &&
                         positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, { table: table })))] }), enablePagination &&
-                ['top', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { table: table, position: "top" })), jsx(MRT_LinearProgressBar, { isTopToolbar: true, table: table })] })));
+                ['both', 'top'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { position: "top", table: table })), jsx(MRT_LinearProgressBar, { isTopToolbar: true, table: table })] })));
 };
 
 const MRT_BottomToolbar = ({ table, }) => {
@@ -2511,855 +2625,775 @@ const MRT_BottomToolbar = ({ table, }) => {
                             right: 0,
                             top: 0,
                         }, children: enablePagination &&
-                            ['bottom', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { table: table, position: "bottom" })) })] })] })));
-};
-
-const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
-    var _a;
-    const { options: { icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps, }, } = table;
-    const { column } = header;
-    const { columnDef } = column;
-    const [anchorEl, setAnchorEl] = useState(null);
-    const handleClick = (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        setAnchorEl(event.currentTarget);
-    };
-    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnActionsButtonProps, {
-        column,
-        table,
-    })), parseFromValuesOrFunc(columnDef.muiColumnActionsButtonProps, {
-        column,
-        table,
-    }));
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85) translateX(-4px)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
-                            opacity: 1,
-                        } }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsx(MoreVertIcon, {}) })) }), anchorEl && (jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
+                            ['both', 'bottom'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { position: "bottom", table: table })) })] })] })));
 };
 
-const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { options: { enableColumnFilterModes, columnFilterModeOptions, icons: { FilterListIcon, CloseIcon }, localization, manualFiltering, muiFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
-    const { column } = header;
-    const { columnDef } = column;
-    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' ||
-        (!isSelectFilter && !isMultiSelectFilter);
-    const currentFilterOption = columnDef._filterFn;
-    const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
-        ? //@ts-ignore
-            localization[`filter${((_b = (_a = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt) === null || _a === void 0 ? void 0 : _a.call(currentFilterOption, 0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
-                (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
-        : '';
-    const filterPlaceholder = !isRangeFilter
-        ? (_c = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.placeholder) !== null && _c !== void 0 ? _c : (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))
-        : rangeFilterIndex === 0
-            ? localization.min
-            : rangeFilterIndex === 1
-                ? localization.max
-                : '';
-    const allowedColumnFilterOptions = (_e = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _e !== void 0 ? _e : 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]) || []
-                : (_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;
-        if (isRangeFilter) {
-            column.setFilterValue((old) => {
-                const newFilterValues = old !== null && old !== void 0 ? old : ['', ''];
-                newFilterValues[rangeFilterIndex] = value;
-                return newFilterValues;
-            });
-        }
-        else {
-            column.setFilterValue(value !== null && value !== void 0 ? value : undefined);
-        }
-    }, isTextboxFilter ? (manualFiltering ? 400 : 200) : 1), []);
-    const handleChange = (event) => {
-        setFilterValue(event.target.value);
-        handleChangeDebounced(event);
-    };
-    const handleClear = () => {
-        if (isMultiSelectFilter) {
-            setFilterValue([]);
-            column.setFilterValue([]);
-        }
-        else if (isRangeFilter) {
-            setFilterValue('');
-            column.setFilterValue((old) => {
-                const newFilterValues = (Array.isArray(old) && old) || ['', ''];
-                newFilterValues[rangeFilterIndex] = undefined;
-                return newFilterValues;
-            });
-        }
-        else {
-            setFilterValue('');
-            column.setFilterValue(undefined);
-        }
-    };
-    const handleClearEmptyFilterChip = () => {
-        setFilterValue('');
-        column.setFilterValue(undefined);
-        setColumnFilterFns((prev) => {
-            var _a;
-            return (Object.assign(Object.assign({}, prev), { [header.id]: (_a = allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions[0]) !== null && _a !== void 0 ? _a : 'fuzzy' }));
-        });
-    };
-    const handleFilterMenuOpen = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const isMounted = useRef(false);
-    useEffect(() => {
-        if (isMounted.current) {
-            const filterValue = column.getFilterValue();
-            if (filterValue === undefined) {
-                handleClear();
-            }
-            else if (isRangeFilter && rangeFilterIndex !== undefined) {
-                setFilterValue(filterValue[rangeFilterIndex]);
+const MRT_TablePaper = ({ table, }) => {
+    var _a, _b;
+    const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
+    const { isFullScreen } = getState();
+    const tablePaperProps = parseFromValuesOrFunc(muiTablePaperProps, { table });
+    return (jsxs(Paper, Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
+            tablePaperRef.current = ref;
+            if (tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.ref) {
+                //@ts-ignore
+                tablePaperProps.ref.current = ref;
             }
-            else {
-                setFilterValue(filterValue);
+        }, style: Object.assign(Object.assign({}, (isFullScreen
+            ? {
+                bottom: 0,
+                height: '100vh',
+                left: 0,
+                margin: 0,
+                maxHeight: '100vh',
+                maxWidth: '100vw',
+                padding: 0,
+                position: 'fixed',
+                right: 0,
+                top: 0,
+                width: '100vw',
+                zIndex: 10,
             }
-        }
-        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 (jsxs(Fragment, { children: [jsxs(TextField, Object.assign({ fullWidth: true, inputProps: {
-                    disabled: !!filterChipLabel,
-                    sx: {
-                        textOverflow: 'ellipsis',
-                        width: filterChipLabel ? 0 : undefined,
-                    },
-                    title: filterPlaceholder,
-                }, helperText: showChangeModeButton ? (jsx("label", { children: localization.filterMode.replace('{filterType}', 
-                    // @ts-ignore
-                    localization[`filter${((_g = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _g === void 0 ? void 0 : _g.toUpperCase()) +
-                        (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, FormHelperTextProps: {
-                    sx: {
-                        fontSize: '0.75rem',
-                        lineHeight: '0.8rem',
-                        whiteSpace: 'nowrap',
-                    },
-                }, margin: "none", placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
-                    ? undefined
-                    : filterPlaceholder, onChange: handleChange, onClick: (e) => e.stopPropagation(), select: isSelectFilter || isMultiSelectFilter, value: filterValue !== null && filterValue !== void 0 ? filterValue : '', variant: "standard", InputProps: {
-                    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, { onDelete: handleClearEmptyFilterChip, label: filterChipLabel }))] })) : null,
-                    endAdornment: !filterChipLabel && (jsx(InputAdornment, { position: "end", 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: '1.75rem',
-                                        width: '1.75rem',
-                                    }, children: jsx(CloseIcon, {}) }) }) }) })),
-                }, 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
-                                    ? option.value === value
-                                    : option === value);
-                                return (jsx(Chip, { label: selectedValue instanceof Object
-                                        ? selectedValue.text
-                                        : selectedValue }, value));
-                            }) }))
-                        : undefined,
-                } }, 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({ p: 0, minWidth: isRangeFilter
-                        ? '100px'
-                        : !filterChipLabel
-                            ? '120px'
-                            : 'auto', width: 'calc(100% + 4px)', mx: '-2px', '& .MuiSelect-icon': {
-                        mr: '1.5rem',
-                    } }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))), children: [(isSelectFilter || isMultiSelectFilter) && (jsx(MenuItem, { divider: true, disabled: 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: {
-                                display: 'flex',
-                                m: 0,
-                                alignItems: 'center',
-                                gap: '0.5rem',
-                            }, 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, table: table, setFilterValue: setFilterValue })] }));
+            : {})), tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), sx: (theme) => (Object.assign({ overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx, theme))), children: [enableTopToolbar &&
+                ((_a = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _a !== void 0 ? _a : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
+                ((_b = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_BottomToolbar, { table: table })))] })));
 };
 
-const MRT_FilterRangeFields = ({ header, table, }) => {
-    return (jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }, children: [jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }), jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })] }));
+const MRT_RowPinButton = ({ pinningPosition, row, table, }) => {
+    const { options: { icons: { CloseIcon, PushPinIcon }, localization, rowPinningDisplayMode, }, } = table;
+    const isPinned = row.getIsPinned();
+    const [tooltipOpened, setTooltipOpened] = useState(false);
+    const handleTogglePin = (event) => {
+        setTooltipOpened(false);
+        event.stopPropagation();
+        row.pin(isPinned ? false : pinningPosition);
+    };
+    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, open: tooltipOpened, title: isPinned ? localization.unpin : localization.pin, children: jsx(IconButton, { "aria-label": localization.pin, onClick: handleTogglePin, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small", sx: {
+                height: '24px',
+                width: '24px',
+            }, children: isPinned ? (jsx(CloseIcon, {})) : (jsx(PushPinIcon, { fontSize: "small", style: {
+                    transform: `rotate(${rowPinningDisplayMode === 'sticky'
+                        ? 135
+                        : pinningPosition === 'top'
+                            ? 180
+                            : 0}deg)`,
+                } })) }) }));
 };
 
-const MRT_FilterCheckbox = ({ column, table, }) => {
-    var _a, _b, _c;
-    const { getState, options: { localization, muiFilterCheckboxProps }, } = table;
+const MRT_TableBodyRowPinButton = ({ row, table, }) => {
+    const { getState, options: { enableRowPinning, rowPinningDisplayMode }, } = table;
     const { density } = getState();
-    const { columnDef } = column;
-    const checkboxProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterCheckboxProps, {
-        column,
-        table,
-    })), parseFromValuesOrFunc(columnDef.muiFilterCheckboxProps, {
-        column,
+    const canPin = parseFromValuesOrFunc(enableRowPinning, row);
+    if (!canPin)
+        return null;
+    if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
+        return (jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: density === 'compact' ? 'row' : 'column',
+            }, children: [jsx(MRT_RowPinButton, { pinningPosition: "top", row: row, table: table }), jsx(MRT_RowPinButton, { pinningPosition: "bottom", row: row, table: table })] }));
+    }
+    return (jsx(MRT_RowPinButton, { pinningPosition: rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top', row: row, table: table }));
+};
+
+const MRT_ExpandAllButton = ({ table, }) => {
+    var _a, _b;
+    const { getCanSomeRowsExpand, getIsAllRowsExpanded, getIsSomeRowsExpanded, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
+    const { density, isLoading } = getState();
+    const iconButtonProps = parseFromValuesOrFunc(muiExpandAllButtonProps, {
         table,
-    }));
-    const filterLabel = (_a = localization.filterByColumn) === null || _a === void 0 ? void 0 : _a.replace('{column}', columnDef.header);
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel, children: jsx(FormControlLabel, { control: jsx(Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', indeterminate: column.getFilterValue() === undefined, color: column.getFilterValue() === undefined ? 'default' : 'primary', size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
-                    var _a;
-                    e.stopPropagation();
-                    (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
-                }, onChange: (e, checked) => {
-                    var _a;
-                    column.setFilterValue(column.getFilterValue() === undefined
-                        ? 'true'
-                        : column.getFilterValue() === 'true'
-                            ? 'false'
-                            : undefined);
-                    (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onChange) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e, checked);
-                }, sx: (theme) => (Object.assign({ height: '2.5rem', width: '2.5rem' }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))) })), disableTypography: true, label: (_c = checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, sx: { color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }, title: undefined }) }));
+    });
+    const isAllRowsExpanded = getIsAllRowsExpanded();
+    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isAllRowsExpanded)
+            ? localization.collapseAll
+            : localization.expandAll, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(KeyboardDoubleArrowDownIcon, { style: {
+                        transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
+                        transition: 'transform 150ms',
+                    } })) })) }) }));
 };
 
-const MRT_FilterRangeSlider = ({ header, table, }) => {
+const MRT_ExpandButton = ({ row, table, }) => {
     var _a, _b;
-    const { options: { localization, muiFilterSliderProps, enableColumnFilterModes }, refs: { filterInputRefs }, } = table;
-    const { column } = header;
-    const { columnDef } = column;
-    const currentFilterOption = columnDef._filterFn;
-    const showChangeModeButton = enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
-    const sliderProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterSliderProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterSliderProps, { column, table }));
-    let [min, max] = sliderProps.min !== undefined && sliderProps.max !== undefined
-        ? [sliderProps.min, sliderProps.max]
-        : (_a = column.getFacetedMinMaxValues()) !== null && _a !== void 0 ? _a : [0, 1];
-    //fix potential TanStack Table bugs where min or max is an array
-    if (Array.isArray(min))
-        min = min[0];
-    if (Array.isArray(max))
-        max = max[0];
-    if (min === null)
-        min = 0;
-    if (max === null)
-        max = 1;
-    const [filterValues, setFilterValues] = useState([min, max]);
-    const columnFilterValue = column.getFilterValue();
-    const isMounted = useRef(false);
-    useEffect(() => {
-        if (isMounted.current) {
-            if (columnFilterValue === undefined) {
-                setFilterValues([min, max]);
-            }
-            else if (Array.isArray(columnFilterValue)) {
-                setFilterValues(columnFilterValue);
-            }
-        }
-        isMounted.current = true;
-    }, [columnFilterValue, min, max]);
-    return (jsxs(Stack, { children: [jsx(Slider, Object.assign({ disableSwap: true, min: min, max: max, onChange: (_event, values) => {
-                    setFilterValues(values);
-                }, onChangeCommitted: (_event, value) => {
-                    if (Array.isArray(value)) {
-                        if (value[0] <= min && value[1] >= max) {
-                            //if the user has selected the entire range, remove the filter
-                            column.setFilterValue(undefined);
-                        }
-                        else {
-                            column.setFilterValue(value);
-                        }
-                    }
-                }, value: filterValues, valueLabelDisplay: "auto" }, sliderProps, { slotProps: {
-                    input: {
-                        ref: (node) => {
-                            var _a, _b;
-                            if (node) {
-                                filterInputRefs.current[`${column.id}-0`] = node;
-                                // @ts-ignore
-                                if ((_b = (_a = sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.slotProps) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.ref) {
-                                    //@ts-ignore
-                                    sliderProps.slotProps.input.ref = node;
-                                }
-                            }
-                        },
-                    },
-                }, sx: (theme) => (Object.assign({ m: 'auto', mt: !showChangeModeButton ? '10px' : '6px', px: '4px', width: 'calc(100% - 8px)' }, parseFromValuesOrFunc(sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx, theme))) })), showChangeModeButton ? (jsx(FormHelperText, { sx: {
-                    m: '-3px -6px',
-                    fontSize: '0.75rem',
-                    lineHeight: '0.8rem',
-                    whiteSpace: 'nowrap',
-                }, children: localization.filterMode.replace('{filterType}', 
-                // @ts-ignore
-                localization[`filter${((_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
-                    (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null] }));
+    const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = table;
+    const { density } = getState();
+    const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
+        row,
+        table,
+    });
+    const canExpand = row.getCanExpand();
+    const isExpanded = row.getIsExpanded();
+    const handleToggleExpand = (event) => {
+        var _a;
+        event.stopPropagation();
+        row.toggleExpanded();
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
+    };
+    return (jsx(Tooltip, { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
+            ? localization.collapse
+            : localization.expand, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(ExpandMoreIcon, { style: {
+                        transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
+                        transition: 'transform 150ms',
+                    } })) })) }) }));
 };
 
-const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
-    const { getState } = table;
-    const { showColumnFilters } = getState();
-    const { column } = header;
-    const { columnDef } = column;
-    return (jsx(Collapse, { in: showColumnFilters, 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' ||
-            ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsx(MRT_FilterTextField, { header: header, table: table })) }));
+const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) => {
+    const { getState, options: { enableEditing, icons: { EditIcon }, localization, renderRowActionMenuItems, }, } = table;
+    const { density } = getState();
+    return (jsxs(Menu, { MenuListProps: {
+            dense: density === 'compact',
+        }, anchorEl: anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl, children: [parseFromValuesOrFunc(enableEditing, row) && (jsx(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
+                closeMenu: () => setAnchorEl(null),
+                row,
+                table,
+            })] }));
 };
 
-const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
-    var _a, _b, _c, _d;
-    const { options: { icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
-    const { column } = header;
-    const { columnDef } = column;
-    const isRangeFilter = ['range', 'ranger-slider'].includes((_a = columnDef.filterVariant) !== null && _a !== void 0 ? _a : '') ||
-        ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
-    const currentFilterOption = columnDef._filterFn;
-    const filterTooltip = localization.filteringByColumn
-        .replace('{column}', String(columnDef.header))
-        .replace('{filterType}', 
-    // @ts-ignore
-    localization[`filter${((_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _b === void 0 ? void 0 : _b.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('" "', '');
-    return (jsx(Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && !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]))), 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) => {
-                        setShowColumnFilters(true);
-                        queueMicrotask(() => {
-                            var _a, _b;
-                            (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus();
-                            (_b = filterInputRefs.current[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.select();
-                        });
-                        event.stopPropagation();
-                    }, size: "small", sx: {
-                        height: '12px',
-                        m: 0,
-                        opacity: 0.8,
-                        p: '2px',
-                        transform: 'scale(0.66)',
-                        width: '12px',
-                    }, children: jsx(FilterAltIcon, {}) }) }) }) }));
+const commonIconButtonStyles = {
+    '&:hover': {
+        opacity: 1,
+    },
+    height: '2rem',
+    ml: '10px',
+    opacity: 0.5,
+    transition: 'opacity 150ms',
+    width: '2rem',
 };
-
-const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
-    const { getState, options: { enableColumnOrdering, muiColumnDragHandleProps }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
-    const { columnDef } = column;
-    const { hoveredColumn, draggingColumn, columnOrder } = getState();
-    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table })), parseFromValuesOrFunc(columnDef.muiColumnDragHandleProps, {
-        column,
-        table,
-    }));
-    const handleDragStart = (event) => {
-        var _a;
-        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
-        setDraggingColumn(column);
-        event.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
+const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
+    const { getState, options: { createDisplayMode, editDisplayMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
+    const { creatingRow, editingRow } = getState();
+    const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
+    const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
+    const showEditActionButtons = (isCreating && createDisplayMode === 'row') ||
+        (isEditing && editDisplayMode === 'row');
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleOpenRowActionMenu = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        setAnchorEl(event.currentTarget);
     };
-    const handleDragEnd = (event) => {
-        var _a;
-        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
-        if ((hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
-            column.toggleGrouping();
-        }
-        else if (enableColumnOrdering &&
-            hoveredColumn &&
-            (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) !== (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)) {
-            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
-        }
-        setDraggingColumn(null);
-        setHoveredColumn(null);
+    const handleStartEditMode = (event) => {
+        event.stopPropagation();
+        setEditingRow(Object.assign({}, row));
+        setAnchorEl(null);
     };
-    return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
+    return (jsx(Fragment, { children: renderRowActions && !showEditActionButtons ? (renderRowActions({ cell, row, table })) : showEditActionButtons ? (jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
+            parseFromValuesOrFunc(enableEditing, row) ? (jsx(Tooltip, { arrow: true, placement: "right", title: localization.edit, children: jsx(IconButton, { "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles, children: jsx(EditIcon, {}) }) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsx(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles, children: jsx(MoreHorizIcon, {}) }) }), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
 };
 
-const MRT_TableHeadCellResizeHandle = ({ header, table, }) => {
+const MRT_SelectCheckbox = ({ row, selectAll, table, }) => {
     var _a;
-    const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
-    const { density } = getState();
-    const { column } = header;
-    return (jsx(Box, { className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
-            setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
-            column.resetSize();
-        }, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
-            cursor: 'col-resize',
-            mr: density === 'compact' ? '-0.75rem' : '-1rem',
-            position: 'absolute',
-            right: '4px',
-            px: '4px',
-            '&:active > hr': {
-                backgroundColor: theme.palette.info.main,
-                opacity: 1,
-            },
-        }), style: {
-            transform: column.getIsResizing() && columnResizeMode === 'onEnd'
-                ? `translateX(${(_a = getState().columnSizingInfo.deltaOffset) !== null && _a !== void 0 ? _a : 0}px)`
-                : undefined,
-        }, children: jsx(Divider, { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
-                borderRadius: '2px',
-                borderWidth: '2px',
-                height: '24px',
-                touchAction: 'none',
-                transition: column.getIsResizing()
-                    ? undefined
-                    : 'all 150ms ease-in-out',
-                userSelect: 'none',
-                zIndex: 4,
-            } }) }));
+    const { getState, options: { enableMultiRowSelection, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, } = table;
+    const { density, isLoading } = getState();
+    const checkboxProps = !row
+        ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
+        : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table });
+    const allRowsSelected = selectAll
+        ? selectAllMode === 'page'
+            ? table.getIsAllPageRowsSelected()
+            : table.getIsAllRowsSelected()
+        : undefined;
+    const commonProps = Object.assign(Object.assign({ checked: selectAll ? allRowsSelected : row === null || row === void 0 ? void 0 : row.getIsSelected(), disabled: isLoading || (row && !row.getCanSelect()), inputProps: {
+            'aria-label': selectAll
+                ? localization.toggleSelectAll
+                : localization.toggleSelectRow,
+        }, onChange: (event) => {
+            event.stopPropagation();
+            row
+                ? row.getToggleSelectedHandler()(event)
+                : selectAllMode === 'all'
+                    ? table.getToggleAllRowsSelectedHandler()(event)
+                    : table.getToggleAllPageRowsSelectedHandler()(event);
+            if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
+                if (row) {
+                    row.pin(!row.getIsPinned() && event.target.checked
+                        ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
+                            ? 'bottom'
+                            : 'top'
+                        : false);
+                }
+                else {
+                    table.setRowPinning({ bottom: [], top: [] });
+                }
+            }
+        }, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
+            var _a;
+            e.stopPropagation();
+            (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
+        }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.5rem', zIndex: 0 }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))), title: undefined });
+    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
+            ? localization.toggleSelectAll
+            : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsx(Radio, Object.assign({}, commonProps))) : (jsx(Checkbox, Object.assign({ indeterminate: selectAll
+                ? table.getIsSomeRowsSelected() && !allRowsSelected
+                : row === null || row === void 0 ? void 0 : row.getIsSomeSelected() }, commonProps))) }));
 };
 
-const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
-    const { getState, options: { icons: { ArrowDownwardIcon }, localization, }, } = table;
-    const { column } = header;
-    const { columnDef } = column;
-    const { sorting } = getState();
-    const sortTooltip = column.getIsSorted()
-        ? column.getIsSorted() === 'desc'
-            ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
-            : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
-        : column.getNextSortingOrder() === 'desc'
-            ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
-            : localization.sortByColumnAsc.replace('{column}', columnDef.header);
-    return (jsx(Tooltip, { arrow: true, placement: "top", title: sortTooltip, children: jsx(Badge, { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsx(TableSortLabel, { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
-                    ? column.getIsSorted()
-                    : undefined, sx: {
-                    flex: '0 0',
-                    width: '2.4ch',
-                    transform: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) !== 'right'
-                        ? 'translateX(-0.5ch)'
-                        : undefined,
-                }, IconComponent: ArrowDownwardIcon, onClick: (e) => {
-                    var _a;
-                    e.stopPropagation();
-                    (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
-                } }) }) }));
+const useMRT_DisplayColumns = ({ columnOrder, creatingRow, grouping, tableOptions, }) => {
+    var _a, _b;
+    return useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        return [
+            ((_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnOrder) !== null && _b !== void 0 ? _b : columnOrder).includes('mrt-row-pin') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_TableBodyRowPinButton, { row: row, table: table })), header: tableOptions.localization.pin, size: 60 }, tableOptions.defaultDisplayColumn), (_c = tableOptions.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-pin']), { id: 'mrt-row-pin' }),
+            ((_e = (_d = tableOptions.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, rowRef, table }) => (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), header: tableOptions.localization.move, size: 60 }, tableOptions.defaultDisplayColumn), (_f = tableOptions.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-drag']), { id: 'mrt-row-drag' }),
+            (((_h = (_g = tableOptions.state) === null || _g === void 0 ? void 0 : _g.columnOrder) !== null && _h !== void 0 ? _h : columnOrder).includes('mrt-row-actions') ||
+                (creatingRow && tableOptions.createDisplayMode === 'row')) && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row, table }) => (jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: tableOptions.localization.actions, size: 70 }, tableOptions.defaultDisplayColumn), (_j = tableOptions.displayColumnDefOptions) === null || _j === void 0 ? void 0 : _j['mrt-row-actions']), { id: 'mrt-row-actions' }),
+            ((_l = (_k = tableOptions.state) === null || _k === void 0 ? void 0 : _k.columnOrder) !== null && _l !== void 0 ? _l : columnOrder).includes('mrt-row-expand') &&
+                showExpandColumn(tableOptions, (_o = (_m = tableOptions.state) === null || _m === void 0 ? void 0 : _m.grouping) !== null && _o !== void 0 ? _o : grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_ExpandButton, { row: row, table: table })), Header: tableOptions.enableExpandAll
+                    ? ({ table }) => jsx(MRT_ExpandAllButton, { table: table })
+                    : null, header: tableOptions.localization.expand, size: 60 }, tableOptions.defaultDisplayColumn), (_p = tableOptions.displayColumnDefOptions) === null || _p === void 0 ? void 0 : _p['mrt-row-expand']), { id: 'mrt-row-expand' }),
+            ((_r = (_q = tableOptions.state) === null || _q === void 0 ? void 0 : _q.columnOrder) !== null && _r !== void 0 ? _r : columnOrder).includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_SelectCheckbox, { row: row, table: table })), Header: tableOptions.enableSelectAll &&
+                    tableOptions.enableMultiRowSelection
+                    ? ({ table }) => jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
+                    : null, header: tableOptions.localization.select, size: 60 }, tableOptions.defaultDisplayColumn), (_s = tableOptions.displayColumnDefOptions) === null || _s === void 0 ? void 0 : _s['mrt-row-select']), { id: 'mrt-row-select' }),
+            ((_u = (_t = tableOptions.state) === null || _t === void 0 ? void 0 : _t.columnOrder) !== null && _u !== void 0 ? _u : columnOrder).includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => tableOptions.localization.rowNumber, header: tableOptions.localization.rowNumbers, size: 60 }, tableOptions.defaultDisplayColumn), (_v = tableOptions.displayColumnDefOptions) === null || _v === void 0 ? void 0 : _v['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
+        ].filter(Boolean);
+    }, [
+        columnOrder,
+        grouping,
+        tableOptions.displayColumnDefOptions,
+        tableOptions.editDisplayMode,
+        tableOptions.enableColumnDragging,
+        tableOptions.enableColumnFilterModes,
+        tableOptions.enableColumnOrdering,
+        tableOptions.enableEditing,
+        tableOptions.enableExpandAll,
+        tableOptions.enableExpanding,
+        tableOptions.enableGrouping,
+        tableOptions.enableRowActions,
+        tableOptions.enableRowDragging,
+        tableOptions.enableRowNumbers,
+        tableOptions.enableRowOrdering,
+        tableOptions.enableRowSelection,
+        tableOptions.enableSelectAll,
+        tableOptions.localization,
+        tableOptions.positionActionsColumn,
+        tableOptions.renderDetailPanel,
+        tableOptions.renderRowActionMenuItems,
+        tableOptions.renderRowActions,
+        (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnOrder,
+        (_b = tableOptions.state) === null || _b === void 0 ? void 0 : _b.grouping,
+    ]);
 };
 
-const MRT_TableHeadCell = ({ header, table, }) => {
-    var _a, _b, _c, _d, _f;
-    const theme = useTheme();
-    const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
-    const { density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
-    const { column } = header;
-    const { columnDef } = column;
-    const { columnDefType } = columnDef;
-    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadCellProps, { column, table })), parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, { column, table }));
-    const showColumnActions = (enableColumnActions || columnDef.enableColumnActions) &&
-        columnDef.enableColumnActions !== false;
-    const showDragHandle = enableColumnDragging !== false &&
-        columnDef.enableColumnDragging !== false &&
-        (enableColumnDragging ||
-            (enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
-            (enableGrouping &&
-                columnDef.enableGrouping !== false &&
-                !grouping.includes(column.id)));
-    const headerPL = useMemo(() => {
-        let pl = 0;
-        if (column.getCanSort())
-            pl++;
-        if (showColumnActions)
-            pl += 1.75;
-        if (showDragHandle)
-            pl += 1.25;
-        return pl;
-    }, [showColumnActions, showDragHandle]);
-    const draggingBorder = useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-        ? `1px dashed ${theme.palette.text.secondary}`
-        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-            ? `2px dashed ${theme.palette.primary.main}`
-            : undefined, [draggingColumn, hoveredColumn]);
-    const draggingBorders = draggingBorder
-        ? {
-            borderLeft: draggingBorder,
-            borderRight: draggingBorder,
-            borderTop: draggingBorder,
+const useMRT_Effects = (table) => {
+    const { getState, options: { enablePagination, rowCount }, } = table;
+    const { globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
+    const isMounted = useRef(false);
+    const initialBodyHeight = useRef();
+    const previousTop = useRef();
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            initialBodyHeight.current = document.body.style.height;
+        }
+    }, []);
+    useEffect(() => {
+        if (isMounted && typeof window !== 'undefined') {
+            if (isFullScreen) {
+                previousTop.current = document.body.getBoundingClientRect().top; //save scroll position
+                document.body.style.height = '100vh'; //hide page scrollbars when table is in full screen mode
+            }
+            else {
+                document.body.style.height = initialBodyHeight.current;
+                if (!previousTop.current)
+                    return;
+                //restore scroll position
+                window.scrollTo({
+                    behavior: 'instant',
+                    top: -1 * previousTop.current,
+                });
+            }
+        }
+        isMounted.current = true;
+    }, [isFullScreen]);
+    //if page index is out of bounds, set it to the last page
+    useEffect(() => {
+        if (!enablePagination || isLoading || showSkeletons)
+            return;
+        const { pageIndex, pageSize } = pagination;
+        const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : table.getPrePaginationRowModel().rows.length;
+        const firstVisibleRowIndex = pageIndex * pageSize;
+        if (firstVisibleRowIndex > totalRowCount) {
+            table.setPageIndex(Math.floor(totalRowCount / pageSize));
         }
-        : undefined;
-    const handleDragEnter = (_e) => {
-        if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
-            setHoveredColumn(null);
+    }, [rowCount, table.getPrePaginationRowModel().rows.length]);
+    //turn off sort when global filter is looking for ranked results
+    const appliedSort = useRef(sorting);
+    useEffect(() => {
+        if (sorting.length) {
+            appliedSort.current = sorting;
         }
-        if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
-            setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
+    }, [sorting]);
+    useEffect(() => {
+        if (!getCanRankRows(table))
+            return;
+        if (globalFilter) {
+            table.setSorting([]);
         }
-    };
-    const headerElement = (_a = parseFromValuesOrFunc(columnDef.Header, {
-        column,
-        header,
-        table,
-    })) !== null && _a !== void 0 ? _a : columnDef.header;
-    return (jsxs(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
-            if (node) {
-                tableHeadCellRefs.current[column.id] = node;
-            }
-        } }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ flexDirection: layoutMode === 'grid' ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
-                ? '0.5rem'
-                : density === 'comfortable'
-                    ? columnDefType === 'display'
-                        ? '0.75rem'
-                        : '1rem'
-                    : columnDefType === 'display'
-                        ? '1rem 1.25rem'
-                        : '1.5rem', pb: columnDefType === 'display'
-                ? 0
-                : showColumnFilters || density === 'compact'
-                    ? '0.4rem'
-                    : '0.6rem', pt: columnDefType === 'group' || density === 'compact'
-                ? '0.25rem'
-                : density === 'comfortable'
-                    ? '.75rem'
-                    : '1.25rem', userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top', zIndex: column.getIsResizing() || (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-                ? 3
-                : column.getIsPinned() && columnDefType !== 'group'
-                    ? 2
-                    : 1 }, getCommonCellStyles({
-            column,
-            header,
-            table,
-            tableCellProps,
-            theme,
-        })), draggingBorders)), children: [header.isPlaceholder ? null : (jsxs(Box, { className: "Mui-TableHeadCell-Content", sx: {
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
-                    justifyContent: columnDefType === 'group' || (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
-                        ? 'center'
-                        : column.getCanResize()
-                            ? 'space-between'
-                            : 'flex-start',
-                    position: 'relative',
-                    width: '100%',
-                }, children: [jsxs(Box, { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
-                            alignItems: 'center',
-                            cursor: column.getCanSort() && columnDefType !== 'group'
-                                ? 'pointer'
-                                : undefined,
-                            display: 'flex',
-                            flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
-                            overflow: columnDefType === 'data' ? 'hidden' : undefined,
-                            pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
-                                ? `${headerPL}rem`
-                                : undefined,
-                        }, children: [jsx(Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
-                                    minWidth: `${Math.min((_c = (_b = columnDef.header) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0, 5)}ch`,
-                                    overflow: columnDefType === 'data' ? 'hidden' : undefined,
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: ((_f = (_d = columnDef.header) === null || _d === void 0 ? void 0 : _d.length) !== null && _f !== void 0 ? _f : 0) < 20 ? 'nowrap' : 'normal',
-                                    '&:hover': {
-                                        textOverflow: 'clip',
-                                    },
-                                }, title: columnDefType === 'data' ? columnDef.header : undefined, children: headerElement }), column.getCanSort() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxs(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' }, children: [showDragHandle && (jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
-                                    current: tableHeadCellRefs.current[column.id],
-                                } })), showColumnActions && (jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] })), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
+        else {
+            table.setSorting(() => appliedSort.current || []);
+        }
+    }, [globalFilter]);
 };
 
-const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    const { options: { layoutMode, muiTableHeadRowProps }, } = table;
-    const tableRowProps = parseFromValuesOrFunc(muiTableHeadRowProps, {
-        headerGroup,
-        table,
+const useMRT_TableInstance = (tableOptions) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
+    const bottomToolbarRef = useRef(null);
+    const editInputRefs = useRef({});
+    const filterInputRefs = useRef({});
+    const searchInputRef = useRef(null);
+    const tableContainerRef = useRef(null);
+    const tableHeadCellRefs = useRef({});
+    const tablePaperRef = useRef(null);
+    const topToolbarRef = useRef(null);
+    const tableHeadRef = useRef(null);
+    const tableFooterRef = useRef(null);
+    const initialState = useMemo(() => {
+        var _a, _b, _c;
+        const initState = (_a = tableOptions.initialState) !== null && _a !== void 0 ? _a : {};
+        initState.columnOrder =
+            (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(tableOptions);
+        initState.globalFilterFn = (_c = tableOptions.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
+        return initState;
+    }, []);
+    const [creatingRow, _setCreatingRow] = useState((_a = initialState.creatingRow) !== null && _a !== void 0 ? _a : null);
+    const [columnFilterFns, setColumnFilterFns] = useState(() => Object.assign({}, ...getAllLeafColumnDefs(tableOptions.columns).map((col) => {
+        var _a, _b, _c, _d;
+        return ({
+            [getColumnId(col)]: col.filterFn instanceof Function
+                ? (_a = col.filterFn.name) !== null && _a !== void 0 ? _a : 'custom'
+                : (_d = (_b = col.filterFn) !== null && _b !== void 0 ? _b : (_c = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _c === void 0 ? void 0 : _c[getColumnId(col)]) !== null && _d !== void 0 ? _d : getDefaultColumnFilterFn(col),
+        });
+    })));
+    const [columnOrder, setColumnOrder] = useState((_b = initialState.columnOrder) !== null && _b !== void 0 ? _b : []);
+    const [density, setDensity] = useState((_c = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _c !== void 0 ? _c : 'comfortable');
+    const [draggingColumn, setDraggingColumn] = useState((_d = initialState.draggingColumn) !== null && _d !== void 0 ? _d : null);
+    const [draggingRow, setDraggingRow] = useState((_e = initialState.draggingRow) !== null && _e !== void 0 ? _e : null);
+    const [editingCell, setEditingCell] = useState((_f = initialState.editingCell) !== null && _f !== void 0 ? _f : null);
+    const [editingRow, setEditingRow] = useState((_g = initialState.editingRow) !== null && _g !== void 0 ? _g : null);
+    const [globalFilterFn, setGlobalFilterFn] = useState((_h = initialState.globalFilterFn) !== null && _h !== void 0 ? _h : 'fuzzy');
+    const [grouping, setGrouping] = useState((_j = initialState.grouping) !== null && _j !== void 0 ? _j : []);
+    const [hoveredColumn, setHoveredColumn] = useState((_k = initialState.hoveredColumn) !== null && _k !== void 0 ? _k : null);
+    const [hoveredRow, setHoveredRow] = useState((_l = initialState.hoveredRow) !== null && _l !== void 0 ? _l : null);
+    const [isFullScreen, setIsFullScreen] = useState((_m = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _m !== void 0 ? _m : false);
+    const [showAlertBanner, setShowAlertBanner] = useState((_p = (_o = tableOptions.initialState) === null || _o === void 0 ? void 0 : _o.showAlertBanner) !== null && _p !== void 0 ? _p : false);
+    const [showColumnFilters, setShowColumnFilters] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _q !== void 0 ? _q : false);
+    const [showGlobalFilter, setShowGlobalFilter] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _r !== void 0 ? _r : false);
+    const [showToolbarDropZone, setShowToolbarDropZone] = useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _s !== void 0 ? _s : false);
+    const displayColumns = useMRT_DisplayColumns({
+        columnOrder,
+        creatingRow,
+        grouping,
+        tableOptions,
     });
-    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
-                const header = virtualColumns
-                    ? headerGroup.headers[headerOrVirtualHeader.index]
-                    : headerOrVirtualHeader;
-                return (jsx(MRT_TableHeadCell, { header: header, table: table }, header.id));
-            }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
-};
-
-const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    const { getHeaderGroups, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps }, refs: { tableHeadRef }, } = table;
-    const { isFullScreen } = getState();
-    const tableHeadProps = parseFromValuesOrFunc(muiTableHeadProps, { table });
-    const stickyHeader = enableStickyHeader || isFullScreen;
-    return (jsx(TableHead, Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, parseFromValuesOrFunc(tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx, theme))), ref: (ref) => {
-            tableHeadRef.current = ref;
-            if (tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.ref) {
-                // @ts-ignore
-                tableHeadProps.ref.current = ref;
-            }
-        }, children: getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id))) })));
-};
-
-const MRT_TableFooterCell = ({ footer, table, }) => {
-    var _a, _b;
-    const { getState, options: { layoutMode, muiTableFooterCellProps }, } = table;
-    const { density } = getState();
-    const { column } = footer;
-    const { columnDef } = column;
-    const { columnDefType } = columnDef;
-    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, { column, table })), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, {
-        column,
-        table,
-    }));
-    return (jsx(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-cell', fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
-                ? '0.5rem'
-                : density === 'comfortable'
-                    ? '1rem'
-                    : '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1 }, getCommonCellStyles({
-            column,
-            table,
-            theme,
-            tableCellProps,
-        }))), children: jsx(Fragment, { children: footer.isPlaceholder
-                ? null
-                : (_b = (_a = parseFromValuesOrFunc(columnDef.Footer, { column, footer, table })) !== null && _a !== void 0 ? _a : columnDef.footer) !== null && _b !== void 0 ? _b : null }) })));
+    const columnDefs = useMemo(() => {
+        var _a, _b, _c;
+        return prepareColumns({
+            aggregationFns: tableOptions.aggregationFns,
+            columnDefs: [...displayColumns, ...tableOptions.columns],
+            columnFilterFns: (_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnFilterFns) !== null && _b !== void 0 ? _b : columnFilterFns,
+            defaultDisplayColumn: (_c = tableOptions.defaultDisplayColumn) !== null && _c !== void 0 ? _c : {},
+            filterFns: tableOptions.filterFns,
+            sortingFns: tableOptions.sortingFns,
+        });
+    }, [
+        columnFilterFns,
+        displayColumns,
+        tableOptions.columns,
+        (_t = tableOptions.state) === null || _t === void 0 ? void 0 : _t.columnFilterFns,
+    ]);
+    const data = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        return (((_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.isLoading) || ((_b = tableOptions.state) === null || _b === void 0 ? void 0 : _b.showSkeletons)) &&
+            !tableOptions.data.length
+            ? [
+                ...Array(((_d = (_c = tableOptions.state) === null || _c === void 0 ? void 0 : _c.pagination) === null || _d === void 0 ? void 0 : _d.pageSize) ||
+                    ((_e = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) === null || _e === void 0 ? void 0 : _e.pageSize) ||
+                    10).fill(null),
+            ].map(() => Object.assign({}, ...getAllLeafColumnDefs(tableOptions.columns).map((col) => ({
+                [getColumnId(col)]: null,
+            }))))
+            : tableOptions.data;
+    }, [
+        tableOptions.data,
+        (_u = tableOptions.state) === null || _u === void 0 ? void 0 : _u.isLoading,
+        (_v = tableOptions.state) === null || _v === void 0 ? void 0 : _v.showSkeletons,
+    ]);
+    //@ts-ignore
+    const table = useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: tableOptions.enableExpanding || tableOptions.enableGrouping
+            ? getExpandedRowModel()
+            : undefined, getFacetedMinMaxValues: tableOptions.enableFacetedValues
+            ? getFacetedMinMaxValues()
+            : undefined, getFacetedRowModel: tableOptions.enableFacetedValues
+            ? getFacetedRowModel()
+            : undefined, getFacetedUniqueValues: tableOptions.enableFacetedValues
+            ? getFacetedUniqueValues()
+            : undefined, getFilteredRowModel: tableOptions.enableColumnFilters ||
+            tableOptions.enableGlobalFilter ||
+            tableOptions.enableFilters
+            ? getFilteredRowModel()
+            : undefined, getGroupedRowModel: tableOptions.enableGrouping
+            ? getGroupedRowModel()
+            : undefined, getPaginationRowModel: tableOptions.enablePagination
+            ? getPaginationRowModel()
+            : undefined, getSortedRowModel: tableOptions.enableSorting
+            ? getSortedRowModel()
+            : undefined, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows, onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping }, tableOptions), { 
+        //@ts-ignore
+        columns: columnDefs, data, globalFilterFn: (_w = tableOptions.filterFns) === null || _w === void 0 ? void 0 : _w[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'], initialState, state: Object.assign({ columnFilterFns,
+            columnOrder,
+            creatingRow,
+            density,
+            draggingColumn,
+            draggingRow,
+            editingCell,
+            editingRow,
+            globalFilterFn,
+            grouping,
+            hoveredColumn,
+            hoveredRow,
+            isFullScreen,
+            showAlertBanner,
+            showColumnFilters,
+            showGlobalFilter,
+            showToolbarDropZone }, tableOptions.state) }));
+    // @ts-ignore
+    table.refs = {
+        // @ts-ignore
+        bottomToolbarRef,
+        editInputRefs,
+        filterInputRefs,
+        // @ts-ignore
+        searchInputRef,
+        // @ts-ignore
+        tableContainerRef,
+        // @ts-ignore
+        tableFooterRef,
+        tableHeadCellRefs,
+        // @ts-ignore
+        tableHeadRef,
+        // @ts-ignore
+        tablePaperRef,
+        // @ts-ignore
+        topToolbarRef,
+    };
+    const setCreatingRow = (row) => {
+        var _a, _b;
+        let _row = row;
+        if (row === true) {
+            _row = createRow(table);
+        }
+        (_b = (_a = tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.onCreatingRowChange) === null || _a === void 0 ? void 0 : _a.call(tableOptions, _row)) !== null && _b !== void 0 ? _b : _setCreatingRow(_row);
+    };
+    table.setCreatingRow = setCreatingRow;
+    table.setColumnFilterFns =
+        (_x = tableOptions.onColumnFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns;
+    table.setDensity = (_y = tableOptions.onDensityChange) !== null && _y !== void 0 ? _y : setDensity;
+    table.setDraggingColumn =
+        (_z = tableOptions.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn;
+    table.setDraggingRow = (_0 = tableOptions.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow;
+    table.setEditingCell = (_1 = tableOptions.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell;
+    table.setEditingRow = (_2 = tableOptions.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow;
+    table.setGlobalFilterFn =
+        (_3 = tableOptions.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn;
+    table.setHoveredColumn =
+        (_4 = tableOptions.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn;
+    table.setHoveredRow = (_5 = tableOptions.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow;
+    table.setIsFullScreen = (_6 = tableOptions.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen;
+    table.setShowAlertBanner =
+        (_7 = tableOptions.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner;
+    table.setShowColumnFilters =
+        (_8 = tableOptions.onShowColumnFiltersChange) !== null && _8 !== void 0 ? _8 : setShowColumnFilters;
+    table.setShowGlobalFilter =
+        (_9 = tableOptions.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter;
+    table.setShowToolbarDropZone =
+        (_10 = tableOptions.onShowToolbarDropZoneChange) !== null && _10 !== void 0 ? _10 : setShowToolbarDropZone;
+    useMRT_Effects(table);
+    return table;
 };
 
-const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    var _a;
-    const { options: { layoutMode, muiTableFooterRowProps }, } = table;
-    // if no content in row, skip row
-    if (!((_a = footerGroup.headers) === null || _a === void 0 ? void 0 : _a.some((header) => (typeof header.column.columnDef.footer === 'string' &&
-        !!header.column.columnDef.footer) ||
-        header.column.columnDef.Footer)))
-        return null;
-    const tableRowProps = parseFromValuesOrFunc(muiTableFooterRowProps, {
-        footerGroup,
-        table,
-    });
-    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), display: layoutMode === 'grid' ? 'flex' : 'table-row', width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
-                const footer = virtualColumns
-                    ? footerGroup.headers[footerOrVirtualFooter.index]
-                    : footerOrVirtualFooter;
-                return (jsx(MRT_TableFooterCell, { footer: footer, table: table }, footer.id));
-            }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
-};
+const MRT_AggregationFns = Object.assign({}, aggregationFns);
 
-const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef }, } = table;
-    const { isFullScreen } = getState();
-    const tableFooterProps = parseFromValuesOrFunc(muiTableFooterProps, {
-        table,
+const fuzzy = (row, columnId, filterValue, addMeta) => {
+    const itemRank = rankItem(row.getValue(columnId), filterValue, {
+        threshold: rankings.MATCHES,
     });
-    const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
-    return (jsx(TableFooter, Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
-                ? theme.palette.mode === 'light'
-                    ? `1px solid ${theme.palette.grey[300]}`
-                    : `1px solid ${theme.palette.grey[700]}`
-                : undefined, position: stickFooter ? 'sticky' : undefined, zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), ref: (ref) => {
-            tableFooterRef.current = ref;
-            if (tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.ref) {
-                // @ts-ignore
-                tableFooterProps.ref.current = ref;
-            }
-        }, children: getFooterGroups().map((footerGroup) => (jsx(MRT_TableFooterRow, { footerGroup: footerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, footerGroup.id))) })));
+    addMeta(itemRank);
+    return itemRank.passed;
 };
+fuzzy.autoRemove = (val) => !val;
+const contains = (row, id, filterValue) => row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .includes(filterValue.toString().toLowerCase().trim());
+contains.autoRemove = (val) => !val;
+const startsWith = (row, id, filterValue) => row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .startsWith(filterValue.toString().toLowerCase().trim());
+startsWith.autoRemove = (val) => !val;
+const endsWith = (row, id, filterValue) => row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .endsWith(filterValue.toString().toLowerCase().trim());
+endsWith.autoRemove = (val) => !val;
+const equals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() ===
+    filterValue.toString().toLowerCase().trim();
+equals.autoRemove = (val) => !val;
+const notEquals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() !==
+    filterValue.toString().toLowerCase().trim();
+notEquals.autoRemove = (val) => !val;
+const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
+    ? +row.getValue(id) > +filterValue
+    : row.getValue(id).toString().toLowerCase().trim() >
+        filterValue.toString().toLowerCase().trim();
+greaterThan.autoRemove = (val) => !val;
+const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
+greaterThanOrEqualTo.autoRemove = (val) => !val;
+const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
+    ? +row.getValue(id) < +filterValue
+    : row.getValue(id).toString().toLowerCase().trim() <
+        filterValue.toString().toLowerCase().trim();
+lessThan.autoRemove = (val) => !val;
+const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
+lessThanOrEqualTo.autoRemove = (val) => !val;
+const between = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
+    greaterThan(row, id, filterValues[0])) &&
+    ((!isNaN(+filterValues[0]) &&
+        !isNaN(+filterValues[1]) &&
+        +filterValues[0] > +filterValues[1]) ||
+        ['', undefined].includes(filterValues[1]) ||
+        lessThan(row, id, filterValues[1]));
+between.autoRemove = (val) => !val;
+const betweenInclusive = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
+    greaterThanOrEqualTo(row, id, filterValues[0])) &&
+    ((!isNaN(+filterValues[0]) &&
+        !isNaN(+filterValues[1]) &&
+        +filterValues[0] > +filterValues[1]) ||
+        ['', undefined].includes(filterValues[1]) ||
+        lessThanOrEqualTo(row, id, filterValues[1]));
+betweenInclusive.autoRemove = (val) => !val;
+const empty = (row, id, _filterValue) => !row.getValue(id).toString().trim();
+empty.autoRemove = (val) => !val;
+const notEmpty = (row, id, _filterValue) => !!row.getValue(id).toString().trim();
+notEmpty.autoRemove = (val) => !val;
+const MRT_FilterFns = Object.assign(Object.assign({}, filterFns), { between,
+    betweenInclusive,
+    contains,
+    empty,
+    endsWith,
+    equals,
+    fuzzy,
+    greaterThan,
+    greaterThanOrEqualTo,
+    lessThan,
+    lessThanOrEqualTo,
+    notEmpty,
+    notEquals,
+    startsWith });
 
-const MRT_Table = ({ table, }) => {
-    var _a, _b, _c, _d;
-    const { getFlatHeaders, getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, columns, enableColumnResizing, enableColumnVirtualization, enableColumnPinning, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, refs: { tableContainerRef }, } = table;
-    const { columnPinning, columnSizing, columnSizingInfo, columnVisibility, isFullScreen, } = getState();
-    const tableProps = parseFromValuesOrFunc(muiTableProps, { table });
-    const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, { table });
-    const columnSizeVars = useMemo(() => {
-        const headers = getFlatHeaders();
-        const colSizes = {};
-        for (let i = 0; i < headers.length; i++) {
-            const header = headers[i];
-            const colSize = header.getSize();
-            colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
-            colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
-        }
-        return colSizes;
-    }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
-    //get first 16 column widths and average them
-    const averageColumnWidth = useMemo(() => {
-        var _a, _b, _c, _d;
-        if (!enableColumnVirtualization)
-            return 0;
-        const columnsWidths = (_d = (_c = (_b = (_a = table
-            .getRowModel()
-            .rows[0]) === null || _a === void 0 ? void 0 : _a.getCenterVisibleCells()) === null || _b === void 0 ? void 0 : _b.slice(0, 16)) === null || _c === void 0 ? void 0 : _c.map((cell) => cell.column.getSize() * 1.2)) !== null && _d !== void 0 ? _d : [];
-        return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
-    }, [table.getRowModel().rows, columnPinning, columnVisibility]);
-    const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnVirtualization && enableColumnPinning
-        ? [
-            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
-            table
-                .getRightLeafColumns()
-                .map((c) => table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1),
-        ]
-        : [[], []], [columnPinning, enableColumnVirtualization, enableColumnPinning]);
-    const columnVirtualizer = enableColumnVirtualization
-        ? useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: useCallback((range) => [
-                ...new Set([
-                    ...leftPinnedIndexes,
-                    ...defaultRangeExtractor(range),
-                    ...rightPinnedIndexes,
-                ]),
-            ], [leftPinnedIndexes, rightPinnedIndexes]) }, columnVirtualizerProps))
-        : undefined;
-    if (columnVirtualizerInstanceRef && columnVirtualizer) {
-        columnVirtualizerInstanceRef.current = columnVirtualizer;
-    }
-    const virtualColumns = columnVirtualizer
-        ? columnVirtualizer.getVirtualItems()
-        : undefined;
-    let virtualPaddingLeft;
-    let virtualPaddingRight;
-    if (columnVirtualizer && (virtualColumns === null || virtualColumns === void 0 ? void 0 : virtualColumns.length)) {
-        virtualPaddingLeft = (_b = (_a = virtualColumns[leftPinnedIndexes.length]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0;
-        virtualPaddingRight =
-            columnVirtualizer.getTotalSize() -
-                ((_d = (_c = virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes.length]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0);
-    }
-    const props = {
-        table,
-        virtualColumns,
-        virtualPaddingLeft,
-        virtualPaddingRight,
-    };
-    return (jsx(Fragment, { children: jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, props))] })) }));
+const MRT_Default_Icons = {
+    ArrowDownwardIcon,
+    ArrowRightIcon,
+    CancelIcon,
+    ClearAllIcon,
+    CloseIcon,
+    DensityLargeIcon,
+    DensityMediumIcon,
+    DensitySmallIcon,
+    DragHandleIcon,
+    DynamicFeedIcon,
+    EditIcon,
+    ExpandMoreIcon,
+    FilterAltIcon,
+    FilterListIcon,
+    FilterListOffIcon,
+    FullscreenExitIcon,
+    FullscreenIcon,
+    KeyboardDoubleArrowDownIcon,
+    MoreHorizIcon,
+    MoreVertIcon,
+    PushPinIcon,
+    RestartAltIcon,
+    SaveIcon,
+    SearchIcon,
+    SearchOffIcon,
+    SortIcon,
+    ViewColumnIcon,
+    VisibilityOffIcon,
 };
 
-const MRT_EditRowModal = ({ open, table, }) => {
-    var _a;
-    const { getState, options: { localization, onEditingRowCancel, onCreatingRowCancel, renderEditRowModalContent, renderCreateRowModalContent, muiCreateRowModalProps, muiEditRowModalProps, }, setEditingRow, setCreatingRow, } = table;
-    const { creatingRow, editingRow } = getState();
-    const row = (creatingRow !== null && creatingRow !== void 0 ? creatingRow : editingRow);
-    const dialogProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditRowModalProps, { row, table })), (creatingRow &&
-        parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })));
-    const internalEditComponents = row
-        .getAllCells()
-        .filter((cell) => cell.column.columnDef.columnDefType === 'data')
-        .map((cell) => (jsx(MRT_EditCellTextField, { cell: cell, table: table }, cell.id)));
-    return (jsx(Dialog, Object.assign({ fullWidth: true, maxWidth: "xs", onClose: (event, reason) => {
-            var _a;
-            if (creatingRow) {
-                onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
-                setCreatingRow(null);
-            }
-            else {
-                onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
-                setEditingRow(null);
-            }
-            row._valuesCache = {}; //reset values cache
-            (_a = dialogProps.onClose) === null || _a === void 0 ? void 0 : _a.call(dialogProps, event, reason);
-        }, open: open }, dialogProps, { children: (_a = ((creatingRow &&
-            (renderCreateRowModalContent === null || renderCreateRowModalContent === void 0 ? void 0 : renderCreateRowModalContent({
-                row,
-                table,
-                internalEditComponents,
-            }))) ||
-            (renderEditRowModalContent === null || renderEditRowModalContent === void 0 ? void 0 : renderEditRowModalContent({
-                row,
-                table,
-                internalEditComponents,
-            })))) !== null && _a !== void 0 ? _a : (jsxs(Fragment, { children: [jsx(DialogTitle, { sx: { textAlign: 'center' }, children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
-                                gap: '24px',
-                                paddingTop: '16px',
-                                width: '100%',
-                            }, children: internalEditComponents }) }) }), jsx(DialogActions, { sx: { p: '1.25rem' }, children: jsx(MRT_EditActionButtons, { row: row, table: table, variant: "text" }) })] })) })));
+const MRT_Localization_EN = {
+    actions: 'Actions',
+    and: 'and',
+    cancel: 'Cancel',
+    changeFilterMode: 'Change filter mode',
+    changeSearchMode: 'Change search mode',
+    clearFilter: 'Clear filter',
+    clearSearch: 'Clear search',
+    clearSort: 'Clear sort',
+    clickToCopy: 'Click to copy',
+    collapse: 'Collapse',
+    collapseAll: 'Collapse all',
+    columnActions: 'Column Actions',
+    copiedToClipboard: 'Copied to clipboard',
+    dropToGroupBy: 'Drop to group by {column}',
+    edit: 'Edit',
+    expand: 'Expand',
+    expandAll: 'Expand all',
+    filterArrIncludes: 'Includes',
+    filterArrIncludesAll: 'Includes all',
+    filterArrIncludesSome: 'Includes',
+    filterBetween: 'Between',
+    filterBetweenInclusive: 'Between Inclusive',
+    filterByColumn: 'Filter by {column}',
+    filterContains: 'Contains',
+    filterEmpty: 'Empty',
+    filterEndsWith: 'Ends With',
+    filterEquals: 'Equals',
+    filterEqualsString: 'Equals',
+    filterFuzzy: 'Fuzzy',
+    filterGreaterThan: 'Greater Than',
+    filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
+    filterInNumberRange: 'Between',
+    filterIncludesString: 'Contains',
+    filterIncludesStringSensitive: 'Contains',
+    filterLessThan: 'Less Than',
+    filterLessThanOrEqualTo: 'Less Than Or Equal To',
+    filterMode: 'Filter Mode: {filterType}',
+    filterNotEmpty: 'Not Empty',
+    filterNotEquals: 'Not Equals',
+    filterStartsWith: 'Starts With',
+    filterWeakEquals: 'Equals',
+    filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
+    goToFirstPage: 'Go to first page',
+    goToLastPage: 'Go to last page',
+    goToNextPage: 'Go to next page',
+    goToPreviousPage: 'Go to previous page',
+    grab: 'Grab',
+    groupByColumn: 'Group by {column}',
+    groupedBy: 'Grouped by ',
+    hideAll: 'Hide all',
+    hideColumn: 'Hide {column} column',
+    max: 'Max',
+    min: 'Min',
+    move: 'Move',
+    noRecordsToDisplay: 'No records to display',
+    noResultsFound: 'No results found',
+    of: 'of',
+    or: 'or',
+    pin: 'Pin',
+    pinToLeft: 'Pin to left',
+    pinToRight: 'Pin to right',
+    resetColumnSize: 'Reset column size',
+    resetOrder: 'Reset order',
+    rowActions: 'Row Actions',
+    rowNumber: '#',
+    rowNumbers: 'Row Numbers',
+    rowsPerPage: 'Rows per page',
+    save: 'Save',
+    search: 'Search',
+    selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
+    select: 'Select',
+    showAll: 'Show all',
+    showAllColumns: 'Show all columns',
+    showHideColumns: 'Show/Hide columns',
+    showHideFilters: 'Show/Hide filters',
+    showHideSearch: 'Show/Hide search',
+    sortByColumnAsc: 'Sort by {column} ascending',
+    sortByColumnDesc: 'Sort by {column} descending',
+    sortedByColumnAsc: 'Sorted by {column} ascending',
+    sortedByColumnDesc: 'Sorted by {column} descending',
+    thenBy: ', then by ',
+    toggleDensity: 'Toggle density',
+    toggleFullScreen: 'Toggle full screen',
+    toggleSelectAll: 'Toggle select all',
+    toggleSelectRow: 'Toggle select row',
+    toggleVisibility: 'Toggle visibility',
+    ungroupByColumn: 'Ungroup by {column}',
+    unpin: 'Unpin',
+    unpinAll: 'Unpin all',
 };
 
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-const MRT_TableContainer = ({ table, }) => {
-    const { getState, options: { createDisplayMode, editDisplayMode, enableStickyHeader, muiTableContainerProps, }, refs: { tableContainerRef, bottomToolbarRef, topToolbarRef }, } = table;
-    const { isFullScreen, creatingRow, editingRow } = getState();
-    const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
-    const tableContainerProps = parseFromValuesOrFunc(muiTableContainerProps, {
-        table,
-    });
-    useIsomorphicLayoutEffect(() => {
-        var _a, _b, _c, _d;
-        const topToolbarHeight = typeof document !== 'undefined'
-            ? (_b = (_a = topToolbarRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0
-            : 0;
-        const bottomToolbarHeight = typeof document !== 'undefined'
-            ? (_d = (_c = bottomToolbarRef === null || bottomToolbarRef === void 0 ? void 0 : bottomToolbarRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0
-            : 0;
-        setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
-    });
-    const createModalOpen = createDisplayMode === 'modal' && creatingRow;
-    const editModalOpen = editDisplayMode === 'modal' && editingRow;
-    return (jsxs(TableContainer, Object.assign({}, tableContainerProps, { ref: (node) => {
-            if (node) {
-                tableContainerRef.current = node;
-                if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
-                    //@ts-ignore
-                    tableContainerProps.ref.current = node;
-                }
-            }
-        }, sx: (theme) => (Object.assign({ maxWidth: '100%', maxHeight: enableStickyHeader
-                ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
-                : undefined, overflow: 'auto' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), style: Object.assign({ maxHeight: isFullScreen
-                ? `calc(100vh - ${totalToolbarHeight}px)`
-                : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style), children: [jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsx(MRT_EditRowModal, { open: true, table: table }))] })));
+const useMRT_TableOptions = (_a) => {
+    var _b;
+    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
+    const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
+    const _localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
+    const _aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
+    const _filterFns = useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
+    const _sortingFns = useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
+    const _defaultColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), [defaultColumn]);
+    const _defaultDisplayColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [defaultDisplayColumn]);
+    if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
+        layoutMode = 'grid';
+    }
+    if (rest.enableRowVirtualization) {
+        enableStickyHeader = true;
+    }
+    if (enablePagination === false && manualPagination === undefined) {
+        manualPagination = true;
+    }
+    if (!((_b = rest.data) === null || _b === void 0 ? void 0 : _b.length)) {
+        manualFiltering = true;
+        manualGrouping = true;
+        manualPagination = true;
+        manualSorting = true;
+    }
+    return Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded,
+        columnFilterDisplayMode,
+        columnResizeMode,
+        createDisplayMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editDisplayMode,
+        enableBottomToolbar,
+        enableColumnActions,
+        enableColumnFilters,
+        enableColumnOrdering,
+        enableColumnPinning,
+        enableColumnResizing,
+        enableDensityToggle,
+        enableExpandAll,
+        enableExpanding,
+        enableFilterMatchHighlighting,
+        enableFilters,
+        enableFullScreenToggle,
+        enableGlobalFilter,
+        enableGlobalFilterRankedResults,
+        enableGrouping,
+        enableHiding,
+        enableMultiRowSelection,
+        enableMultiSort,
+        enablePagination,
+        enableRowPinning,
+        enableRowSelection,
+        enableSelectAll,
+        enableSorting,
+        enableStickyHeader,
+        enableTableFooter,
+        enableTableHead,
+        enableToolbarInternalActions,
+        enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode, localization: _localization, manualFiltering,
+        manualGrouping,
+        manualPagination,
+        manualSorting,
+        paginationDisplayMode,
+        positionActionsColumn,
+        positionExpandColumn,
+        positionGlobalFilter,
+        positionPagination,
+        positionToolbarAlertBanner,
+        positionToolbarDropZone,
+        rowNumberMode,
+        rowPinningDisplayMode,
+        selectAllMode, sortingFns: _sortingFns }, rest);
 };
 
-const MRT_TablePaper = ({ table, }) => {
-    var _a, _b;
-    const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
-    const { isFullScreen } = getState();
-    const tablePaperProps = parseFromValuesOrFunc(muiTablePaperProps, { table });
-    return (jsxs(Paper, Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
-            tablePaperRef.current = ref;
-            if (tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.ref) {
-                //@ts-ignore
-                tablePaperProps.ref.current = ref;
-            }
-        }, sx: (theme) => (Object.assign({ overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx, theme))), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), (isFullScreen
-            ? {
-                bottom: 0,
-                height: '100vh',
-                left: 0,
-                margin: 0,
-                maxHeight: '100vh',
-                maxWidth: '100vw',
-                padding: 0,
-                position: 'fixed',
-                right: 0,
-                top: 0,
-                width: '100vw',
-                zIndex: 10,
-            }
-            : {})), children: [enableTopToolbar &&
-                ((_a = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _a !== void 0 ? _a : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
-                ((_b = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_BottomToolbar, { table: table })))] })));
+const useMaterialReactTable = (tableOptions) => {
+    const parsedTableOptions = useMRT_TableOptions(tableOptions);
+    const tableInstance = useMRT_TableInstance(parsedTableOptions);
+    return tableInstance;
 };
 
 const isTableInstanceProp = (props) => props.table !== undefined;