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

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

@@ -1,8 +1,8 @@
 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, 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 { 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) => {
@@ -392,269 +459,112 @@ const mrtFilterOptions = (localization) => [
     },
 ];
 const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, }) => {
-    var _a, _b, _c, _d;
-    const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
-    const { globalFilterFn, density } = getState();
-    const { column } = header !== null && header !== void 0 ? header : {};
-    const { columnDef } = column !== null && column !== void 0 ? column : {};
-    const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
-    const internalFilterOptions = useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
-        ? allowedColumnFilterOptions === undefined ||
-            (allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
-        : (!globalFilterModeOptions ||
-            globalFilterModeOptions.includes(filterOption.option)) &&
-            ['fuzzy', 'contains', 'startsWith'].includes(filterOption.option)), []);
-    const handleSelectFilterMode = (option) => {
-        if (header && column) {
-            setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
-            if (['empty', 'notEmpty'].includes(option)) {
-                column.setFilterValue(' ');
-            }
-            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
-                ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(option)) {
-                column.setFilterValue([]);
-                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
-            }
-            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range' ||
-                ['between', 'betweenInclusive', 'inNumberRange'].includes(option)) {
-                column.setFilterValue(['', '']);
-                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
-            }
-            else {
-                column.setFilterValue('');
-                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
-            }
-        }
-        else {
-            setGlobalFilterFn(option);
-        }
-        setAnchorEl(null);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
-    };
-    const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
-    return (React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
-            dense: density === 'compact',
-        } }, (_d = (header && column && columnDef
-        ? (_c = (_b = columnDef.renderColumnFilterModeMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
-            column: column,
-            internalFilterOptions,
-            onSelectFilterMode: handleSelectFilterMode,
-            table,
-        })) !== null && _c !== void 0 ? _c : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
-            column: column,
-            internalFilterOptions,
-            onSelectFilterMode: handleSelectFilterMode,
-            table,
-        })
-        : renderGlobalFilterModeMenuItems === null || renderGlobalFilterModeMenuItems === void 0 ? void 0 : renderGlobalFilterModeMenuItems({
-            internalFilterOptions,
-            onSelectFilterMode: handleSelectFilterMode,
-            table,
-        }))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (React.createElement(MenuItem, { divider: divider, key: index, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
-            alignItems: 'center',
-            display: 'flex',
-            gap: '2ch',
-            my: 0,
-            py: '6px',
-        }, value: option },
-        React.createElement(Box, { sx: { fontSize: '1.25rem', width: '2ch' } }, symbol),
-        label)))));
-};
-
-const MRT_ColumnPinningButtons = ({ column, table, }) => {
-    const { options: { icons: { PushPinIcon }, localization, }, } = table;
-    const handlePinColumn = (pinDirection) => {
-        column.pin(pinDirection);
-    };
-    return (React.createElement(Box, { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React.createElement(Tooltip, { arrow: true, title: localization.unpin },
-        React.createElement(IconButton, { onClick: () => handlePinColumn(false), size: "small" },
-            React.createElement(PushPinIcon, null)))) : (React.createElement(React.Fragment, null,
-        React.createElement(Tooltip, { arrow: true, title: localization.pinToLeft },
-            React.createElement(IconButton, { onClick: () => handlePinColumn('left'), size: "small" },
-                React.createElement(PushPinIcon, { style: {
-                        transform: 'rotate(90deg)',
-                    } }))),
-        React.createElement(Tooltip, { arrow: true, title: localization.pinToRight },
-            React.createElement(IconButton, { onClick: () => handlePinColumn('right'), size: "small" },
-                React.createElement(PushPinIcon, { style: {
-                        transform: 'rotate(-90deg)',
-                    } })))))));
-};
-
-const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
-    var _a;
-    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move },
-        React.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
-                var _a;
-                e.stopPropagation();
-                (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
-            }, onDragStart: onDragStart, onDragEnd: onDragEnd, sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 150ms ease-in-out', '&:hover': {
-                    backgroundColor: 'transparent',
-                    opacity: 1,
-                }, '&:active': {
-                    cursor: 'grabbing',
-                } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
-                ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
-                : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
-            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 : '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() }));
+    var _a, _b, _c, _d;
+    const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
+    const { globalFilterFn, density } = getState();
+    const { column } = header !== null && header !== void 0 ? header : {};
+    const { columnDef } = column !== null && column !== void 0 ? column : {};
+    const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
+    const internalFilterOptions = useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
+        ? allowedColumnFilterOptions === undefined ||
+            (allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
+        : (!globalFilterModeOptions ||
+            globalFilterModeOptions.includes(filterOption.option)) &&
+            ['fuzzy', 'contains', 'startsWith'].includes(filterOption.option)), []);
+    const handleSelectFilterMode = (option) => {
+        if (header && column) {
+            setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
+            if (['empty', 'notEmpty'].includes(option)) {
+                column.setFilterValue(' ');
+            }
+            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
+                ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(option)) {
+                column.setFilterValue([]);
+                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
+            }
+            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range' ||
+                ['between', 'betweenInclusive', 'inNumberRange'].includes(option)) {
+                column.setFilterValue(['', '']);
+                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
+            }
+            else {
+                column.setFilterValue('');
+                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
+            }
+        }
+        else {
+            setGlobalFilterFn(option);
+        }
+        setAnchorEl(null);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    };
+    const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
+    return (React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
+            dense: density === 'compact',
+        } }, (_d = (header && column && columnDef
+        ? (_c = (_b = columnDef.renderColumnFilterModeMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
+            column: column,
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+        })) !== null && _c !== void 0 ? _c : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
+            column: column,
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+        })
+        : renderGlobalFilterModeMenuItems === null || renderGlobalFilterModeMenuItems === void 0 ? void 0 : renderGlobalFilterModeMenuItems({
+            internalFilterOptions,
+            onSelectFilterMode: handleSelectFilterMode,
+            table,
+        }))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ option, label, divider, symbol }, index) => (React.createElement(MenuItem, { divider: divider, key: index, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
+            alignItems: 'center',
+            display: 'flex',
+            gap: '2ch',
+            my: 0,
+            py: '6px',
+        }, value: option },
+        React.createElement(Box, { sx: { fontSize: '1.25rem', width: '2ch' } }, symbol),
+        label)))));
 };
