material-react-table 1.0.0-beta.1 → 1.0.0-beta.10

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

@@ -1,8 +1,8 @@
-import React, { useMemo, useRef, useState, useCallback, Fragment, useEffect, useLayoutEffect } from 'react';
+import React, { useMemo, useRef, useState, useCallback, Fragment, memo, useEffect, useLayoutEffect } from 'react';
 import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
-import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, alpha, useMediaQuery, Toolbar, lighten, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, DialogTitle, DialogContent, Stack, DialogActions } from '@mui/material';
+import { Tooltip, IconButton, Menu, MenuItem, Box, alpha, lighten, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, useMediaQuery, Toolbar, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, DialogTitle, DialogContent, Stack, DialogActions } from '@mui/material';
 import { useVirtual } from 'react-virtual';
 
 /******************************************************************************
@@ -151,7 +151,7 @@ const MRT_FilterFns = Object.assign(Object.assign({}, filterFns), { between,
     notEquals,
     startsWith });
 
-const MRT_DefaultLocalization_EN = {
+const MRT_Localization_EN = {
     actions: 'Actions',
     and: 'and',
     cancel: 'Cancel',
@@ -200,6 +200,8 @@ const MRT_DefaultLocalization_EN = {
     max: 'Max',
     min: 'Min',
     move: 'Move',
+    noRecordsToDisplay: 'No records to display',
+    noResultsFound: 'No results found',
     or: 'or',
     pinToLeft: 'Pin to left',
     pinToRight: 'Pin to right',
@@ -383,7 +385,7 @@ const mrtFilterOptions = (localization) => [
         divider: false,
     },
 ];
-const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table, }) => {
+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();
@@ -402,11 +404,19 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table,
             if (['empty', 'notEmpty'].includes(option)) {
                 column.setFilterValue(' ');
             }
-            else if (option === 'between') {
+            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
+                ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(option)) {
+                column.setFilterValue([]);
+                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
+            }
+            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range' ||
+                ['between', 'betweenInclusive', 'inNumberRange'].includes(option)) {
                 column.setFilterValue(['', '']);
+                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
             }
             else {
                 column.setFilterValue('');
+                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
             }
         }
         else {
@@ -469,11 +479,11 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
     var _a;
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
     return (React.createElement(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 },
-        React.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", onDragStart: onDragStart, onDragEnd: onDragEnd, size: "small" }, iconButtonProps, { onClick: (e) => {
+        React.createElement(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);
-            }, sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 0.2s ease-in-out', '&:hover': {
+            }, onDragStart: onDragStart, onDragEnd: onDragEnd, sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 0.2s ease-in-out', '&:hover': {
                     backgroundColor: 'transparent',
                     opacity: 1,
                 }, '&:active': {
@@ -587,6 +597,37 @@ const getDefaultColumnFilterFn = (columnDef) => {
         return 'betweenInclusive';
     return 'fuzzy';
 };
+const getIsLastLeftPinnedColumn = (table, column) => {
+    return (column.getIsPinned() === 'left' &&
+        table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex());
+};
+const getIsFirstRightPinnedColumn = (column) => {
+    return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
+};
+const getTotalRight = (table, column) => {
+    return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 160);
+};
+const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
+    var _a, _b, _c, _d;
+    return (Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+            ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
+            : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
+            ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
+            : getIsFirstRightPinnedColumn(column)
+                ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
+                : undefined, left: column.getIsPinned() === 'left'
+            ? `${column.getStart('left')}px`
+            : undefined, opacity: ((_a = table.getState().draggingColumn) === null || _a === void 0 ? void 0 : _a.id) === column.id ||
+            ((_b = table.getState().hoveredColumn) === null || _b === void 0 ? void 0 : _b.id) === column.id
+            ? 0.5
+            : 1, position: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+            ? 'sticky'
+            : undefined, right: column.getIsPinned() === 'right'
+            ? `${getTotalRight(table, column)}px`
+            : undefined, transition: `all ${column.getIsResizing() ? 0 : '0.2s'} ease-in-out` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+        ? tableCellProps.sx(theme)
+        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), { maxWidth: `min(${column.getSize()}px, fit-content)`, minWidth: `max(${column.getSize()}px, ${(_c = column.columnDef.minSize) !== null && _c !== void 0 ? _c : 30}px)`, width: (_d = header === null || header === void 0 ? void 0 : header.getSize()) !== null && _d !== void 0 ? _d : column.getSize() }));
+};
 
 const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, isSubMenu, table, }) => {
     var _a;
@@ -1039,7 +1080,7 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
                     textFieldProps.inputRef = inputRef;
                 }
             } })),
-        React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table })));
+        React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table, onSelect: handleClear })));
 };
 
 const MRT_LinearProgressBar = ({ isTopToolbar, table }) => {
@@ -1057,7 +1098,7 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table }) => {
         React.createElement(LinearProgress, Object.assign({ "aria-label": "Loading", "aria-busy": "true", sx: { position: 'relative' } }, linearProgressProps))));
 };
 
-const MRT_TablePagination = ({ table, position }) => {
+const MRT_TablePagination = ({ table, position, }) => {
     const { getPrePaginationRowModel, getState, setPageIndex, setPageSize, options: { muiTablePaginationProps, enableToolbarInternalActions, rowCount, }, } = table;
     const { pagination: { pageSize = 10, pageIndex = 0 }, showGlobalFilter, } = getState();
     const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
@@ -1075,14 +1116,14 @@ const MRT_TablePagination = ({ table, position }) => {
                 enableToolbarInternalActions &&
                 !showGlobalFilter
                 ? '3.5rem'
-                : '-0.25rem', position: 'relative', zIndex: 2 }, ((tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx) instanceof Function
+                : undefined, position: 'relative', zIndex: 2 }, ((tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx) instanceof Function
             ? tablePaginationProps.sx(theme)
             : tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx))) })));
 };
 
 const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
     var _a, _b;
-    const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { localization, muiToolbarAlertBannerProps, muiToolbarAlertBannerChipProps, }, } = table;
+    const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { localization, muiToolbarAlertBannerProps, muiToolbarAlertBannerChipProps, positionToolbarAlertBanner, }, } = table;
     const { grouping, showAlertBanner } = getState();
     const alertProps = muiToolbarAlertBannerProps instanceof Function
         ? muiToolbarAlertBannerProps({ table })
@@ -1100,7 +1141,11 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
             index > 0 ? localization.thenBy : '',
             React.createElement(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))))))) : null;
     return (React.createElement(Collapse, { in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0 },
-        React.createElement(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, p: 0, position: 'relative', right: 0, top: 0, width: '100%', zIndex: 2 }, ((alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx) instanceof Function
+        React.createElement(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, p: 0, position: 'relative', mb: stackAlertBanner
+                    ? 0
+                    : positionToolbarAlertBanner === 'bottom'
+                        ? '-1rem'
+                        : undefined, right: 0, top: 0, width: '100%', zIndex: 2 }, ((alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx) instanceof Function
                 ? alertProps.sx(theme)
                 : alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx))) }),
             (alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && React.createElement(AlertTitle, null, alertProps.title),
@@ -1172,16 +1217,16 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
     var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { getState, options: { icons: { SearchIcon, SearchOffIcon }, localization, }, refs: { searchInputRef }, setShowGlobalFilter, } = table;
-    const { showGlobalFilter } = getState();
+    const { globalFilter, showGlobalFilter } = getState();
     const handleToggleSearch = () => {
         setShowGlobalFilter(!showGlobalFilter);
         queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
     return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch },
-        React.createElement(IconButton, Object.assign({ onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null))));
+        React.createElement(IconButton, Object.assign({ disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null))));
 };
 
-const MRT_ToolbarInternalButtons = ({ table }) => {
+const MRT_ToolbarInternalButtons = ({ table, }) => {
     var _a;
     const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, initialState, renderToolbarInternalActions, }, } = table;
     return (React.createElement(Box, { sx: {
@@ -1229,6 +1274,7 @@ const commonToolbarStyles = ({ theme }) => ({
     backgroundColor: lighten(theme.palette.background.default, 0.04),
     backgroundImage: 'none',
     display: 'grid',
+    flexWrap: 'wrap-reverse',
     minHeight: '3.5rem',
     overflow: 'hidden',
     p: '0 !important',
@@ -1267,7 +1313,11 @@ const MRT_TopToolbar = ({ table }) => {
                 width: '100%',
             } },
             enableGlobalFilter && positionGlobalFilter === 'left' && (React.createElement(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : React.createElement("span", null),
-            enableToolbarInternalActions ? (React.createElement(Box, { sx: { display: 'flex', flexWrap: 'wrap' } },
+            enableToolbarInternalActions ? (React.createElement(Box, { sx: {
+                    display: 'flex',
+                    flexWrap: 'wrap-reverse',
+                    justifyContent: 'flex-end',
+                } },
                 enableGlobalFilter && positionGlobalFilter === 'right' && (React.createElement(MRT_GlobalFilterTextField, { table: table })),
                 React.createElement(MRT_ToolbarInternalButtons, { table: table }))) : (enableGlobalFilter &&
                 positionGlobalFilter === 'right' && (React.createElement(MRT_GlobalFilterTextField, { table: table })))),
@@ -1290,14 +1340,14 @@ const MRT_BottomToolbar = ({ table }) => {
                 // @ts-ignore
                 toolbarProps.ref.current = ref;
             }
-        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `-3px 0 6px ${alpha(theme.palette.common.black, 0.1)}`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
+        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${alpha(theme.palette.common.black, 0.1)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
             ? toolbarProps.sx(theme)
             : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }),
         React.createElement(MRT_LinearProgressBar, { isTopToolbar: false, table: table }),
-        positionToolbarAlertBanner === 'bottom' && (React.createElement(MRT_ToolbarAlertBanner, { table: table })),
+        positionToolbarAlertBanner === 'bottom' && (React.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
         ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React.createElement(MRT_ToolbarDropZone, { table: table })),
         React.createElement(Box, { sx: {
-                alignItems: 'flex-start',
+                alignItems: 'center',
                 boxSizing: 'border-box',
                 display: 'flex',
                 justifyContent: 'space-between',
@@ -1445,9 +1495,6 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     const handleFilterMenuOpen = (event) => {
         setAnchorEl(event.currentTarget);
     };
-    useEffect(() => {
-        handleClear();
-    }, [columnDef._filterFn]);
     if (columnDef.Filter) {
         return React.createElement(React.Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, table }));
     }
@@ -1505,7 +1552,11 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 if (textFieldProps.inputRef) {
                     textFieldProps.inputRef = inputRef;
                 }
-            }, sx: (theme) => (Object.assign({ p: 0, minWidth: !filterChipLabel ? '120px' : 'auto', width: '100%', '&	.MuiSelect-icon': {
+            }, sx: (theme) => (Object.assign({ p: 0, minWidth: columnDef.filterVariant === 'range'
+                    ? '90px'
+                    : !filterChipLabel
+                        ? '120px'
+                        : 'auto', width: '100%', '&	.MuiSelect-icon': {
                     mr: '1.5rem',
                 } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
                 ? textFieldProps.sx(theme)
@@ -1533,7 +1584,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                     isMultiSelectFilter && (React.createElement(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })),
                     text));
             })),
-        React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table })));
+        React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })));
 };
 
 const MRT_FilterRangeFields = ({ header, table }) => {
@@ -1555,11 +1606,8 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
     const { options: { icons: { FilterAltIcon }, localization, }, } = table;
     const { column } = header;
     const { columnDef } = column;
-    const isRangeFilter = [
-        'between',
-        'betweenInclusive',
-        'inNumberRange',
-    ].includes(columnDef._filterFn);
+    const isRangeFilter = columnDef.filterVariant === 'range' ||
+        ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
     const currentFilterOption = columnDef._filterFn;
     const filterTooltip = localization.filteringByColumn
         .replace('{column}', String(columnDef.header))
@@ -1571,8 +1619,8 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
         ? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
         : column.getFilterValue()}"`)
         .replace('" "', '');
-    return (React.createElement(Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && isRangeFilter) ||
-            (!isRangeFilter && // @ts-ignore
+    return (React.createElement(Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
+            (isRangeFilter && // @ts-ignore
                 (!!((_b = column.getFilterValue()) === null || _b === void 0 ? void 0 : _b[0]) || !!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[1]))) },
         React.createElement("span", null,
             React.createElement(Tooltip, { arrow: true, placement: "top", title: filterTooltip },
@@ -1589,7 +1637,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
 };
 
 const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
-    const { getState, options: { enableColumnOrdering, muiTableHeadCellDragHandleProps, onColumnDrop, }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
+    const { getState, options: { enableColumnOrdering, muiTableHeadCellDragHandleProps }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
     const { columnDef } = column;
     const { hoveredColumn, draggingColumn, columnOrder } = getState();
     const mIconButtonProps = muiTableHeadCellDragHandleProps instanceof Function
@@ -1599,16 +1647,15 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
         ? columnDef.muiTableHeadCellDragHandleProps({ column, table })
         : columnDef.muiTableHeadCellDragHandleProps;
     const iconButtonProps = Object.assign(Object.assign({}, mIconButtonProps), mcIconButtonProps);
-    const handleDragStart = (e) => {
+    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);
-        e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
+        event.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
     };
     const handleDragEnd = (event) => {
-        onColumnDrop === null || onColumnDrop === void 0 ? void 0 : onColumnDrop({
-            event,
-            draggedColumn: column,
-            targetColumn: hoveredColumn,
-        });
+        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();
         }
@@ -1676,7 +1723,7 @@ const MRT_TableHeadCellSortLabel = ({ header, table }) => {
 const MRT_TableHeadCell = ({ header, table }) => {
     var _a, _b, _c, _d;
     const theme = useTheme();
-    const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnResizing, enableGrouping, enableMultiSort, muiTableHeadCellProps, }, setHoveredColumn, } = table;
+    const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, muiTableHeadCellProps, }, setHoveredColumn, } = table;
     const { density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     const { columnDef } = column;
@@ -1688,16 +1735,6 @@ const MRT_TableHeadCell = ({ header, table }) => {
         ? columnDef.muiTableHeadCellProps({ column, table })
         : columnDef.muiTableHeadCellProps;
     const tableCellProps = Object.assign(Object.assign({}, mTableHeadCellProps), mcTableHeadCellProps);
-    const getIsLastLeftPinnedColumn = () => {
-        return (column.getIsPinned() === 'left' &&
-            table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex());
-    };
-    const getIsFirstRightPinnedColumn = () => {
-        return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
-    };
-    const getTotalRight = () => {
-        return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150);
-    };
     const handleDragEnter = (_e) => {
         if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
             setHoveredColumn(null);
@@ -1726,44 +1763,33 @@ const MRT_TableHeadCell = ({ header, table }) => {
         })
         : columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header)) !== null && _b !== void 0 ? _b : columnDef.header);
     const tableHeadCellRef = React.useRef(null);
-    return (React.createElement(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: tableHeadCellRef }, tableCellProps, { sx: (theme) => {
-            var _a;
-            return (Object.assign(Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && columnDefType !== 'group'
-                    ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
-                    : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn()
-                    ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
-                    : getIsFirstRightPinnedColumn()
-                        ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
-                        : undefined, fontWeight: 'bold', left: column.getIsPinned() === 'left'
-                    ? `${column.getStart('left')}px`
-                    : undefined, overflow: 'visible', opacity: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id || (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-                    ? 0.5
-                    : 1, 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', position: column.getIsPinned() && columnDefType !== 'group'
-                    ? 'sticky'
-                    : undefined, pt: columnDefType === 'group' || density === 'compact'
-                    ? '0.25rem'
-                    : density === 'comfortable'
-                        ? '.75rem'
-                        : '1.25rem', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`, 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 }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
-                ? tableCellProps.sx(theme)
-                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), draggingBorders), { maxWidth: `min(${column.getSize()}px, fit-content)`, minWidth: `max(${column.getSize()}px, ${(_a = columnDef.minSize) !== null && _a !== void 0 ? _a : 30}px)`, width: header.getSize() }));
-        } }),
+    return (React.createElement(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: tableHeadCellRef }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ 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)) }),
         header.isPlaceholder ? null : (React.createElement(Box, { sx: {
                 alignItems: 'flex-start',
                 display: 'flex',
@@ -1818,11 +1844,13 @@ const MRT_TableHeadRow = ({ headerGroup, table }) => {
 };
 
 const MRT_TableHead = ({ table }) => {
-    const { getHeaderGroups, options: { muiTableHeadProps }, } = table;
+    const { getHeaderGroups, options: { enableStickyHeader, muiTableHeadProps }, } = table;
     const tableHeadProps = muiTableHeadProps instanceof Function
         ? muiTableHeadProps({ table })
         : muiTableHeadProps;
-    return (React.createElement(TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map((headerGroup) => (React.createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
+    return (React.createElement(TableHead, Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ opacity: enableStickyHeader ? 0.95 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
+            ? tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx(theme)
+            : tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))) }), getHeaderGroups().map((headerGroup) => (React.createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
 };
 
 const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
@@ -1918,28 +1946,27 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
 };
 
 const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
-    const { options: { muiTableBodyRowDragHandleProps, onRowDrop }, } = table;
+    const { options: { muiTableBodyRowDragHandleProps }, } = table;
     const { row } = cell;
     const iconButtonProps = muiTableBodyRowDragHandleProps instanceof Function
         ? muiTableBodyRowDragHandleProps({ row, table })
         : muiTableBodyRowDragHandleProps;
-    const handleDragStart = (e) => {
-        e.dataTransfer.setDragImage(rowRef.current, 0, 0);
+    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) => {
-        onRowDrop === null || onRowDrop === void 0 ? void 0 : onRowDrop({
-            event,
-            draggedRow: table.getState().draggingRow,
-            targetRow: table.getState().hoveredRow,
-        });
+        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 (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
 
-const MRT_TableBodyCellValue = ({ cell, table }) => {
+const _MRT_TableBodyCellValue = ({ cell, table }) => {
     var _a, _b;
     const { column, row } = cell;
     const { columnDef } = column;
@@ -1961,6 +1988,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
                 })
                 : (_b = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : cell.renderValue()));
 };
+const MRT_TableBodyCellValue = memo(_MRT_TableBodyCellValue, (prev, next) => prev.cell.getValue() === next.cell.getValue());
 
 const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
     var _a, _b;
@@ -1977,6 +2005,9 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
         ? columnDef.muiTableBodyCellProps({ cell, table })
         : columnDef.muiTableBodyCellProps;
     const tableCellProps = Object.assign(Object.assign({}, mTableCellBodyProps), mcTableCellBodyProps);
+    const skeletonProps = muiTableBodyCellSkeletonProps instanceof Function
+        ? muiTableBodyCellSkeletonProps({ cell, column, row, table })
+        : muiTableBodyCellSkeletonProps;
     const isEditable = (enableEditing || columnDef.enableEditing) &&
         columnDef.enableEditing !== false;
     const isEditing = isEditable &&
@@ -2007,16 +2038,6 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
             });
         }
     };
-    const getIsLastLeftPinnedColumn = () => {
-        return (column.getIsPinned() === 'left' &&
-            table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex());
-    };
-    const getIsFirstRightPinnedColumn = () => {
-        return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
-    };
-    const getTotalRight = () => {
-        return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150);
-    };
     const handleDragEnter = (e) => {
         var _a;
         (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDragEnter) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
@@ -2045,53 +2066,34 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                 : undefined,
         }
         : undefined;
-    return (React.createElement(TableCell, Object.assign({}, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => {
-            var _a;
-            return (Object.assign(Object.assign(Object.assign({ backgroundColor: column.getIsPinned()
-                    ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
-                    : undefined, boxShadow: getIsLastLeftPinnedColumn()
-                    ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
-                    : getIsFirstRightPinnedColumn()
-                        ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
-                        : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text', left: column.getIsPinned() === 'left'
-                    ? `${column.getStart('left')}px`
-                    : undefined, opacity: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id || (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-                    ? 0.5
-                    : 1, overflow: 'hidden', p: density === 'compact'
+    return (React.createElement(TableCell, Object.assign({}, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text', overflow: 'hidden', p: density === 'compact'
+                ? columnDefType === 'display'
+                    ? '0 0.5rem'
+                    : '0.5rem'
+                : density === 'comfortable'
                     ? columnDefType === 'display'
-                        ? '0 0.5rem'
-                        : '0.5rem'
-                    : density === 'comfortable'
-                        ? columnDefType === 'display'
-                            ? '0.5rem 0.75rem'
-                            : '1rem'
-                        : columnDefType === 'display'
-                            ? '1rem 1.25rem'
-                            : '1.5rem', pl: column.id === 'mrt-row-expand'
-                    ? `${row.depth +
-                        (density === 'compact'
-                            ? 0.5
-                            : density === 'comfortable'
-                                ? 0.75
-                                : 1.25)}rem`
-                    : undefined, position: column.getIsPinned() ? 'sticky' : 'relative', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, transition: 'all 0.2s ease-in-out', whiteSpace: density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-                    ? 2
-                    : column.getIsPinned()
-                        ? 1
-                        : undefined, '&:hover': {
-                    backgroundColor: enableHover &&
-                        enableEditing &&
-                        columnDef.enableEditing !== false &&
-                        ['table', 'cell'].includes(editingMode !== null && editingMode !== void 0 ? editingMode : '')
-                        ? theme.palette.mode === 'dark'
-                            ? `${lighten(theme.palette.background.default, 0.2)} !important`
-                            : `${darken(theme.palette.background.default, 0.1)} !important`
-                        : undefined,
-                } }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
-                ? tableCellProps.sx(theme)
-                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), draggingBorders), { maxWidth: `min(${column.getSize()}px, fit-content)`, minWidth: `max(${column.getSize()}px, ${(_a = columnDef.minSize) !== null && _a !== void 0 ? _a : 30}px)`, width: column.getSize() }));
-        } }),
-        React.createElement(React.Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React.createElement(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, muiTableBodyCellSkeletonProps))) : enableRowNumbers &&
+                        ? '0.5rem 0.75rem'
+                        : '1rem'
+                    : columnDefType === 'display'
+                        ? '1rem 1.25rem'
+                        : '1.5rem', pl: column.id === 'mrt-row-expand'
+                ? `${row.depth +
+                    (density === 'compact'
+                        ? 0.5
+                        : density === 'comfortable'
+                            ? 0.75
+                            : 1.25)}rem`
+                : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0, '&:hover': {
+                backgroundColor: enableHover &&
+                    enableEditing &&
+                    columnDef.enableEditing !== false &&
+                    ['table', 'cell'].includes(editingMode !== null && editingMode !== void 0 ? editingMode : '')
+                    ? theme.palette.mode === 'dark'
+                        ? `${lighten(theme.palette.background.default, 0.2)} !important`
+                        : `${darken(theme.palette.background.default, 0.1)} !important`
+                    : undefined,
+            } }, getCommonCellStyles({ column, table, theme, tableCellProps })), draggingBorders)) }),
+        React.createElement(React.Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React.createElement(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' ? (React.createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
             (column.id === 'mrt-row-select' ||
@@ -2161,9 +2163,10 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
         renderDetailPanel && !row.getIsGrouped() && (React.createElement(MRT_TableDetailPanel, { row: row, table: table }))));
 };
 
-const MRT_TableBody = ({ table, tableContainerRef }) => {
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, manualFiltering, manualSorting, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, } = table;
-    const { globalFilter, pagination, sorting } = getState();
+const MRT_TableBody = ({ table }) => {
+    var _a;
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, localization, manualFiltering, manualSorting, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
+    const { columnFilters, globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
         : muiTableBodyProps;
@@ -2228,7 +2231,18 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
     //     ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
     //     : 0;
     // }
-    return (React.createElement(TableBody, Object.assign({}, tableBodyProps),
+    return (React.createElement(TableBody, Object.assign({}, tableBodyProps), !rows.length ? (React.createElement("tr", null,
+        React.createElement("td", { colSpan: table.getVisibleLeafColumns().length },
+            React.createElement(Typography, { sx: {
+                    color: 'text.secondary',
+                    fontStyle: 'italic',
+                    maxWidth: `min(100vw, ${(_a = tablePaperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth}px)`,
+                    py: '2rem',
+                    textAlign: 'center',
+                    width: '100%',
+                } }, globalFilter || columnFilters.length
+                ? localization.noResultsFound
+                : localization.noRecordsToDisplay)))) : (React.createElement(React.Fragment, null,
         enableRowVirtualization && paddingTop > 0 && (React.createElement("tr", null,
             React.createElement("td", { style: { height: `${paddingTop}px` } }))),
         (enableRowVirtualization ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
@@ -2238,12 +2252,12 @@ const MRT_TableBody = ({ table, tableContainerRef }) => {
             return (React.createElement(MRT_TableBodyRow, { key: row.id, row: row, rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex, table: table, virtualRow: enableRowVirtualization ? rowOrVirtualRow : null }));
         }),
         enableRowVirtualization && paddingBottom > 0 && (React.createElement("tr", null,
-            React.createElement("td", { style: { height: `${paddingBottom}px` } })))));
+            React.createElement("td", { style: { height: `${paddingBottom}px` } })))))));
 };
 
 const MRT_TableFooterCell = ({ footer, table }) => {
     var _a, _b, _c;
-    const { getState, options: { muiTableFooterCellProps, enableColumnResizing }, } = table;
+    const { getState, options: { muiTableFooterCellProps }, } = table;
     const { density } = getState();
     const { column } = footer;
     const { columnDef } = column;
@@ -2255,13 +2269,11 @@ const MRT_TableFooterCell = ({ footer, table }) => {
         ? columnDef.muiTableFooterCellProps({ column, table })
         : columnDef.muiTableFooterCellProps;
     const tableCellProps = Object.assign(Object.assign({}, mTableFooterCellProps), mcTableFooterCellProps);
-    return (React.createElement(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: theme.palette.background.default, backgroundImage: `linear-gradient(${alpha(theme.palette.common.white, 0.05)},${alpha(theme.palette.common.white, 0.05)})`, fontWeight: 'bold', maxWidth: `${column.getSize()}px`, minWidth: `${column.getSize()}px`, p: density === 'compact'
+    return (React.createElement(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ fontWeight: 'bold', p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
-                    : '1.5rem', transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`, width: column.getSize(), verticalAlign: 'text-top' }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
-            ? tableCellProps.sx(theme)
-            : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }),
+                    : '1.5rem', verticalAlign: 'top' }, getCommonCellStyles({ column, table, theme, tableCellProps }))) }),
         React.createElement(React.Fragment, null, footer.isPlaceholder
             ? null
             : (_c = (_b = (columnDef.Footer instanceof Function
@@ -2294,16 +2306,16 @@ const MRT_TableFooter = ({ table }) => {
         ? muiTableFooterProps({ table })
         : muiTableFooterProps;
     const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
-    return (React.createElement(TableFooter, Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ position: stickFooter ? 'sticky' : undefined, bottom: stickFooter ? 0 : undefined, opacity: stickFooter ? 0.95 : undefined, outline: stickFooter
+    return (React.createElement(TableFooter, Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.06), bottom: stickFooter ? 0 : undefined, opacity: stickFooter ? 0.95 : undefined, outline: stickFooter
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
-                : undefined }, ((tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
+                : undefined, position: stickFooter ? 'sticky' : undefined }, ((tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
             ? tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx(theme)
             : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))) }), getFooterGroups().map((footerGroup) => (React.createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table })))));
 };
 
-const MRT_Table = ({ tableContainerRef, table }) => {
+const MRT_Table = ({ table }) => {
     const { getState, options: { enableColumnResizing, enableRowVirtualization, enableStickyHeader, enableTableFooter, enableTableHead, muiTableProps, }, } = table;
     const { isFullScreen } = getState();
     const tableProps = muiTableProps instanceof Function
@@ -2313,7 +2325,7 @@ const MRT_Table = ({ tableContainerRef, table }) => {
             ? tableProps.sx(theme)
             : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
         enableTableHead && React.createElement(MRT_TableHead, { table: table }),
-        React.createElement(MRT_TableBody, { tableContainerRef: tableContainerRef, table: table }),
+        React.createElement(MRT_TableBody, { table: table }),
         enableTableFooter && React.createElement(MRT_TableFooter, { table: table })));
 };
 
@@ -2348,31 +2360,42 @@ const MRT_TableContainer = ({ table }) => {
             : tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx))), style: Object.assign({ maxHeight: isFullScreen
                 ? `calc(100vh - ${totalToolbarHeight}px)`
                 : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style) }),
-        React.createElement(MRT_Table, { tableContainerRef: tableContainerRef, table: table })));
+        React.createElement(MRT_Table, { table: table })));
 };
 
 const MRT_TablePaper = ({ table }) => {
-    const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps }, } = table;
+    const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            if (isFullScreen) {
-                document.body.style.height = '100vh';
-            }
-            else {
-                document.body.style.height = 'auto';
-            }
-        }
-    }, [isFullScreen]);
     const tablePaperProps = muiTablePaperProps instanceof Function
         ? muiTablePaperProps({ table })
         : muiTablePaperProps;
-    return (React.createElement(Paper, Object.assign({ elevation: 2 }, tablePaperProps, { sx: (theme) => (Object.assign({ transition: 'all 0.2s ease-in-out' }, ((tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx) instanceof Function
+    return (React.createElement(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({ transition: 'all 0.2s ease-in-out' }, ((tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx) instanceof Function
             ? tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx(theme)
-            : tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx))), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), { height: isFullScreen ? '100vh' : undefined, margin: isFullScreen ? '0' : undefined, maxHeight: isFullScreen ? '100vh' : undefined, maxWidth: isFullScreen ? '100vw' : undefined, padding: isFullScreen ? '0' : undefined, width: isFullScreen ? '100vw' : undefined }) }),
-        enableTopToolbar && React.createElement(MRT_TopToolbar, { table: table }),
+            : tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx))), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), (isFullScreen
+            ? {
+                height: '100vh',
+                margin: 0,
+                maxHeight: '100vh',
+                maxWidth: '100vw',
+                padding: 0,
+                width: '100vw',
+            }
+            : {})) }),
+        enableTopToolbar &&
+            (renderTopToolbar instanceof Function
+                ? renderTopToolbar({ table })
+                : renderTopToolbar !== null && renderTopToolbar !== void 0 ? renderTopToolbar : React.createElement(MRT_TopToolbar, { table: table })),
         React.createElement(MRT_TableContainer, { table: table }),
-        enableBottomToolbar && React.createElement(MRT_BottomToolbar, { table: table })));
+        enableBottomToolbar &&
+            (renderBottomToolbar instanceof Function
+                ? renderBottomToolbar({ table })
+                : renderBottomToolbar !== null && renderBottomToolbar !== void 0 ? renderBottomToolbar : React.createElement(MRT_BottomToolbar, { table: table }))));
 };
 
 const MRT_EditRowModal = ({ open, row, table, }) => {
@@ -2400,6 +2423,7 @@ const MRT_TableRoot = (props) => {
     const filterInputRefs = useRef({});
     const searchInputRef = useRef(null);
     const tableContainerRef = useRef(null);
+    const tablePaperRef = useRef(null);
     const topToolbarRef = useRef(null);
     const initialState = useMemo(() => {
         var _a, _b;
@@ -2435,14 +2459,14 @@ const MRT_TableRoot = (props) => {
     const [showColumnFilters, setShowFilters] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
     const [showGlobalFilter, setShowGlobalFilter] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
     const displayColumns = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e;
         return [
-            columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: (_a = props.localization) === null || _a === void 0 ? void 0 : _a.move, size: 60 }, props.defaultDisplayColumn), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-drag']), { id: 'mrt-row-drag' }),
-            columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React.createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: (_c = props.localization) === null || _c === void 0 ? void 0 : _c.actions, size: 70 }, props.defaultDisplayColumn), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-actions']), { id: 'mrt-row-actions' }),
+            columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: props.localization.move, size: 60 }, props.defaultDisplayColumn), (_a = props.displayColumnDefOptions) === null || _a === void 0 ? void 0 : _a['mrt-row-drag']), { id: 'mrt-row-drag' }),
+            columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React.createElement(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: props.localization.actions, size: 70 }, props.defaultDisplayColumn), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-actions']), { id: 'mrt-row-actions' }),
             columnOrder.includes('mrt-row-expand') &&
-                showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React.createElement(MRT_ExpandAllButton, { table: table })) : null, header: (_e = props.localization) === null || _e === void 0 ? void 0 : _e.expand, size: 60 }, props.defaultDisplayColumn), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-expand']), { id: 'mrt-row-expand' }),
-            columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll ? (React.createElement(MRT_SelectCheckbox, { selectAll: true, table: table })) : null, header: (_g = props.localization) === null || _g === void 0 ? void 0 : _g.select, size: 60 }, props.defaultDisplayColumn), (_h = props.displayColumnDefOptions) === null || _h === void 0 ? void 0 : _h['mrt-row-select']), { id: 'mrt-row-select' }),
-            columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => { var _a; return (_a = props.localization) === null || _a === void 0 ? void 0 : _a.rowNumber; }, header: (_j = props.localization) === null || _j === void 0 ? void 0 : _j.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_k = props.displayColumnDefOptions) === null || _k === void 0 ? void 0 : _k['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
+                showExpandColumn(props, grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React.createElement(MRT_ExpandAllButton, { table: table })) : null, header: props.localization.expand, size: 60 }, props.defaultDisplayColumn), (_c = props.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-expand']), { id: 'mrt-row-expand' }),
+            columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll ? (React.createElement(MRT_SelectCheckbox, { selectAll: true, table: table })) : null, header: props.localization.select, size: 60 }, props.defaultDisplayColumn), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-select']), { id: 'mrt-row-select' }),
+            columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => props.localization.rowNumber, header: props.localization.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_e = props.displayColumnDefOptions) === null || _e === void 0 ? void 0 : _e['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
         ].filter(Boolean);
     }, [
         columnOrder,
@@ -2520,22 +2544,39 @@ const MRT_TableRoot = (props) => {
             filterInputRefs,
             searchInputRef,
             tableContainerRef,
+            tablePaperRef,
             topToolbarRef,
         }, setColumnFilterFns: (_x = props.onFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns, setDensity: (_y = props.onDensityChange) !== null && _y !== void 0 ? _y : setDensity, setDraggingColumn: (_z = props.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn, setDraggingRow: (_0 = props.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow, setEditingCell: (_1 = props.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell, setEditingRow: (_2 = props.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow, setGlobalFilterFn: (_3 = props.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn, setHoveredColumn: (_4 = props.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn, setHoveredRow: (_5 = props.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow, setIsFullScreen: (_6 = props.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen, setShowAlertBanner: (_7 = props.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner, setShowFilters: (_8 = props.onShowFiltersChange) !== null && _8 !== void 0 ? _8 : setShowFilters, setShowGlobalFilter: (_9 = props.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter });
     if (props.tableInstanceRef) {
         props.tableInstanceRef.current = table;
     }
+    const initialBodyHeight = useRef();
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            initialBodyHeight.current = document.body.style.height;
+        }
+    }, []);
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            if (table.getState().isFullScreen) {
+                document.body.style.height = '100vh';
+            }
+            else {
+                document.body.style.height = initialBodyHeight.current;
+            }
+        }
+    }, [table.getState().isFullScreen]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => setIsFullScreen(false), open: isFullScreen, transitionDuration: 400 },
+        React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400 },
             React.createElement(MRT_TablePaper, { table: table })),
-        !isFullScreen && React.createElement(MRT_TablePaper, { table: table }),
+        !table.getState().isFullScreen && (React.createElement(MRT_TablePaper, { table: table })),
         editingRow && props.editingMode === 'modal' && (React.createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));
 };
 
 var MaterialReactTable = (_a) => {
     var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "defaultDisplayColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
-    return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, defaultDisplayColumn: Object.assign({ columnDefType: 'display', enableClickToCopy: false, enableColumnActions: false, enableColumnDragging: false, enableColumnFilter: false, enableColumnOrdering: false, enableEditing: false, enableGlobalFilter: false, enableGrouping: false, enableHiding: false, enableResizing: false, enableSorting: false }, defaultDisplayColumn), editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
+    return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, defaultDisplayColumn: Object.assign({ columnDefType: 'display', enableClickToCopy: false, enableColumnActions: false, enableColumnDragging: false, enableColumnFilter: false, enableColumnOrdering: false, enableEditing: false, enableGlobalFilter: false, enableGrouping: false, enableHiding: false, enableResizing: false, enableSorting: false }, defaultDisplayColumn), editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_Localization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
 };
 
-export { MRT_CopyButton, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTable as default };
+export { MRT_CopyButton, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToolbarInternalButtons, MaterialReactTable as default };
 //# sourceMappingURL=material-react-table.esm.js.map