material-react-table 2.13.2 → 3.0.0-beta.0

package/dist/index.esm.js

@@ -237,7 +237,7 @@ const createRow = (table, originalRow, rowIndex = -1, depth = 0, subRows, parent
 
 const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
 const getValueAndLabel = (option) => {
-    var _a, _b, _c;
+    var _a, _b;
     let label = '';
     let value = '';
     if (option) {
@@ -246,8 +246,8 @@ const getValueAndLabel = (option) => {
             value = option;
         }
         else {
-            label = (_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.text) !== null && _b !== void 0 ? _b : option.value;
-            value = (_c = option.value) !== null && _c !== void 0 ? _c : label;
+            label = (_a = option.label) !== null && _a !== void 0 ? _a : option.value;
+            value = (_b = option.value) !== null && _b !== void 0 ? _b : label;
         }
     }
     return { label, value };
@@ -275,6 +275,59 @@ const openEditingCell = ({ cell, table, }) => {
         });
     }
 };
+const cellNavigation = (e) => {
+    if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.key)) {
+        e.preventDefault();
+        const currentCell = e.currentTarget;
+        const currentRow = currentCell.closest('tr');
+        const tableElement = currentCell.closest('table');
+        const allCells = Array.from((tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('th, td')) || []);
+        const currentCellIndex = allCells.indexOf(currentCell);
+        const currentIndex = parseInt(currentCell.getAttribute('data-index') || '0');
+        let nextCell = undefined;
+        //home/end first or last cell in row
+        const findEdgeCell = (rowIndex, edge) => {
+            var _a, _b, _c;
+            const row = rowIndex === 'c'
+                ? currentRow
+                : rowIndex === 'f'
+                    ? (_a = currentCell.closest('table')) === null || _a === void 0 ? void 0 : _a.querySelector('tr')
+                    : (_c = (_b = currentCell.closest('table')) === null || _b === void 0 ? void 0 : _b.lastElementChild) === null || _c === void 0 ? void 0 : _c.lastElementChild;
+            const rowCells = Array.from((row === null || row === void 0 ? void 0 : row.children) || []);
+            const targetCell = edge === 'f' ? rowCells[0] : rowCells[rowCells.length - 1];
+            return targetCell;
+        };
+        const findAdjacentCell = (columnIndex, searchDirection) => {
+            const searchArray = searchDirection === 'f'
+                ? allCells.slice(currentCellIndex + 1)
+                : allCells.slice(0, currentCellIndex).reverse();
+            return searchArray.find((cell) => cell.matches(`[data-index="${columnIndex}"]`));
+        };
+        switch (e.key) {
+            case 'ArrowRight':
+                nextCell = findAdjacentCell(currentIndex + 1, 'f');
+                break;
+            case 'ArrowLeft':
+                nextCell = findAdjacentCell(currentIndex - 1, 'b');
+                break;
+            case 'ArrowUp':
+                nextCell = findAdjacentCell(currentIndex, 'b');
+                break;
+            case 'ArrowDown':
+                nextCell = findAdjacentCell(currentIndex, 'f');
+                break;
+            case 'Home':
+                nextCell = findEdgeCell(e.ctrlKey ? 'f' : 'c', 'f');
+                break;
+            case 'End':
+                nextCell = findEdgeCell(e.ctrlKey ? 'l' : 'c', 'l');
+                break;
+        }
+        if (nextCell) {
+            nextCell.focus();
+        }
+    }
+};
 
 function defaultDisplayColumnProps({ header, id, size, tableOptions, }) {
     const { defaultDisplayColumn, displayColumnDefOptions, localization } = tableOptions;
@@ -505,44 +558,51 @@ const fuzzy = (row, columnId, filterValue, addMeta) => {
     return itemRank.passed;
 };
 fuzzy.autoRemove = (val) => !val;
-const contains = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .includes(filterValue.toString().toLowerCase().trim());
+const contains = (row, id, filterValue) => {
+    var _a;
+    return !!((_a = row
+        .getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim()));
+};
 contains.autoRemove = (val) => !val;
-const startsWith = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .startsWith(filterValue.toString().toLowerCase().trim());
+const startsWith = (row, id, filterValue) => {
+    var _a;
+    return !!((_a = row
+        .getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim()));
+};
 startsWith.autoRemove = (val) => !val;
-const endsWith = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .endsWith(filterValue.toString().toLowerCase().trim());
+const endsWith = (row, id, filterValue) => {
+    var _a;
+    return !!((_a = row
+        .getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim()));
+};
 endsWith.autoRemove = (val) => !val;
-const equals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() ===
-    (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
+const equals = (row, id, filterValue) => {
+    var _a;
+    return ((_a = row.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim()) ===
+        filterValue.toString().toLowerCase().trim();
+};
 equals.autoRemove = (val) => !val;
-const notEquals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() !==
-    filterValue.toString().toLowerCase().trim();
+const notEquals = (row, id, filterValue) => {
+    var _a;
+    return ((_a = row.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().toLowerCase().trim()) !==
+        filterValue.toString().toLowerCase().trim();
+};
 notEquals.autoRemove = (val) => !val;
-const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
-    ? +row.getValue(id) > +filterValue
-    : row.getValue(id).toString().toLowerCase().trim() >
-        (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
+const greaterThan = (row, id, filterValue) => {
+    var _a, _b, _c;
+    return !isNaN(+filterValue) && !isNaN(+row.getValue(id))
+        ? +((_a = row.getValue(id)) !== null && _a !== void 0 ? _a : 0) > +filterValue
+        : ((_c = ((_b = row.getValue(id)) !== null && _b !== void 0 ? _b : '')) === null || _c === void 0 ? void 0 : _c.toString().toLowerCase().trim()) > filterValue.toString().toLowerCase().trim();
+};
 greaterThan.autoRemove = (val) => !val;
 const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
 greaterThanOrEqualTo.autoRemove = (val) => !val;
-const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
-    ? +row.getValue(id) < +filterValue
-    : row.getValue(id).toString().toLowerCase().trim() <
-        (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
+const lessThan = (row, id, filterValue) => {
+    var _a, _b, _c;
+    return !isNaN(+filterValue) && !isNaN(+row.getValue(id))
+        ? +((_a = row.getValue(id)) !== null && _a !== void 0 ? _a : 0) < +filterValue
+        : ((_c = ((_b = row.getValue(id)) !== null && _b !== void 0 ? _b : '')) === null || _c === void 0 ? void 0 : _c.toString().toLowerCase().trim()) < filterValue.toString().toLowerCase().trim();
+};
 lessThan.autoRemove = (val) => !val;
 const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
 lessThanOrEqualTo.autoRemove = (val) => !val;
@@ -562,9 +622,9 @@ const betweenInclusive = (row, id, filterValues) => (['', undefined].includes(fi
         ['', undefined].includes(filterValues[1]) ||
         lessThanOrEqualTo(row, id, filterValues[1]));
 betweenInclusive.autoRemove = (val) => !val;
-const empty = (row, id, _filterValue) => !row.getValue(id).toString().trim();
+const empty = (row, id, _filterValue) => { var _a; return !((_a = row.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().trim()); };
 empty.autoRemove = (val) => !val;
-const notEmpty = (row, id, _filterValue) => !!row.getValue(id).toString().trim();
+const notEmpty = (row, id, _filterValue) => { var _a; return !!((_a = row.getValue(id)) === null || _a === void 0 ? void 0 : _a.toString().trim()); };
 notEmpty.autoRemove = (val) => !val;
 const MRT_FilterFns = Object.assign(Object.assign({}, filterFns), { between,
     betweenInclusive,
@@ -668,7 +728,7 @@ const getMRTTheme = (mrtTheme, muiTheme) => {
     const baseBackgroundColor = (_a = mrtThemeOverrides === null || mrtThemeOverrides === void 0 ? void 0 : mrtThemeOverrides.baseBackgroundColor) !== null && _a !== void 0 ? _a : (muiTheme.palette.mode === 'dark'
         ? lighten(muiTheme.palette.background.default, 0.05)
         : muiTheme.palette.background.default);
-    return Object.assign({ baseBackgroundColor, draggingBorderColor: muiTheme.palette.primary.main, matchHighlightColor: muiTheme.palette.mode === 'dark'
+    return Object.assign({ baseBackgroundColor, cellNavigationOutlineColor: muiTheme.palette.primary.main, draggingBorderColor: muiTheme.palette.primary.main, matchHighlightColor: muiTheme.palette.mode === 'dark'
             ? darken(muiTheme.palette.warning.dark, 0.25)
             : lighten(muiTheme.palette.warning.light, 0.5), menuBackgroundColor: lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.1), selectedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.2) }, mrtThemeOverrides);
 };
@@ -734,7 +794,10 @@ const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme,
             ? 2
             : columnDefType !== 'group' && isColumnPinned
                 ? 1
-                : 0 }, pinnedStyles), widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
+                : 0, '&:focus-visible': {
+            outline: `2px solid ${table.options.mrtTheme.cellNavigationOutlineColor}`,
+            outlineOffset: '-2px',
+        } }, pinnedStyles), widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
 };
 const getCommonToolbarStyles = ({ table, }) => ({
     alignItems: 'flex-start',
@@ -776,18 +839,30 @@ const MRT_RowActionMenu = (_a) => {
     var { anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "staticRowIndex", "table"]);
     const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderRowActionMenuItems, }, } = table;
     const { density } = getState();
-    return (jsxs(Menu, Object.assign({ MenuListProps: {
+    const menuItems = useMemo(() => {
+        const items = [];
+        const editItem = parseFromValuesOrFunc(enableEditing, row) &&
+            ['modal', 'row'].includes(editDisplayMode) && (jsx(MRT_ActionMenuItem, { icon: jsx(EditIcon, {}), label: localization.edit, onClick: handleEdit, table: table }));
+        if (editItem)
+            items.push(editItem);
+        const rowActionMenuItems = renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
+            closeMenu: () => setAnchorEl(null),
+            row,
+            staticRowIndex,
+            table,
+        });
+        if (rowActionMenuItems === null || rowActionMenuItems === void 0 ? void 0 : rowActionMenuItems.length)
+            items.push(...rowActionMenuItems);
+        return items;
+    }, [renderRowActionMenuItems, row, staticRowIndex, table]);
+    if (!menuItems.length)
+        return null;
+    return (jsx(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
             sx: {
                 backgroundColor: menuBackgroundColor,
             },
-        }, anchorEl: anchorEl, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [parseFromValuesOrFunc(enableEditing, row) &&
-                ['modal', 'row'].includes(editDisplayMode) && (jsx(MRT_ActionMenuItem, { icon: jsx(EditIcon, {}), label: localization.edit, onClick: handleEdit, table: table })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
-                closeMenu: () => setAnchorEl(null),
-                row,
-                staticRowIndex,
-                table,
-            })] })));
+        }, anchorEl: anchorEl, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: menuItems })));
 };
 
 const commonIconButtonStyles = {
@@ -801,6 +876,7 @@ const commonIconButtonStyles = {
     width: '2rem',
 };
 const MRT_ToggleRowActionMenuButton = (_a) => {
+    var _b;
     var { cell, row, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "row", "staticRowIndex", "table"]);
     const { getState, options: { createDisplayMode, editDisplayMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
     const { creatingRow, editingRow } = getState();
@@ -821,7 +897,11 @@ const MRT_ToggleRowActionMenuButton = (_a) => {
     };
     return (jsx(Fragment, { children: renderRowActions && !showEditActionButtons ? (renderRowActions({ cell, row, staticRowIndex, table })) : showEditActionButtons ? (jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
             parseFromValuesOrFunc(enableEditing, row) &&
-            ['modal', 'row'].includes(editDisplayMode) ? (jsx(Tooltip, { placement: "right", title: localization.edit, children: jsx(IconButton, Object.assign({ "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles }, rest, { children: jsx(EditIcon, {}) })) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: localization.rowActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles }, rest, { children: jsx(MoreHorizIcon, {}) })) })), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, staticRowIndex: staticRowIndex, table: table })] })) : null }));
+            ['modal', 'row'].includes(editDisplayMode) ? (jsx(Tooltip, { placement: "right", title: localization.edit, children: jsx(IconButton, Object.assign({ "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles }, rest, { children: jsx(EditIcon, {}) })) })) : ((_b = renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
+            row,
+            staticRowIndex,
+            table,
+        })) === null || _b === void 0 ? void 0 : _b.length) ? (jsxs(Fragment, { children: [jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: localization.rowActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles }, rest, { children: jsx(MoreHorizIcon, {}) })) })), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, staticRowIndex: staticRowIndex, table: table })] })) : null }));
 };
 
 const getMRT_RowActionsColumnDef = (tableOptions) => {
@@ -1249,7 +1329,7 @@ const MRT_DefaultDisplayColumn = {
 };
 const useMRT_TableOptions = (_a) => {
     var _b;
-    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, mrtTheme, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBatchRowSelection", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "mrtTheme", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
+    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableCellNavigation = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, mrtTheme, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBatchRowSelection", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableCellNavigation", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "mrtTheme", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
     const theme = useTheme();
     icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
@@ -1310,6 +1390,7 @@ const useMRT_TableOptions = (_a) => {
         enableGlobalFilterRankedResults,
         enableGrouping,
         enableHiding,
+        enableCellNavigation,
         enableMultiRowSelection,
         enableMultiSort,
         enablePagination,
@@ -1956,7 +2037,7 @@ const MRT_TableBodyCell = (_a) => {
     var _b, _c, _d, _e, _f;
     var { cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "numRows", "rowRef", "staticColumnIndex", "staticRowIndex", "table"]);
     const theme = useTheme();
-    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, layoutMode, mrtTheme: { draggingBorderColor }, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
+    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, enableCellNavigation, layoutMode, mrtTheme: { draggingBorderColor }, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
     const { actionCell, columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
@@ -2078,7 +2159,14 @@ const MRT_TableBodyCell = (_a) => {
             table.refs.actionCellRef.current = e.currentTarget;
         }
     };
-    return (jsx(TableCell, Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined }, tableCellProps, { onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, onDragOver: handleDragOver, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
+    const handleKeyDown = (e) => {
+        var _a;
+        if (enableCellNavigation) {
+            cellNavigation(e);
+        }
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
+    };
+    return (jsx(TableCell, Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, tabIndex: enableCellNavigation ? 0 : undefined }, tableCellProps, { onKeyDown: handleKeyDown, onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, onDragOver: handleDragOver, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
                 outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id ||
                     (editDisplayMode === 'cell' && isEditable) ||
                     (editDisplayMode === 'table' && (isCreating || isEditing))
@@ -2245,12 +2333,13 @@ const MRT_TableBodyRow = (_a) => {
                             staticRowIndex,
                             table,
                         };
+                        const key = `${cell.id}-${staticRowIndex}`;
                         return cell ? (memoMode === 'cells' &&
                             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 ? (jsx(Memo_MRT_TableBodyCell, Object.assign({}, props), cell.id)) : (jsx(MRT_TableBodyCell, Object.assign({}, props), cell.id))) : null;
+                            (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (jsx(Memo_MRT_TableBodyCell, Object.assign({}, props), key)) : (jsx(MRT_TableBodyCell, Object.assign({}, props), key))) : null;
                     }), virtualPaddingRight ? (jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })), renderDetailPanel && !row.getIsGrouped() && (jsx(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowVirtualizer: rowVirtualizer, staticRowIndex: staticRowIndex, table: table, virtualRow: virtualRow }))] }));
 };
 const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.staticRowIndex === next.staticRowIndex);
