material-react-table 1.0.10 → 1.1.0-beta.0

package/dist/cjs/MaterialReactTable.d.ts

@@ -1,5 +1,5 @@
 import { Dispatch, MutableRefObject, ReactNode, SetStateAction } from 'react';
-import type { AlertProps, ButtonProps, CheckboxProps, ChipProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
+import type { AlertProps, ButtonProps, CheckboxProps, ChipProps, IconButtonProps, LinearProgressProps, PaperProps, RadioProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import type { Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
 import type { Options as VirtualizerOptions, VirtualItem } from 'react-virtual';
 import { MRT_Icons } from './icons';
@@ -448,6 +448,13 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
      * @link https://www.material-react-table.com/docs/guides/localization
      */
     localization?: Partial<MRT_Localization>;
+    /**
+     * Memoize cells, rows, or the entire table body to potentially improve render performance.
+     *
+     * @warning This will break some dynamic rendering features. See the memoization guide for more info:
+     * @link https://www.material-react-table.com/docs/guides/memoize-components
+     */
+    memoMode?: 'cell' | 'row' | 'table-body';
     muiBottomToolbarProps?: ToolbarProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => ToolbarProps);
@@ -468,10 +475,10 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     muiSelectAllCheckboxProps?: CheckboxProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => CheckboxProps);
-    muiSelectCheckboxProps?: CheckboxProps | (({ table, row, }: {
+    muiSelectCheckboxProps?: (CheckboxProps | RadioProps) | (({ table, row, }: {
         table: MRT_TableInstance<TData>;
         row: MRT_Row<TData>;
-    }) => CheckboxProps);
+    }) => CheckboxProps | RadioProps);
     muiTableBodyCellCopyButtonProps?: ButtonProps | (({ cell, column, row, table, }: {
         cell: MRT_Cell<TData>;
         column: MRT_Column<TData>;

package/dist/cjs/body/MRT_TableBody.d.ts

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import type { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
 }
 export declare const MRT_TableBody: FC<Props>;
+export declare const Memo_MRT_TableBody: React.NamedExoticComponent<Props>;
 export {};

package/dist/cjs/body/MRT_TableBodyCell.d.ts

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

package/dist/cjs/body/MRT_TableBodyRow.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
     row: MRT_Row;
@@ -7,4 +7,5 @@ interface Props {
     virtualRow?: any;
 }
 export declare const MRT_TableBodyRow: FC<Props>;
+export declare const Memo_MRT_TableBodyRow: React.NamedExoticComponent<Props>;
 export {};

package/dist/cjs/index.js

@@ -281,7 +281,7 @@ const MRT_ExpandAllButton = ({ table }) => {
                             : getIsSomeRowsExpanded()
                                 ? -90
                                 : 0}deg)`,
-                        transition: 'transform 0.1s',
+                        transition: 'transform 150ms',
                     } })))));
 };
 
@@ -309,7 +309,7 @@ const MRT_ExpandButton = ({ row, table }) => {
                             : row.getIsExpanded()
                                 ? -180
                                 : 0}deg)`,
-                        transition: 'transform 0.1s',
+                        transition: 'transform 150ms',
                     } })))));
 };
 
