material-react-table 1.0.0-beta.2 → 1.0.0-beta.5

package/dist/cjs/localization.d.ts

@@ -47,6 +47,8 @@ export interface MRT_Localization {
     max: string;
     min: string;
     move: string;
+    noRecordsToDisplay: string;
+    noResultsFound: string;
     or: string;
     pinToLeft: string;
     pinToRight: string;

package/dist/cjs/toolbar/MRT_ToolbarAlertBanner.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
-    stackAlertBanner?: boolean;
+    stackAlertBanner: boolean;
     table: MRT_TableInstance;
 }
 export declare const MRT_ToolbarAlertBanner: FC<Props>;

package/dist/esm/MaterialReactTable.d.ts

@@ -326,7 +326,7 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     muiExpandAllButtonProps?: IconButtonProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => IconButtonProps);
-    muiExpandButtonProps?: IconButtonProps | (({ table, }: {
+    muiExpandButtonProps?: IconButtonProps | (({ row, table, }: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
     }) => IconButtonProps);
@@ -362,9 +362,11 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => TableCellProps);
-    muiTableBodyCellSkeletonProps?: SkeletonProps | (({ table, cell, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellSkeletonProps?: SkeletonProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
+        column: MRT_Column<TData>;
+        row: MRT_Row<TData>;
+        table: MRT_TableInstance<TData>;
     }) => SkeletonProps);
     muiTableBodyProps?: TableBodyProps | (({ table }: {
         table: MRT_TableInstance<TData>;

package/dist/esm/body/MRT_TableBodyCellValue.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import React from 'react';
 import { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
     cell: MRT_Cell;
     table: MRT_TableInstance;
 }
-export declare const MRT_TableBodyCellValue: FC<Props>;
+export declare const MRT_TableBodyCellValue: React.NamedExoticComponent<Props>;
 export {};

package/dist/esm/column.utils.d.ts

@@ -1,5 +1,6 @@
 import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
-import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption } from '.';
+import { TableCellProps, Theme } from '@mui/material';
+import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption, MRT_Header, MRT_TableInstance } from '.';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
 export declare const getColumnId: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => string;
@@ -92,3 +93,13 @@ export declare const getLeadingDisplayColumnIds: <TData extends Record<string, a
 export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => (string | false | undefined)[];
 export declare const getDefaultColumnOrderIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];
 export declare const getDefaultColumnFilterFn: <TData extends Record<string, any> = {}>(columnDef: MRT_ColumnDef<TData>) => MRT_FilterOption;
+export declare const getIsLastLeftPinnedColumn: (table: MRT_TableInstance, column: MRT_Column) => boolean;
+export declare const getIsFirstRightPinnedColumn: (column: MRT_Column) => boolean;
+export declare const getTotalRight: (table: MRT_TableInstance, column: MRT_Column) => number;
+export declare const getCommonCellStyles: ({ column, header, table, tableCellProps, theme, }: {
+    column: MRT_Column;
+    header?: MRT_Header<{}> | undefined;
+    table: MRT_TableInstance;
+    tableCellProps: TableCellProps;
+    theme: Theme;
+}) => any;

package/dist/esm/localization.d.ts

@@ -47,6 +47,8 @@ export interface MRT_Localization {
     max: string;
     min: string;
     move: string;
+    noRecordsToDisplay: string;
+    noResultsFound: string;
     or: string;
     pinToLeft: string;
     pinToRight: string;

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, useEffect, memo, 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';
 
 /******************************************************************************
@@ -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',
@@ -587,6 +589,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;
@@ -1082,7 +1115,7 @@ const MRT_TablePagination = ({ table, position }) => {
 
 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 +1133,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),
@@ -1294,10 +1331,10 @@ const MRT_BottomToolbar = ({ table }) => {
             ? 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',
@@ -1680,7 +1717,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;
@@ -1692,16 +1729,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()) * 180);
-    };
     const handleDragEnter = (_e) => {
         if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
             setHoveredColumn(null);
@@ -1730,44 +1757,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',
@@ -1943,7 +1959,7 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
     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;
@@ -1965,6 +1981,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;
@@ -1981,6 +1998,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 &&
@@ -2011,16 +2031,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);
@@ -2049,53 +2059,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' ||
@@ -2166,8 +2157,8 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
 };
 
 const MRT_TableBody = ({ table }) => {
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, manualFiltering, manualSorting, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef }, } = table;
-    const { globalFilter, pagination, sorting } = getState();
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, localization, manualFiltering, manualSorting, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef }, } = table;
+    const { columnFilters, globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
         : muiTableBodyProps;
@@ -2232,7 +2223,16 @@ const MRT_TableBody = ({ table }) => {
     //     ? 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(TableRow, null,
+        React.createElement(TableCell, { colSpan: table.getVisibleLeafColumns().length },
+            React.createElement(Box, { sx: {
+                    maxWidth: '100vw',
+                    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) => {
@@ -2242,12 +2242,12 @@ const MRT_TableBody = ({ table }) => {
             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;
@@ -2259,13 +2259,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
@@ -2532,7 +2530,7 @@ const MRT_TableRoot = (props) => {
     return (React.createElement(React.Fragment, null,
         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 })),
-        !table.getState().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 }))));
 };