-const MRT_DefaultColumn = {
-    minSize: 40,
-    maxSize: 1000,
-    size: 180,
+
+const MRT_ColumnPinningButtons = ({ column, table, }) => {
+    const { options: { icons: { PushPinIcon }, localization, }, } = table;
+    const handlePinColumn = (pinDirection) => {
+        column.pin(pinDirection);
+    };
+    return (React.createElement(Box, { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React.createElement(Tooltip, { arrow: true, title: localization.unpin },
+        React.createElement(IconButton, { onClick: () => handlePinColumn(false), size: "small" },
+            React.createElement(PushPinIcon, null)))) : (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { arrow: true, title: localization.pinToLeft },
+            React.createElement(IconButton, { onClick: () => handlePinColumn('left'), size: "small" },
+                React.createElement(PushPinIcon, { style: {
+                        transform: 'rotate(90deg)',
+                    } }))),
+        React.createElement(Tooltip, { arrow: true, title: localization.pinToRight },
+            React.createElement(IconButton, { onClick: () => handlePinColumn('right'), size: "small" },
+                React.createElement(PushPinIcon, { style: {
+                        transform: 'rotate(-90deg)',
+                    } })))))));
 };
-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_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
+    var _a;
+    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
+    return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move },
+        React.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
+            }, onDragStart: onDragStart, onDragEnd: onDragEnd, sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 150ms ease-in-out', '&:hover': {
+                    backgroundColor: 'transparent',
+                    opacity: 1,
+                }, '&:active': {
+                    cursor: 'grabbing',
+                } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+                ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
+                : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined }),
+            React.createElement(DragHandleIcon, null))));
 };
 
 const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, isSubMenu, table, }) => {
@@ -1842,19 +1752,11 @@ const MRT_TableHeadCell = ({ header, table }) => {
         ? columnDef.muiTableHeadCellProps({ column, table })
         : columnDef.muiTableHeadCellProps;
     const tableCellProps = Object.assign(Object.assign({}, mTableHeadCellProps), mcTableHeadCellProps);
-    const handleDragEnter = (_e) => {
-        if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
-            setHoveredColumn(null);
-        }
-        if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
-            setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
-        }
-    };
-    const draggingBorder = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
+    const draggingBorder = useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
         ? `1px dashed ${theme.palette.text.secondary}`
         : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
             ? `2px dashed ${theme.palette.primary.main}`