@@ -2338,7 +2427,7 @@ const MRT_TableFooterCell = (_a) => {
     var _b, _c, _d;
     var { footer, staticColumnIndex, table } = _a, rest = __rest(_a, ["footer", "staticColumnIndex", "table"]);
     const theme = useTheme();
-    const { getState, options: { enableColumnPinning, muiTableFooterCellProps }, } = table;
+    const { getState, options: { enableColumnPinning, muiTableFooterCellProps, enableCellNavigation, }, } = table;
     const { density } = getState();
     const { column } = footer;
     const { columnDef } = column;
@@ -2348,11 +2437,18 @@ const MRT_TableFooterCell = (_a) => {
         column.getIsPinned();
     const args = { column, table };
     const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args)), rest);
+    const handleKeyDown = (e) => {
+        var _a;
+        if (enableCellNavigation) {
+            cellNavigation(e);
+        }
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
+    };
     return (jsx(TableCell, Object.assign({ align: columnDefType === 'group'
             ? 'center'
             : theme.direction === 'rtl'
                 ? 'right'
-                : 'left', colSpan: footer.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, variant: "footer" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ fontWeight: 'bold', p: density === 'compact'
+                : 'left', colSpan: footer.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, variant: "footer" }, tableCellProps, { onKeyDown: handleKeyDown, sx: (theme) => (Object.assign(Object.assign({ fontWeight: 'bold', p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
@@ -2399,12 +2495,22 @@ const MRT_TableFooterRow = (_a) => {
 
 const MRT_TableFooter = (_a) => {
     var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
-    const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef }, } = table;
+    const { getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef }, } = table;
     const { isFullScreen } = getState();
     const tableFooterProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterProps, {
         table,
     })), rest);
     const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
+    const footerGroups = table.getFooterGroups();
+    //if no footer cells at all, skip footer
+    if (!footerGroups.some((footerGroup) => {
+        var _a;
+        return (_a = footerGroup.headers) === null || _a === void 0 ? void 0 : _a.some((header) => (typeof header.column.columnDef.footer === 'string' &&
+            !!header.column.columnDef.footer) ||
+            header.column.columnDef.Footer);
+    })) {
+        return null;
+    }
     return (jsx(TableFooter, Object.assign({}, tableFooterProps, { ref: (ref) => {
             tableFooterRef.current = ref;
             if (tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.ref) {
@@ -2415,7 +2521,7 @@ const MRT_TableFooter = (_a) => {
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
-                : undefined, position: stickFooter ? 'sticky' : 'relative', zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: getFooterGroups().map((footerGroup) => (jsx(MRT_TableFooterRow, { columnVirtualizer: columnVirtualizer, footerGroup: footerGroup, table: table }, footerGroup.id))) })));
+                : undefined, position: stickFooter ? 'sticky' : 'relative', zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: footerGroups.map((footerGroup) => (jsx(MRT_TableFooterRow, { columnVirtualizer: columnVirtualizer, footerGroup: footerGroup, table: table }, footerGroup.id))) })));
 };
 
 const mrtFilterOptions = (localization) => [
@@ -3268,7 +3374,7 @@ const MRT_TableHeadCell = (_a) => {
     var _b, _c, _d, _f, _g, _h;
     var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
     const theme = useTheme();
-    const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
+    const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableCellNavigation, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
     const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     const { columnDef } = column;
@@ -3337,6 +3443,13 @@ const MRT_TableHeadCell = (_a) => {
             e.preventDefault();
         }
     };
+    const handleKeyDown = (e) => {
+        var _a;
+        if (enableCellNavigation) {
+            cellNavigation(e);
+        }
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
+    };
     const HeaderElement = (_b = parseFromValuesOrFunc(columnDef.Header, {
         column,
         header,
@@ -3358,7 +3471,7 @@ const MRT_TableHeadCell = (_a) => {
                     (_a = columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement) === null || _a === void 0 ? void 0 : _a.call(columnVirtualizer, node);
                 }
             }
-        } }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ '& :hover': {
+        }, tabIndex: enableCellNavigation ? 0 : undefined }, tableCellProps, { onKeyDown: handleKeyDown, sx: (theme) => (Object.assign(Object.assign({ '& :hover': {
                 '.MuiButtonBase-root': {
                     opacity: 1,
                 },
@@ -4145,5 +4258,5 @@ const MaterialReactTable = (props) => {
     return jsx(MRT_TablePaper, { table: table });
 };
 
-export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnFilterInfo, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useDropdownOptions, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
+export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, cellNavigation, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnFilterInfo, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useDropdownOptions, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
 //# sourceMappingURL=index.esm.js.map