material-react-table-narender 2.13.3 → 2.13.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.13.3",
+  "version": "2.13.4",
   "license": "MIT",
   "name": "material-react-table-narender",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/components/MaterialReactTable.tsx

@@ -25,7 +25,7 @@ export const MaterialReactTable = <TData extends MRT_RowData>(
   props: MaterialReactTableProps<TData>,
 ) => {
   let table: MRT_TableInstance<TData>;
-
+debugger;
   if (isTableInstanceProp(props)) {
     table = props.table;
   } else {

package/src/components/body/MRT_TableBodyCell.tsx

@@ -16,7 +16,7 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { isCellEditable, openEditingCell } from '../../utils/cell.utils';
+import { cellKeyboardShortcuts, isCellEditable, openEditingCell } from '../../utils/cell.utils';
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
@@ -228,6 +228,16 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     }
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onKeyDown?.(event);
+    cellKeyboardShortcuts({
+      cell,
+      cellValue: cell.getValue<string>(),
+      event,
+      table,
+    });
+  };
+
   return (
     <TableCell
       align={theme.direction === 'rtl' ? 'right' : 'left'}
@@ -235,6 +245,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       data-pinned={!!isColumnPinned || undefined}
       tabIndex={enableKeyboardShortcuts ? 0 : undefined}
       {...tableCellProps}
+      onKeyDown={handleKeyDown}
       onContextMenu={handleContextMenu}
       onDoubleClick={handleDoubleClick}
       onDragEnter={handleDragEnter}

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -7,6 +7,7 @@ import {
 } from '../../types';
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
+import { cellKeyboardShortcuts } from '../../utils/cell.utils';
 
 export interface MRT_TableFooterCellProps<TData extends MRT_RowData>
   extends TableCellProps {
@@ -43,6 +44,16 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
     ...rest,
   };
 
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onKeyDown?.(event);
+    cellKeyboardShortcuts({
+      event,
+      cellValue: footer.column.columnDef.footer,
+      table,
+    });
+  };
+
   return (
     <TableCell
       align={
@@ -58,6 +69,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
       tabIndex={enableKeyboardShortcuts ? 0 : undefined}
       variant="footer"
       {...tableCellProps}
+          onKeyDown={handleKeyDown}
       sx={(theme) => ({
         fontWeight: 'bold',
         p:

package/src/components/head/MRT_TableHeadCell.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../types';
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
+import { cellKeyboardShortcuts } from '../../utils/cell.utils';
 
 export interface MRT_TableHeadCellProps<TData extends MRT_RowData>
   extends TableCellProps {
@@ -148,6 +149,16 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     }
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onKeyDown?.(event);
+    cellKeyboardShortcuts({
+      event,
+      cellValue: header.column.columnDef.header,
+      table,
+      header,
+    });
+  };
+
   const HeaderElement =
     parseFromValuesOrFunc(columnDef.Header, {
       column,
@@ -188,6 +199,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
         }
       }}
       {...tableCellProps}
+      onKeyDown={handleKeyDown}
       sx={(theme: Theme) => ({
         '& :hover': {
           '.MuiButtonBase-root': {

package/src/utils/cell.utils.ts

@@ -79,6 +79,7 @@ export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
   parentElement?: HTMLTableRowElement;
   table: MRT_TableInstance<TData>;
 }) => {
+  debugger;
   if (!table.options.enableKeyboardShortcuts) return;
   if (event.isPropagationStopped()) return;
   const currentCell = event.currentTarget;