-            : undefined;
+            : undefined, [draggingColumn, hoveredColumn]);
     const draggingBorders = draggingBorder
         ? {
             borderLeft: draggingBorder,
@@ -1862,6 +1764,14 @@ const MRT_TableHeadCell = ({ header, table }) => {
             borderTop: draggingBorder,
         }
         : undefined;
+    const handleDragEnter = (_e) => {
+        if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
+            setHoveredColumn(null);
+        }
+        if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
+            setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
+        }
+    };
     const headerElement = ((_b = ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) instanceof Function
         ? (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
             column,
@@ -2100,10 +2010,10 @@ 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_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
+const MRT_TableBodyCell = ({ cell, enableHover, numRows, rowIndex, rowRef, table, }) => {
     var _a, _b;
     const theme = useTheme();
-    const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enablePagination, enableRowNumbers, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
+    const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
     const { draggingColumn, editingCell, editingRow, hoveredColumn, density, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
@@ -2118,6 +2028,25 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
     const skeletonProps = muiTableBodyCellSkeletonProps instanceof Function
         ? muiTableBodyCellSkeletonProps({ cell, column, row, table })
         : muiTableBodyCellSkeletonProps;
+    const [skeletonWidth, setSkeletonWidth] = useState(0);
+    useEffect(() => setSkeletonWidth(isLoading || showSkeletons
+        ? columnDefType === 'display'
+            ? column.getSize() / 2
+            : Math.round(Math.random() * (column.getSize() - column.getSize() / 3) +
+                column.getSize() / 3)
+        : 100), []);
+    const draggingBorder = useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
+        ? `1px dashed ${theme.palette.text.secondary}`
+        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
+            ? `2px dashed ${theme.palette.primary.main}`
+            : undefined, [draggingColumn, hoveredColumn]);
+    const draggingBorders = useMemo(() => draggingBorder
+        ? {
+            borderLeft: draggingBorder,
+            borderRight: draggingBorder,
+            borderBottom: rowIndex === numRows - 1 ? draggingBorder : undefined,
+        }
+        : undefined, [draggingBorder, numRows]);
     const isEditable = (enableEditing || columnDef.enableEditing) &&
         columnDef.enableEditing !== false;
     const isEditing = isEditable &&
@@ -2125,13 +2054,6 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
         (editingMode === 'table' ||
             (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
             (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id);
-    const [skeletonWidth, setSkeletonWidth] = useState(0);
-    useEffect(() => setSkeletonWidth(isLoading || showSkeletons
-        ? columnDefType === 'display'
-            ? column.getSize() / 2
-            : Math.round(Math.random() * (column.getSize() - column.getSize() / 3) +
-                column.getSize() / 3)
-        : 100), [isLoading, showSkeletons]);
     const handleDoubleClick = (event) => {
         var _a;
         (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
@@ -2158,24 +2080,6 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    const draggingBorder = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-        ? `1px dashed ${theme.palette.text.secondary}`
-        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-            ? `2px dashed ${theme.palette.primary.main}`
-            : undefined;
-    const draggingBorders = draggingBorder
-        ? {
-            borderLeft: draggingBorder,
-            borderRight: draggingBorder,
-            borderBottom: row.index ===
-                (enablePagination
-                    ? table.getRowModel()
-                    : table.getPrePaginationRowModel()).rows.length -
-                    1
-                ? draggingBorder
-                : undefined,
-        }
-        : undefined;
     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'
@@ -2232,8 +2136,7 @@ const MRT_TableDetailPanel = ({ row, table }) => {
                 : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React.createElement(Collapse, { in: row.getIsExpanded() }, renderDetailPanel({ row, table }))))));
 };
 
-const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
-    var _a, _b;
+const MRT_TableBodyRow = ({ numRows, row, rowIndex, table, virtualRow, }) => {
     const theme = useTheme();
     const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } = getState();
@@ -2246,11 +2149,11 @@ const MRT_TableBodyRow = ({ row, rowIndex, table, virtualRow, }) => {
         }
     };
     const rowRef = useRef(null);
-    const draggingBorder = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id
+    const draggingBorder = useMemo(() => (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id
         ? `1px dashed ${theme.palette.text.secondary}`
         : (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id
             ? `2px dashed ${theme.palette.primary.main}`
-            : undefined;
+            : undefined, [draggingRow, hoveredRow]);
     const draggingBorders = draggingBorder
         ? {
             border: draggingBorder,
@@ -2270,16 +2173,17 @@ 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) => {
+                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)), draggingBorders)) }), row.getVisibleCells().map((cell) => {
             const props = {
                 cell,
                 enableHover: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false,
                 key: cell.id,
+                numRows,
                 rowIndex,
                 rowRef,
                 table,
             };
-            return memoMode === 'cell' &&
+            return memoMode === 'cells' &&
                 cell.column.columnDef.columnDefType === 'data' &&
                 !draggingColumn &&
                 !draggingRow &&
@@ -2378,6 +2282,7 @@ const MRT_TableBody = ({ table }) => {
                 : rowOrVirtualRow;
             const props = {
                 key: row.id,
+                numRows: rows.length,
                 row,
                 rowIndex: enableRowVirtualization
                     ? rowOrVirtualRow.index
@@ -2385,12 +2290,12 @@ const MRT_TableBody = ({ table }) => {
                 table,
                 virtualRow: enableRowVirtualization ? rowOrVirtualRow : null,
             };
-            return memoMode === 'row' ? (React.createElement(Memo_MRT_TableBodyRow, Object.assign({}, props))) : (React.createElement(MRT_TableBodyRow, Object.assign({}, props)));
+            return memoMode === 'rows' ? (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 Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
 
 const MRT_TableFooterCell = ({ footer, table }) => {
     var _a, _b, _c;
@@ -2711,6 +2616,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)), []);