@@ -497,7 +497,7 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
                 var _a;
                 e.stopPropagation();
                 (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
-            }, onDragStart: onDragStart, onDragEnd: onDragEnd, sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 0.1s ease-in-out', '&:hover': {
+            }, onDragStart: onDragStart, onDragEnd: onDragEnd, sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 150ms ease-in-out', '&:hover': {
                     backgroundColor: 'transparent',
                     opacity: 1,
                 }, '&:active': {
@@ -641,7 +641,7 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
             ? 'sticky'
             : undefined, right: column.getIsPinned() === 'right'
             ? `${getTotalRight(table, column)}px`
-            : undefined, transition: `all ${column.getIsResizing() ? 0 : '0.1s'} ease-in-out` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+            : undefined, transition: `all ${column.getIsResizing() ? 0 : '150ms'} 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() }));
 };
@@ -1015,7 +1015,7 @@ const commonIconButtonStyles = {
     height: '2rem',
     ml: '10px',
     opacity: 0.5,
-    transition: 'opacity 0.1s',
+    transition: 'opacity 150ms',
     width: '2rem',
     '&:hover': {
         opacity: 1,
@@ -1046,7 +1046,7 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
 
 const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
     var _a;
-    const { getState, options: { localization, muiSelectCheckboxProps, muiSelectAllCheckboxProps, selectAllMode, }, } = table;
+    const { getState, options: { localization, enableMultiRowSelection, muiSelectCheckboxProps, muiSelectAllCheckboxProps, selectAllMode, }, } = table;
     const { density } = getState();
     const checkboxProps = !row
         ? muiSelectAllCheckboxProps instanceof Function
@@ -1055,33 +1055,33 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
         : muiSelectCheckboxProps instanceof Function
             ? muiSelectCheckboxProps({ row, table })
             : muiSelectCheckboxProps;
+    const commonProps = Object.assign(Object.assign({ checked: selectAll
+            ? selectAllMode === 'page'
+                ? table.getIsAllPageRowsSelected()
+                : table.getIsAllRowsSelected()
+            : row === null || row === void 0 ? void 0 : row.getIsSelected(), inputProps: {
+            'aria-label': selectAll
+                ? localization.toggleSelectAll
+                : localization.toggleSelectRow,
+        }, onChange: row
+            ? row.getToggleSelectedHandler()
+            : selectAllMode === 'all'
+                ? table.getToggleAllRowsSelectedHandler()
+                : table.getToggleAllPageRowsSelectedHandler(), size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
+            var _a;
+            e.stopPropagation();
+            (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
+        }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
+            ? checkboxProps.sx(theme)
+            : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))), title: undefined });
     return (React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
             ? localization.toggleSelectAll
-            : localization.toggleSelectRow) },
-        React__default["default"].createElement(material.Checkbox, Object.assign({ checked: selectAll
-                ? selectAllMode === 'page'
+            : localization.toggleSelectRow) }, enableMultiRowSelection === false ? (React__default["default"].createElement(material.Radio, Object.assign({}, commonProps))) : (React__default["default"].createElement(material.Checkbox, Object.assign({ indeterminate: selectAll
+            ? table.getIsSomeRowsSelected() &&
+                !(selectAllMode === 'page'
                     ? table.getIsAllPageRowsSelected()
-                    : table.getIsAllRowsSelected()
-                : row === null || row === void 0 ? void 0 : row.getIsSelected(), indeterminate: selectAll
-                ? table.getIsSomeRowsSelected() &&
-                    !(selectAllMode === 'page'
-                        ? table.getIsAllPageRowsSelected()
-                        : table.getIsAllRowsSelected())
-                : row === null || row === void 0 ? void 0 : row.getIsSomeSelected(), inputProps: {
-                'aria-label': selectAll
-                    ? localization.toggleSelectAll
-                    : localization.toggleSelectRow,
-            }, onChange: row
-                ? row.getToggleSelectedHandler()
-                : selectAllMode === 'all'
-                    ? table.getToggleAllRowsSelectedHandler()
-                    : table.getToggleAllPageRowsSelectedHandler(), size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
-                var _a;
-                e.stopPropagation();
-                (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
-            }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
-                ? checkboxProps.sx(theme)
-                : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))), title: undefined }))));
+                    : table.getIsAllRowsSelected())
+            : row === null || row === void 0 ? void 0 : row.getIsSomeSelected() }, commonProps)))));
 };
 
 const MRT_GlobalFilterTextField = ({ table, }) => {
@@ -1344,7 +1344,7 @@ const commonToolbarStyles = ({ theme }) => ({
     minHeight: '3.5rem',
     overflow: 'hidden',
     p: '0 !important',
-    transition: 'all 0.1s ease-in-out',
+    transition: 'all 150ms ease-in-out',
     zIndex: 1,
 });
 const MRT_TopToolbar = ({ table }) => {
@@ -1454,13 +1454,13 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
-            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', mt: '-0.2rem', opacity: 0.5, transition: 'opacity 0.1s', width: '2rem', '&:hover': {
+            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', mt: '-0.2rem', opacity: 0.5, transition: 'opacity 150ms', width: '2rem', '&:hover': {
                         opacity: 1,
                     } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
                     : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
                 React__default["default"].createElement(MoreVertIcon, null))),
-        React__default["default"].createElement(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table })));
+        anchorEl && (React__default["default"].createElement(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))));
 };
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
@@ -1798,7 +1798,9 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
             position: 'absolute',
             right: '1px',
             touchAction: 'none',
-            transition: column.getIsResizing() ? undefined : 'all 0.1s ease-in-out',
+            transition: column.getIsResizing()
+                ? undefined
+                : 'all 150ms ease-in-out',
             userSelect: 'none',
             zIndex: 4,
             '&:active': {
@@ -1959,11 +1961,13 @@ const MRT_TableHeadRow = ({ headerGroup, table }) => {
 };
 
 const MRT_TableHead = ({ table }) => {
-    const { getHeaderGroups, options: { enableStickyHeader, muiTableHeadProps }, } = table;
+    const { getHeaderGroups, getState, options: { enableStickyHeader, muiTableHeadProps, enableRowVirtualization }, } = table;
+    const { isFullScreen } = getState();
     const tableHeadProps = muiTableHeadProps instanceof Function
         ? muiTableHeadProps({ table })
         : muiTableHeadProps;
-    return (React__default["default"].createElement(material.TableHead, Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ opacity: 0.97, position: enableStickyHeader ? 'sticky' : undefined, zIndex: enableStickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
+    const stickyHeader = enableStickyHeader || enableRowVirtualization || isFullScreen;
+    return (React__default["default"].createElement(material.TableHead, Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ opacity: 0.97, position: stickyHeader ? 'sticky' : undefined, zIndex: stickyHeader ? 2 : 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__default["default"].createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
 };
@@ -2180,7 +2184,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                 : undefined,
         }
         : undefined;
-    return (React__default["default"].createElement(material.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'
+    return (React__default["default"].createElement(material.TableCell, Object.assign({}, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
                 ? columnDefType === 'display'
                     ? '0 0.5rem'
                     : '0.5rem'
@@ -2220,6 +2224,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
             _b.length,
             ")"))));
 };
+const Memo_MRT_TableBodyCell = React.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
 const MRT_TableDetailPanel = ({ row, table }) => {
     const { getVisibleLeafColumns, options: { muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
@@ -2230,7 +2235,7 @@ const MRT_TableDetailPanel = ({ row, table }) => {
         ? muiTableDetailPanelProps({ row, table })
         : muiTableDetailPanelProps;
     return (React__default["default"].createElement(material.TableRow, Object.assign({}, tableRowProps),
-        React__default["default"].createElement(material.TableCell, Object.assign({ colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ borderBottom: !row.getIsExpanded() ? 'none' : undefined, pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 0.1s ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+        React__default["default"].createElement(material.TableCell, Object.assign({ colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ borderBottom: !row.getIsExpanded() ? 'none' : undefined, pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
                 ? tableCellProps.sx(theme)
                 : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React__default["default"].createElement(material.Collapse, { in: row.getIsExpanded() }, renderDetailPanel({ row, table }))))));
 };
@@ -2238,8 +2243,8 @@ const MRT_TableDetailPanel = ({ row, table }) => {
 const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
     var _a, _b;
     const theme = material.useTheme();
-    const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, muiTableBodyRowProps, renderDetailPanel }, setHoveredRow, } = table;
-    const { draggingRow, hoveredRow } = getState();
+    const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
+    const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
         ? muiTableBodyRowProps({ row, table })
         : muiTableBodyRowProps;
@@ -2265,7 +2270,7 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
                 if (virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.measureRef) {
                     virtualRow.measureRef = node;
                 }
-            } }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: material.lighten(theme.palette.background.default, 0.06), opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, transition: 'all 0.1s ease-in-out', '&:hover td': {
+            } }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: material.lighten(theme.palette.background.default, 0.06), opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, transition: 'all 150ms ease-in-out', '&:hover td': {
                     backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned()
                         ? theme.palette.mode === 'dark'
                             ? `${material.lighten(theme.palette.background.default, 0.12)}`
@@ -2273,13 +2278,29 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
                         : undefined,
                 } }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
                 ? tableRowProps.sx(theme)
-                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)), draggingBorders)) }), (_b = (_a = row === null || row === void 0 ? void 0 : row.getVisibleCells()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (cell) => (React__default["default"].createElement(MRT_TableBodyCell, { cell: cell, enableHover: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false, key: cell.id, rowIndex: rowIndex, rowRef: rowRef, table: table })))),
+                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)), draggingBorders)) }), (_b = (_a = row === null || row === void 0 ? void 0 : row.getVisibleCells()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (cell) => {
+            const props = {
+                cell,
+                enableHover: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false,
+                key: cell.id,
+                rowIndex,
+                rowRef,
+                table,
+            };
+            return memoMode === 'cell' &&
+                cell.column.columnDef.columnDefType === 'data' &&
+                !draggingColumn &&
+                !draggingRow &&
+                (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
+                (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (React__default["default"].createElement(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (React__default["default"].createElement(MRT_TableBodyCell, Object.assign({}, props)));
+        })),
         renderDetailPanel && !row.getIsGrouped() && (React__default["default"].createElement(MRT_TableDetailPanel, { row: row, table: table }))));
 };
+const Memo_MRT_TableBodyRow = React.memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row);
 
 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 { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, localization, manualFiltering, manualSorting, memoMode, muiTableBodyProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
     const { columnFilters, globalFilter, pagination, sorting } = getState();
     const tableBodyProps = muiTableBodyProps instanceof Function
         ? muiTableBodyProps({ table })
@@ -2363,11 +2384,21 @@ const MRT_TableBody = ({ table }) => {
             const row = enableRowVirtualization
                 ? rows[rowOrVirtualRow.index]
                 : rowOrVirtualRow;
-            return (React__default["default"].createElement(MRT_TableBodyRow, { key: row.id, row: row, rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex, table: table, virtualRow: enableRowVirtualization ? rowOrVirtualRow : null }));
+            const props = {
+                key: row.id,
+                row,
+                rowIndex: enableRowVirtualization
+                    ? rowOrVirtualRow.index
+                    : rowIndex,
+                table,
+                virtualRow: enableRowVirtualization ? rowOrVirtualRow : null,
+            };
+            return memoMode === 'row' ? (React__default["default"].createElement(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (React__default["default"].createElement(MRT_TableBodyRow, Object.assign({}, props)));
         }),
         enableRowVirtualization && paddingBottom > 0 && (React__default["default"].createElement("tr", null,
             React__default["default"].createElement("td", { style: { height: `${paddingBottom}px` } })))))));
 };
+const Memo_MRT_TableBody = React.memo(MRT_TableBody, () => true);
 
 const MRT_TableFooterCell = ({ footer, table }) => {
     var _a, _b, _c;
@@ -2430,7 +2461,7 @@ const MRT_TableFooter = ({ table }) => {
 };
 
 const MRT_Table = ({ table }) => {
-    const { getState, options: { enableColumnResizing, enableRowVirtualization, enableStickyHeader, enableTableFooter, enableTableHead, muiTableProps, }, } = table;
+    const { getState, options: { enableColumnResizing, enableRowVirtualization, enableStickyHeader, enableTableFooter, enableTableHead, memoMode, muiTableProps, }, } = table;
     const { isFullScreen } = getState();
     const tableProps = muiTableProps instanceof Function
         ? muiTableProps({ table })
@@ -2439,7 +2470,7 @@ const MRT_Table = ({ table }) => {
             ? tableProps.sx(theme)
             : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
         enableTableHead && React__default["default"].createElement(MRT_TableHead, { table: table }),
-        React__default["default"].createElement(MRT_TableBody, { table: table }),
+        memoMode === 'table-body' ? (React__default["default"].createElement(Memo_MRT_TableBody, { table: table })) : (React__default["default"].createElement(MRT_TableBody, { table: table })),
         enableTableFooter && React__default["default"].createElement(MRT_TableFooter, { table: table })));
 };
 
@@ -2489,7 +2520,7 @@ const MRT_TablePaper = ({ table }) => {
                 //@ts-ignore
                 tablePaperProps.ref.current = ref;
             }
-        }, sx: (theme) => (Object.assign({ transition: 'all 0.1s ease-in-out' }, ((tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx) instanceof Function
+        }, sx: (theme) => (Object.assign({ transition: 'all 150ms 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), (isFullScreen
             ? {
@@ -2580,7 +2611,7 @@ const MRT_TableRoot = (props) => {
             columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (React__default["default"].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__default["default"].createElement(MRT_ExpandButton, { row: row, table: table })), Header: () => props.enableExpandAll ? (React__default["default"].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__default["default"].createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll ? (React__default["default"].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-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React__default["default"].createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll && props.enableMultiRowSelection ? (React__default["default"].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);
     }, [