material-react-table 1.0.11 → 1.1.0-beta.1

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

@@ -1,8 +1,8 @@
-import React, { useMemo, useRef, useState, useCallback, useEffect, Fragment, useLayoutEffect } from 'react';
+import React, { useMemo, useRef, useState, useCallback, useEffect, Fragment, 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 { alpha, lighten, Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Radio, 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 { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
-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 { 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 { useVirtual } from 'react-virtual';
 
 /******************************************************************************
@@ -34,37 +34,161 @@ function __rest(s, e) {
 
 const MRT_AggregationFns = Object.assign({}, aggregationFns);
 
-const MRT_Default_Icons = {
-    ArrowRightIcon: ArrowRight,
-    CancelIcon: Cancel,
-    CheckBoxIcon: CheckBox,
-    ClearAllIcon: ClearAll,
-    CloseIcon: Close,
-    DensityLargeIcon: DensityLarge,
-    DensityMediumIcon: DensityMedium,
-    DensitySmallIcon: DensitySmall,
-    DragHandleIcon: DragHandle,
-    DynamicFeedIcon: DynamicFeed,
-    EditIcon: Edit,
-    ExpandLessIcon: ExpandLess,
-    ExpandMoreIcon: ExpandMore,
-    FilterAltIcon: FilterAlt,
-    FilterAltOffIcon: FilterAltOff,
-    FilterListIcon: FilterList,
-    FilterListOffIcon: FilterListOff,
-    FullscreenExitIcon: FullscreenExit,
-    FullscreenIcon: Fullscreen,
-    KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDown,
-    MoreHorizIcon: MoreHoriz,
-    MoreVertIcon: MoreVert,
-    PushPinIcon: PushPin,
-    RestartAltIcon: RestartAlt,
-    SaveIcon: Save,
-    SearchIcon: Search,
-    SearchOffIcon: SearchOff,
-    SortIcon: Sort,
-    ViewColumnIcon: ViewColumn,
-    VisibilityOffIcon: VisibilityOff,
+const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
+const getAllLeafColumnDefs = (columns) => {
+    const allLeafColumnDefs = [];
+    const getLeafColumns = (cols) => {
+        cols.forEach((col) => {
+            if (col.columns) {
+                getLeafColumns(col.columns);
+            }
+            else {
+                allLeafColumnDefs.push(col);
+            }
+        });
+    };
+    getLeafColumns(columns);
+    return allLeafColumnDefs;
+};
+const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
+    var _a, _b;
+    if (!columnDef.id)
+        columnDef.id = getColumnId(columnDef);
+    if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
+        console.error('Column definitions must have a valid `accessorKey` or `id` property');
+    }
+    if (!columnDef.columnDefType)
+        columnDef.columnDefType = 'data';
+    if (!!((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length)) {
+        columnDef.columnDefType = 'group';
+        columnDef.columns = prepareColumns({
+            columnDefs: columnDef.columns,
+            columnFilterFns,
+            defaultDisplayColumn,
+            filterFns,
+            sortingFns,
+        });
+    }
+    else if (columnDef.columnDefType === 'data') {
+        if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
+            columnDef.filterFn =
+                (_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
+            columnDef._filterFn =
+                columnFilterFns[columnDef.id];
+        }
+        if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
+            // @ts-ignore
+            columnDef.sortingFn = sortingFns[columnDef.sortingFn];
+        }
+    }
+    else if (columnDef.columnDefType === 'display') {
+        columnDef = Object.assign(Object.assign({}, defaultDisplayColumn), columnDef);
+    }
+    return columnDef;
+});
+const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
+    if (draggedColumn.getCanPin()) {
+        draggedColumn.pin(targetColumn.getIsPinned());
+    }
+    columnOrder.splice(columnOrder.indexOf(targetColumn.id), 0, columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0]);
+    return [...columnOrder];
+};
+const showExpandColumn = (props, grouping) => !!(props.enableExpanding ||
+    (props.enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
+    props.renderDetailPanel);
+const getLeadingDisplayColumnIds = (props) => {
+    var _a;
+    return [
+        (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
+        props.positionActionsColumn === 'first' &&
+            (props.enableRowActions ||
+                (props.enableEditing &&
+                    ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
+            'mrt-row-actions',
+        props.positionExpandColumn === 'first' &&
+            showExpandColumn(props) &&
+            'mrt-row-expand',
+        props.enableRowSelection && 'mrt-row-select',
+        props.enableRowNumbers && 'mrt-row-numbers',
+    ].filter(Boolean);
+};
+const getTrailingDisplayColumnIds = (props) => {
+    var _a;
+    return [
+        props.positionActionsColumn === 'last' &&
+            (props.enableRowActions ||
+                (props.enableEditing &&
+                    ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
+            'mrt-row-actions',
+        props.positionExpandColumn === 'last' &&
+            showExpandColumn(props) &&
+            'mrt-row-expand',
+    ];
+};
+const getDefaultColumnOrderIds = (props) => [
+    ...getLeadingDisplayColumnIds(props),
+    ...getAllLeafColumnDefs(props.columns).map((columnDef) => getColumnId(columnDef)),
+    ...getTrailingDisplayColumnIds(props),
+].filter(Boolean);
+const getDefaultColumnFilterFn = (columnDef) => {
+    if (columnDef.filterVariant === 'multi-select')
+        return 'arrIncludesSome';
+    if (columnDef.filterVariant === 'range')
+        return 'betweenInclusive';
+    if (columnDef.filterVariant === 'select' ||
+        columnDef.filterVariant === 'checkbox')
+        return 'equals';
+    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.97)
+            : '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 : '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() }));
+};
+const MRT_DefaultColumn = {
+    minSize: 40,
+    maxSize: 1000,
+    size: 180,
+};
+const MRT_DefaultDisplayColumn = {
+    columnDefType: 'display',
+    enableClickToCopy: false,
+    enableColumnActions: false,
+    enableColumnDragging: false,
+    enableColumnFilter: false,
+    enableColumnOrdering: false,
+    enableEditing: false,
+    enableGlobalFilter: false,
+    enableGrouping: false,
+    enableHiding: false,
+    enableResizing: false,
+    enableSorting: false,
 };
 
 const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
@@ -151,94 +275,37 @@ const MRT_FilterFns = Object.assign(Object.assign({}, filterFns), { between,
     notEquals,
     startsWith });
 
-const MRT_Localization_EN = {
-    actions: 'Actions',
-    and: 'and',
-    cancel: 'Cancel',
-    changeFilterMode: 'Change filter mode',
-    changeSearchMode: 'Change search mode',
-    clearFilter: 'Clear filter',
-    clearSearch: 'Clear search',
-    clearSort: 'Clear sort',
-    clickToCopy: 'Click to copy',
-    columnActions: 'Column Actions',
-    copiedToClipboard: 'Copied to clipboard',
-    dropToGroupBy: 'Drop to group by {column}',
-    edit: 'Edit',
-    expand: 'Expand',
-    expandAll: 'Expand all',
-    filterArrIncludes: 'Includes',
-    filterArrIncludesAll: 'Includes all',
-    filterArrIncludesSome: 'Includes',
-    filterBetween: 'Between',
-    filterBetweenInclusive: 'Between Inclusive',
-    filterByColumn: 'Filter by {column}',
-    filterContains: 'Contains',
-    filterEmpty: 'Empty',
-    filterEndsWith: 'Ends With',
-    filterEquals: 'Equals',
-    filterEqualsString: 'Equals',
-    filterFuzzy: 'Fuzzy',
-    filterGreaterThan: 'Greater Than',
-    filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
-    filterInNumberRange: 'Between',
-    filterIncludesString: 'Contains',
-    filterIncludesStringSensitive: 'Contains',
-    filterLessThan: 'Less Than',
-    filterLessThanOrEqualTo: 'Less Than Or Equal To',
-    filterMode: 'Filter Mode: {filterType}',
-    filterNotEmpty: 'Not Empty',
-    filterNotEquals: 'Not Equals',
-    filterStartsWith: 'Starts With',
-    filterWeakEquals: 'Equals',
-    filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
-    goToFirstPage: 'Go to first page',
-    goToLastPage: 'Go to last page',
-    goToNextPage: 'Go to next page',
-    goToPreviousPage: 'Go to previous page',
-    grab: 'Grab',
-    groupByColumn: 'Group by {column}',
-    groupedBy: 'Grouped by ',
-    hideAll: 'Hide all',
-    hideColumn: 'Hide {column} column',
-    max: 'Max',
-    min: 'Min',
-    move: 'Move',
-    noRecordsToDisplay: 'No records to display',
-    noResultsFound: 'No results found',
-    of: 'of',
-    or: 'or',
-    pinToLeft: 'Pin to left',
-    pinToRight: 'Pin to right',
-    resetColumnSize: 'Reset column size',
-    resetOrder: 'Reset order',
-    rowActions: 'Row Actions',
-    rowNumber: '#',
-    rowNumbers: 'Row Numbers',
-    rowsPerPage: 'Rows per page',
-    save: 'Save',
-    search: 'Search',
-    selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
-    select: 'Select',
-    showAll: 'Show all',
-    showAllColumns: 'Show all columns',
-    showHideColumns: 'Show/Hide columns',
-    showHideFilters: 'Show/Hide filters',
-    showHideSearch: 'Show/Hide search',
-    sortByColumnAsc: 'Sort by {column} ascending',
-    sortByColumnDesc: 'Sort by {column} descending',
-    sortedByColumnAsc: 'Sorted by {column} ascending',
-    sortedByColumnDesc: 'Sorted by {column} descending',
-    thenBy: ', then by ',
-    toggleDensity: 'Toggle density',
-    toggleFullScreen: 'Toggle full screen',
-    toggleSelectAll: 'Toggle select all',
-    toggleSelectRow: 'Toggle select row',
-    toggleVisibility: 'Toggle visibility',
-    ungroupByColumn: 'Ungroup by {column}',
-    unpin: 'Unpin',
-    unpinAll: 'Unpin all',
-    unsorted: 'Unsorted',
+const MRT_Default_Icons = {
+    ArrowRightIcon: ArrowRight,
+    CancelIcon: Cancel,
+    CheckBoxIcon: CheckBox,
+    ClearAllIcon: ClearAll,
+    CloseIcon: Close,
+    DensityLargeIcon: DensityLarge,
+    DensityMediumIcon: DensityMedium,
+    DensitySmallIcon: DensitySmall,
+    DragHandleIcon: DragHandle,
+    DynamicFeedIcon: DynamicFeed,
+    EditIcon: Edit,
+    ExpandLessIcon: ExpandLess,
+    ExpandMoreIcon: ExpandMore,
+    FilterAltIcon: FilterAlt,
+    FilterAltOffIcon: FilterAltOff,
+    FilterListIcon: FilterList,
+    FilterListOffIcon: FilterListOff,
+    FullscreenExitIcon: FullscreenExit,
+    FullscreenIcon: Fullscreen,
+    KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDown,
+    MoreHorizIcon: MoreHoriz,
+    MoreVertIcon: MoreVert,
+    PushPinIcon: PushPin,
+    RestartAltIcon: RestartAlt,
+    SaveIcon: Save,
+    SearchIcon: Search,
+    SearchOffIcon: SearchOff,
+    SortIcon: Sort,
+    ViewColumnIcon: ViewColumn,
+    VisibilityOffIcon: VisibilityOff,
 };
 
 const fuzzy = (rowA, rowB, columnId) => {
@@ -273,7 +340,7 @@ const MRT_ExpandAllButton = ({ table }) => {
                             : getIsSomeRowsExpanded()
                                 ? -90
                                 : 0}deg)`,
-                        transition: 'transform 0.1s',
+                        transition: 'transform 150ms',
                     } })))));
 };
 
@@ -301,7 +368,7 @@ const MRT_ExpandButton = ({ row, table }) => {
                             : row.getIsExpanded()
                                 ? -180
                                 : 0}deg)`,
-                        transition: 'transform 0.1s',
+                        transition: 'transform 150ms',
                     } })))));
 };
 
@@ -489,7 +556,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': {
@@ -500,163 +567,6 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
             React.createElement(DragHandleIcon, null))));
 };
 
-const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
-const getAllLeafColumnDefs = (columns) => {
-    const allLeafColumnDefs = [];
-    const getLeafColumns = (cols) => {
-        cols.forEach((col) => {
-            if (col.columns) {
-                getLeafColumns(col.columns);
-            }
-            else {
-                allLeafColumnDefs.push(col);
-            }
-        });
-    };
-    getLeafColumns(columns);
-    return allLeafColumnDefs;
-};
-const prepareColumns = ({ columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
-    var _a, _b;
-    if (!columnDef.id)
-        columnDef.id = getColumnId(columnDef);
-    if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
-        console.error('Column definitions must have a valid `accessorKey` or `id` property');
-    }
-    if (!columnDef.columnDefType)
-        columnDef.columnDefType = 'data';
-    if (!!((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length)) {
-        columnDef.columnDefType = 'group';
-        columnDef.columns = prepareColumns({
-            columnDefs: columnDef.columns,
-            columnFilterFns,
-            defaultDisplayColumn,
-            filterFns,
-            sortingFns,
-        });
-    }
-    else if (columnDef.columnDefType === 'data') {
-        if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
-            columnDef.filterFn =
-                (_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
-            columnDef._filterFn =
-                columnFilterFns[columnDef.id];
-        }
-        if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
-            // @ts-ignore
-            columnDef.sortingFn = sortingFns[columnDef.sortingFn];
-        }
-    }
-    else if (columnDef.columnDefType === 'display') {
-        columnDef = Object.assign(Object.assign({}, defaultDisplayColumn), columnDef);
-    }
-    return columnDef;
-});
-const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
-    if (draggedColumn.getCanPin()) {
-        draggedColumn.pin(targetColumn.getIsPinned());
-    }
-    columnOrder.splice(columnOrder.indexOf(targetColumn.id), 0, columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0]);
-    return [...columnOrder];
-};
-const showExpandColumn = (props, grouping) => !!(props.enableExpanding ||
-    (props.enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
-    props.renderDetailPanel);
-const getLeadingDisplayColumnIds = (props) => {
-    var _a;
-    return [
-        (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
-        props.positionActionsColumn === 'first' &&
-            (props.enableRowActions ||
-                (props.enableEditing &&
-                    ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
-            'mrt-row-actions',
-        props.positionExpandColumn === 'first' &&
-            showExpandColumn(props) &&
-            'mrt-row-expand',
-        props.enableRowSelection && 'mrt-row-select',
-        props.enableRowNumbers && 'mrt-row-numbers',
-    ].filter(Boolean);
-};
-const getTrailingDisplayColumnIds = (props) => {
-    var _a;
-    return [
-        props.positionActionsColumn === 'last' &&
-            (props.enableRowActions ||
-                (props.enableEditing &&
-                    ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
-            'mrt-row-actions',
-        props.positionExpandColumn === 'last' &&
-            showExpandColumn(props) &&
-            'mrt-row-expand',
-    ];
-};
-const getDefaultColumnOrderIds = (props) => [
-    ...getLeadingDisplayColumnIds(props),
-    ...getAllLeafColumnDefs(props.columns).map((columnDef) => getColumnId(columnDef)),
-    ...getTrailingDisplayColumnIds(props),
-].filter(Boolean);
-const getDefaultColumnFilterFn = (columnDef) => {
-    if (columnDef.filterVariant === 'multi-select')
-        return 'arrIncludesSome';
-    if (columnDef.filterVariant === 'range')
-        return 'betweenInclusive';
-    if (columnDef.filterVariant === 'select' ||
-        columnDef.filterVariant === 'checkbox')
-        return 'equals';
-    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.97)
-            : '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.1s'} 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_DefaultColumn = {
-    minSize: 40,
-    maxSize: 1000,
-    size: 180,
-};
-const MRT_DefaultDisplayColumn = {
-    columnDefType: 'display',
-    enableClickToCopy: false,
-    enableColumnActions: false,
-    enableColumnDragging: false,
-    enableColumnFilter: false,
-    enableColumnOrdering: false,
-    enableEditing: false,
-    enableGlobalFilter: false,
-    enableGrouping: false,
-    enableHiding: false,
-    enableResizing: false,
-    enableSorting: false,
-};
-
 const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, isSubMenu, table, }) => {
     var _a;
     const { getState, options: { enableColumnOrdering, enableHiding, enablePinning, localization, }, setColumnOrder, } = table;
@@ -1007,7 +917,7 @@ const commonIconButtonStyles = {
     height: '2rem',
     ml: '10px',
     opacity: 0.5,
-    transition: 'opacity 0.1s',
+    transition: 'opacity 150ms',
     width: '2rem',
     '&:hover': {
         opacity: 1,
@@ -1038,7 +948,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
@@ -1047,33 +957,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.createElement(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.createElement(Checkbox, Object.assign({ checked: selectAll
-                ? selectAllMode === 'page'
+            : localization.toggleSelectRow) }, enableMultiRowSelection === false ? (React.createElement(Radio, Object.assign({}, commonProps))) : (React.createElement(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, }) => {
@@ -1336,7 +1246,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 }) => {
@@ -1446,13 +1356,13 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
     return (React.createElement(React.Fragment, null,
         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.columnActions },
-            React.createElement(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.createElement(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.createElement(MoreVertIcon, null))),
-        React.createElement(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table })));
+        anchorEl && (React.createElement(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))));
 };
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
@@ -1790,7 +1700,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': {
@@ -2174,7 +2086,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                 : undefined,
         }
         : undefined;
-    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'
+    return (React.createElement(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'
@@ -2214,6 +2126,7 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
             _b.length,
             ")"))));
 };
+const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
 const MRT_TableDetailPanel = ({ row, table }) => {
     const { getVisibleLeafColumns, options: { muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
@@ -2224,7 +2137,7 @@ const MRT_TableDetailPanel = ({ row, table }) => {
         ? muiTableDetailPanelProps({ row, table })
         : muiTableDetailPanelProps;
     return (React.createElement(TableRow, Object.assign({}, tableRowProps),
-        React.createElement(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.createElement(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.createElement(Collapse, { in: row.getIsExpanded() }, renderDetailPanel({ row, table }))))));
 };
@@ -2232,8 +2145,8 @@ const MRT_TableDetailPanel = ({ row, table }) => {
 const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
     var _a, _b;
     const theme = 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;
@@ -2259,7 +2172,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: 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: 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'
                             ? `${lighten(theme.palette.background.default, 0.12)}`
@@ -2267,13 +2180,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.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.createElement(Memo_MRT_TableBodyCell, Object.assign({}, props))) : (React.createElement(MRT_TableBodyCell, Object.assign({}, props)));
+        })),
         renderDetailPanel && !row.getIsGrouped() && (React.createElement(MRT_TableDetailPanel, { row: row, table: table }))));
 };
+const Memo_MRT_TableBodyRow = 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 })
@@ -2357,11 +2286,21 @@ const MRT_TableBody = ({ table }) => {
             const row = enableRowVirtualization
                 ? rows[rowOrVirtualRow.index]
                 : rowOrVirtualRow;
-            return (React.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.createElement(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (React.createElement(MRT_TableBodyRow, Object.assign({}, props)));
         }),
         enableRowVirtualization && paddingBottom > 0 && (React.createElement("tr", null,
             React.createElement("td", { style: { height: `${paddingBottom}px` } })))))));
 };
+const Memo_MRT_TableBody = memo(MRT_TableBody, () => true);
 
 const MRT_TableFooterCell = ({ footer, table }) => {
     var _a, _b, _c;
@@ -2424,7 +2363,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 })
@@ -2433,7 +2372,7 @@ const MRT_Table = ({ table }) => {
             ? tableProps.sx(theme)
             : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
         enableTableHead && React.createElement(MRT_TableHead, { table: table }),
-        React.createElement(MRT_TableBody, { table: table }),
+        memoMode === 'table-body' ? (React.createElement(Memo_MRT_TableBody, { table: table })) : (React.createElement(MRT_TableBody, { table: table })),
         enableTableFooter && React.createElement(MRT_TableFooter, { table: table })));
 };
 
@@ -2483,7 +2422,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
             ? {
@@ -2574,7 +2513,7 @@ const MRT_TableRoot = (props) => {
             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: 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-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (React.createElement(MRT_SelectCheckbox, { row: row, table: table })), Header: () => props.enableSelectAll && props.enableMultiRowSelection ? (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);
     }, [
@@ -2682,6 +2621,96 @@ const MRT_TableRoot = (props) => {
         editingRow && props.editingMode === 'modal' && (React.createElement(MRT_EditRowModal, { row: editingRow, table: table, open: true }))));
 };
 
+const MRT_Localization_EN = {
+    actions: 'Actions',
+    and: 'and',
+    cancel: 'Cancel',
+    changeFilterMode: 'Change filter mode',
+    changeSearchMode: 'Change search mode',
+    clearFilter: 'Clear filter',
+    clearSearch: 'Clear search',
+    clearSort: 'Clear sort',
+    clickToCopy: 'Click to copy',
+    columnActions: 'Column Actions',
+    copiedToClipboard: 'Copied to clipboard',
+    dropToGroupBy: 'Drop to group by {column}',
+    edit: 'Edit',
+    expand: 'Expand',
+    expandAll: 'Expand all',
+    filterArrIncludes: 'Includes',
+    filterArrIncludesAll: 'Includes all',
+    filterArrIncludesSome: 'Includes',
+    filterBetween: 'Between',
+    filterBetweenInclusive: 'Between Inclusive',
+    filterByColumn: 'Filter by {column}',
+    filterContains: 'Contains',
+    filterEmpty: 'Empty',
+    filterEndsWith: 'Ends With',
+    filterEquals: 'Equals',
+    filterEqualsString: 'Equals',
+    filterFuzzy: 'Fuzzy',
+    filterGreaterThan: 'Greater Than',
+    filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
+    filterInNumberRange: 'Between',
+    filterIncludesString: 'Contains',
+    filterIncludesStringSensitive: 'Contains',
+    filterLessThan: 'Less Than',
+    filterLessThanOrEqualTo: 'Less Than Or Equal To',
+    filterMode: 'Filter Mode: {filterType}',
+    filterNotEmpty: 'Not Empty',
+    filterNotEquals: 'Not Equals',
+    filterStartsWith: 'Starts With',
+    filterWeakEquals: 'Equals',
+    filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
+    goToFirstPage: 'Go to first page',
+    goToLastPage: 'Go to last page',
+    goToNextPage: 'Go to next page',
+    goToPreviousPage: 'Go to previous page',
+    grab: 'Grab',
+    groupByColumn: 'Group by {column}',
+    groupedBy: 'Grouped by ',
+    hideAll: 'Hide all',
+    hideColumn: 'Hide {column} column',
+    max: 'Max',
+    min: 'Min',
+    move: 'Move',
+    noRecordsToDisplay: 'No records to display',
+    noResultsFound: 'No results found',
+    of: 'of',
+    or: 'or',
+    pinToLeft: 'Pin to left',
+    pinToRight: 'Pin to right',
+    resetColumnSize: 'Reset column size',
+    resetOrder: 'Reset order',
+    rowActions: 'Row Actions',
+    rowNumber: '#',
+    rowNumbers: 'Row Numbers',
+    rowsPerPage: 'Rows per page',
+    save: 'Save',
+    search: 'Search',
+    selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
+    select: 'Select',
+    showAll: 'Show all',
+    showAllColumns: 'Show all columns',
+    showHideColumns: 'Show/Hide columns',
+    showHideFilters: 'Show/Hide filters',
+    showHideSearch: 'Show/Hide search',
+    sortByColumnAsc: 'Sort by {column} ascending',
+    sortByColumnDesc: 'Sort by {column} descending',
+    sortedByColumnAsc: 'Sorted by {column} ascending',
+    sortedByColumnDesc: 'Sorted by {column} descending',
+    thenBy: ', then by ',
+    toggleDensity: 'Toggle density',
+    toggleFullScreen: 'Toggle full screen',
+    toggleSelectAll: 'Toggle select all',
+    toggleSelectRow: 'Toggle select row',
+    toggleVisibility: 'Toggle visibility',
+    ungroupByColumn: 'Ungroup by {column}',
+    unpin: 'Unpin',
+    unpinAll: 'Unpin all',
+    unsorted: 'Unsorted',
+};
+
 const MaterialReactTable = (_a) => {
     var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn, 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 = 'page', 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"]);
     const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), []);