es-grid-template 1.9.96 → 1.9.98

package/es/grid-component/hooks/rowFocus.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEvent } from 'react';
+import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent } from 'react';
 import type { RowFocusEventArgs } from '../type';
 type RowFocus<T> = (args: RowFocusEventArgs<T>) => void;
 /** Capture clicks even when a cell handles the event itself. */
@@ -6,6 +6,7 @@ export declare function getRowFocusHandlers<T>(rowData: T, rowFocus?: RowFocus<T
     onClickCapture: (event: MouseEvent<HTMLElement>) => void;
     onContextMenuCapture: (event: MouseEvent<HTMLElement>) => void;
 };
-/** Notify arrow focus without changing the existing navigation or selection. */
-export declare function notifyArrowRowFocus<T>(rowData: T, method: 'arrowUp' | 'arrowDown', useArrow?: boolean, rowFocus?: RowFocus<T>): void;
+/** Report the last focused row after the arrow key is released. */
+export declare function notifyArrowRowFocus<T>(event: ReactKeyboardEvent, rowData: T, method: 'arrowUp' | 'arrowDown', useArrow?: boolean, rowFocus?: RowFocus<T>): void;
+export declare function focusArrowRow(event: ReactKeyboardEvent, rowId: string, columnId: string, scrollToRow: () => void): void;
 export {};

package/es/grid-component/hooks/rowFocus.js

@@ -1,3 +1,6 @@
+const gridViewportSelector = '[data-grid-scroll], [data-virtuoso-scroller]';
+const pendingArrowFocus = new WeakMap();
+
 /** Capture clicks even when a cell handles the event itself. */
 export function getRowFocusHandlers(rowData, rowFocus) {
   return {
@@ -16,10 +19,69 @@ export function getRowFocusHandlers(rowData, rowFocus) {
   };
 }
 
-/** Notify arrow focus without changing the existing navigation or selection. */
-export function notifyArrowRowFocus(rowData, method, useArrow, rowFocus) {
-  if (useArrow === true) rowFocus?.({
+/** Report the last focused row after the arrow key is released. */
+export function notifyArrowRowFocus(event, rowData, method, useArrow, rowFocus) {
+  if (useArrow !== true || !rowFocus) return;
+  const viewport = event.currentTarget.closest(gridViewportSelector);
+  const view = viewport?.ownerDocument.defaultView;
+  if (!viewport || !view) return;
+  const notify = () => rowFocus({
     rowData,
     method
   });
+  const pending = pendingArrowFocus.get(viewport);
+  if (pending) {
+    pending.key = event.key;
+    pending.notify = notify;
+    return;
+  }
+  const focus = {
+    key: event.key,
+    notify
+  };
+  pendingArrowFocus.set(viewport, focus);
+  const cancel = () => {
+    pendingArrowFocus.delete(viewport);
+    view.removeEventListener('keyup', release, true);
+    view.removeEventListener('blur', cancel);
+    view.removeEventListener('pointerdown', cancel, true);
+  };
+  const release = keyEvent => {
+    if (keyEvent.key !== focus.key) return;
+    cancel();
+    view.setTimeout(() => {
+      if (viewport.isConnected) focus.notify();
+    }, 0);
+  };
+
+  // A virtualized row can unmount before keyup reaches its original cell.
+  view.addEventListener('keyup', release, true);
+  view.addEventListener('blur', cancel);
+  view.addEventListener('pointerdown', cancel, true);
+}
+export function focusArrowRow(event, rowId, columnId, scrollToRow) {
+  event.preventDefault();
+  const source = event.currentTarget;
+  const body = source.closest('.ui-rc-grid-row')?.parentElement;
+  const row = body && Array.from(body.children).find(child => child.getAttribute('data-row-key') === rowId);
+  const viewport = source.closest(gridViewportSelector);
+  const canScroll = viewport && viewport.scrollHeight > viewport.clientHeight;
+  if (!row) {
+    if (canScroll) scrollToRow();
+    return;
+  }
+  const cell = Array.from(row.querySelectorAll(':scope > [data-col-key]')).find(element => element.getAttribute('data-col-key') === columnId) ?? row.querySelector(':scope > .ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+  cell?.focus({
+    preventScroll: true
+  });
+  if (canScroll) {
+    const header = body?.parentElement?.querySelector(':scope > .ui-rc-grid-thead');
+    const footer = body?.parentElement?.querySelector(':scope > .ui-rc-grid-tfoot');
+    const headerHeight = header?.getBoundingClientRect().height ?? 0;
+    const footerHeight = footer?.getBoundingClientRect().height ?? 0;
+    const viewportTop = viewport.getBoundingClientRect().top + viewport.clientTop;
+    const viewportCenter = viewportTop + (viewport.clientHeight + headerHeight - footerHeight) / 2;
+    const rowRect = row.getBoundingClientRect();
+    viewport.scrollTop += rowRect.top + rowRect.height / 2 - viewportCenter;
+  }
 }

package/es/grid-component/type.d.ts

@@ -791,7 +791,7 @@ export type IWrapSettings = {
     wrapMode?: IWrapMode;
 };
 export type SelectionSettings<T = AnyObject> = {
-    /** Invoke rowFocus on ArrowUp/ArrowDown. Defaults to false. */
+    /** Invoke rowFocus for the final row after releasing ArrowUp or ArrowDown. Defaults to false. */
     useArrow?: boolean;
     mode?: 'checkbox' | 'radio';
     type?: 'single' | 'multiple';

package/es/group-component/body/TableBodyCell.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import type { Virtualizer } from "@tanstack/react-virtual";
 import type { Cell, Table } from "@tanstack/react-table";
 import type { CommandClick } from "../../grid-component/type";
 interface TableBodyCellProps<T> {
     table: Table<T>;
+    rowVirtualizer?: Virtualizer<HTMLDivElement, HTMLDivElement>;
     tableId: string;
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick<T>) => void;

package/es/group-component/body/TableBodyCell.js

@@ -1,4 +1,4 @@
-import { notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
+import { focusArrowRow, notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
 import { getCommonPinningStyles, getSelectedCellMatrix } from "../hook/utils";
@@ -446,35 +446,20 @@ const TableBodyCell = props => {
       }
     },
     onKeyDown: e => {
-      const flatRows = table.getRowModel().flatRows;
-      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
-        const nextIndex = cell.row.index + 1;
-        // const nextIndex = rowNumber + 1
-
-        const nextId = flatRows[nextIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        notifyArrowRowFocus(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-        const rowQr = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = rowQr?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
-      }
-      if (e.key === 'ArrowUp' && rowNumber > 0) {
-        const prevIndex = cell.row.index - 1;
-        const nextId = flatRows[prevIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        notifyArrowRowFocus(table.getRow(nextId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        const rowQr = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = rowQr?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        const rows = table.getRowModel().rows;
+        const currentIndex = rows.findIndex(row => row.id === cell.row.id);
+        const nextIndex = currentIndex + (e.key === 'ArrowDown' ? 1 : -1);
+        const nextRow = currentIndex >= 0 ? rows[nextIndex] : undefined;
+        if (nextRow) {
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: nextRow.id
+          });
+          focusArrowRow(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
+            align: 'center'
+          }));
+          notifyArrowRowFocus(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/es/group-component/body/TableBodyCellEdit.js

@@ -1,4 +1,4 @@
-import { notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
+import { focusArrowRow, notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
 import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData, getColIdsBetween, getCommonPinningStyles, getEditType, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
@@ -787,93 +787,30 @@ const TableBodyCellEdit = props => {
       }
       return;
     }
-    if (e.key === 'ArrowDown') {
-      // e.preventDefault()
-      // e.stopPropagation()
-
-      let nextRowIndex = rowNumber + 1;
-      let nextRow = table.getRowModel().rows[nextRowIndex];
-
-      // Nếu nextRow có children và chưa được expand, thì tìm tiếp dòng tiếp theo
-      while (nextRow && nextRow.subRows && nextRow.subRows.length > 0) {
-        nextRowIndex++;
-        nextRow = table.getRowModel().rows[nextRowIndex];
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      const rows = table.getRowModel().rows;
+      const currentIndex = rows.findIndex(row => row.id === rowId);
+      if (currentIndex < 0) return;
+      const step = e.key === 'ArrowDown' ? 1 : -1;
+      let nextIndex = currentIndex + step;
+      let nextRow = rows[nextIndex];
+      while (nextRow?.subRows.length) {
+        nextIndex += step;
+        nextRow = rows[nextIndex];
       }
       if (nextRow) {
-        const nextRowId = nextRow.id;
-        setFocusedCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        notifyArrowRowFocus(table.getRow(nextRowId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-        setStartCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setEndCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setRangeState?.(getSelectedCellMatrix(table, {
-          rowId: nextRowId,
-          colId
-        }, {
-          rowId: nextRowId,
-          colId
-        }));
-
-        // columnVirtualizer.scrollToIndex(nextCol.getIndex(), { align: 'center' })
-        // rowVirtualizer.scrollToIndex(nextRow.index, { align: 'center' })
-
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextRowId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
-      }
-      return;
-    }
-    if (e.key === 'ArrowUp') {
-      // e.preventDefault()
-      // e.stopPropagation()
-
-      // const nextRow = table.getRowModel().rows[rowNumber - 1]
-
-      let prevRowIndex = rowNumber - 1;
-      let prevRow = table.getRowModel().rows[prevRowIndex];
-
-      // Nếu nextRow có children và chưa được expand, thì tìm tiếp dòng tiếp theo
-      while (prevRow && prevRow.subRows && prevRow.subRows.length > 0) {
-        prevRowIndex--;
-        prevRow = table.getRowModel().rows[prevRowIndex];
-      }
-      if (prevRow) {
-        const nextRowId = prevRow.id;
-        setFocusedCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        notifyArrowRowFocus(table.getRow(nextRowId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        setStartCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setEndCell?.({
-          rowId: nextRowId,
-          colId
-        });
-        setRangeState?.(getSelectedCellMatrix(table, {
-          rowId: nextRowId,
-          colId
-        }, {
-          rowId: nextRowId,
+        const nextCell = {
+          rowId: nextRow.id,
           colId
+        };
+        setFocusedCell?.(nextCell);
+        setStartCell?.(nextCell);
+        setEndCell?.(nextCell);
+        setRangeState?.(getSelectedCellMatrix(table, nextCell, nextCell));
+        focusArrowRow(e, nextRow.id, colId, () => rowVirtualizer.scrollToIndex(nextIndex, {
+          align: 'center'
         }));
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextRowId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
+        notifyArrowRowFocus(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
       }
       return;
     }

package/es/group-component/body/TableBodyCellEmpty.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import type { Virtualizer } from "@tanstack/react-virtual";
 import type { Cell, Table } from "@tanstack/react-table";
 import type { CommandClick } from "../../grid-component/type";
 interface TableBodyCellProps<T> {
     table: Table<T>;
+    rowVirtualizer?: Virtualizer<HTMLDivElement, HTMLDivElement>;
     tableId: string;
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick<T>) => void;

package/es/group-component/body/TableBodyCellEmpty.js

@@ -1,4 +1,4 @@
-import { notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
+import { focusArrowRow, notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
 // import ReactDOMServer from 'react-dom/server'
 
 import { getCommonPinningStyles } from "../hook/utils";
@@ -92,35 +92,20 @@ const TableBodyCellEmpty = props => {
       setIsPasting?.(false);
     },
     onKeyDown: e => {
-      const flatRows = table.getRowModel().flatRows;
-      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
-        const nextIndex = cell.row.index + 1;
-        // const nextIndex = rowNumber + 1
-
-        const nextId = flatRows[nextIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        notifyArrowRowFocus(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
-      }
-      if (e.key === 'ArrowUp' && rowNumber > 0) {
-        const prevIndex = cell.row.index - 1;
-        const nextId = flatRows[prevIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        notifyArrowRowFocus(table.getRow(nextId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        const rows = table.getRowModel().rows;
+        const currentIndex = rows.findIndex(row => row.id === cell.row.id);
+        const nextIndex = currentIndex + (e.key === 'ArrowDown' ? 1 : -1);
+        const nextRow = currentIndex >= 0 ? rows[nextIndex] : undefined;
+        if (nextRow) {
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: nextRow.id
+          });
+          focusArrowRow(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
+            align: 'center'
+          }));
+          notifyArrowRowFocus(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/es/group-component/body/TableBodyRowGroupCell.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
+import type { Virtualizer } from "@tanstack/react-virtual";
 import type { Cell, Table } from "@tanstack/react-table";
 import type { CommandClick } from "../../grid-component/type";
 interface TableBodyCellProps<T> {
     table: Table<T>;
+    rowVirtualizer?: Virtualizer<HTMLDivElement, HTMLDivElement>;
     tableId: string;
     cell: Cell<T, unknown>;
     commandClick?: (args: CommandClick<T>) => void;

package/es/group-component/body/TableBodyRowGroupCell.js

@@ -1,4 +1,4 @@
-import { notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
+import { focusArrowRow, notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
 import { getCommonPinningStyles } from "../hook/utils";
@@ -426,35 +426,20 @@ const TableBodyCell = props => {
       setIsPasting?.(false);
     },
     onKeyDown: e => {
-      const flatRows = table.getRowModel().flatRows;
-      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
-        const nextIndex = cell.row.index + 1;
-        // const nextIndex = rowNumber + 1
-
-        const nextId = flatRows[nextIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        notifyArrowRowFocus(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-        const rowQr = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = rowQr?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
-      }
-      if (e.key === 'ArrowUp' && rowNumber > 0) {
-        const prevIndex = cell.row.index - 1;
-        const nextId = flatRows[prevIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        notifyArrowRowFocus(table.getRow(nextId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        const rowQr = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = rowQr?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        const rows = table.getRowModel().rows;
+        const currentIndex = rows.findIndex(row => row.id === cell.row.id);
+        const nextIndex = currentIndex + (e.key === 'ArrowDown' ? 1 : -1);
+        const nextRow = currentIndex >= 0 ? rows[nextIndex] : undefined;
+        if (nextRow) {
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: nextRow.id
+          });
+          focusArrowRow(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
+            align: 'center'
+          }));
+          notifyArrowRowFocus(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {

package/es/group-component/hook/utils.d.ts

@@ -167,7 +167,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     haveSum?: boolean;
     isSummary?: boolean;
     sumGroup?: boolean;
-    summaryTemplate?: (data: number, key: string) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    summaryTemplate?: (data: number, key: string) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
     sorter?: boolean;
     allowFiltering?: boolean;
     allowSortering?: boolean;
@@ -179,27 +179,27 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     showFilterSearch?: boolean;
     hidden?: boolean;
     visible?: boolean;
-    headerTooltip?: string | boolean | (() => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    headerTooltip?: string | boolean | (() => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     columnGroupText?: string;
     headerTextAlign?: import("./../../grid-component/type").ITextAlign;
-    headerTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((column: ColumnTable<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    headerTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((column: ColumnTable<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     fixedType?: import("./../../grid-component/type").FixedType;
     headerTextWrap?: boolean;
     ellipsis?: boolean;
     allowResizing?: boolean;
     align?: import("./../../grid-component/type").ITextAlign;
     textAlign?: import("./../../grid-component/type").ITextAlign;
-    template?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
-    linkTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    template?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    linkTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     showTooltip?: boolean;
     tooltipDescription?: string | ((args: {
         value: any;
         rowData: RecordType;
-    }) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
-    onCellStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
-    onCellHeaderStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "width" | "minWidth">);
+    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/group-component/table/TableWrapper.js

@@ -193,6 +193,7 @@ const TableWrapper = props => {
   }, /*#__PURE__*/React.createElement("div", {
     // id={id}
     ref: tableContainerRef,
+    "data-grid-scroll": true,
     style: {
       overflow: 'auto',
       //our scrollable table container

package/es/table-component/body/TableBodyCell.js

@@ -1,4 +1,4 @@
-import { notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
+import { focusArrowRow, notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
 import { getCommonPinningStyles, getFormat } from "../hook/utils";
@@ -435,44 +435,20 @@ const TableBodyCell = props => {
       }
     },
     onKeyDown: e => {
-      const flatRows = table.getRowModel().flatRows;
-      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
-        const nextIndex = cell.row.index + 1;
-        // const nextIndex = rowNumber + 1
-
-        const nextId = flatRows[nextIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        notifyArrowRowFocus(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
-
-        // if (rowNumber < flatRows.length - 5) {
-        //   e.stopPropagation()
-        //   e.preventDefault()
-        //   rowVirtualizer.scrollToIndex(cell.row.index, {
-        //     align: 'center', // 'start' | 'center' | 'end'
-        //   })
-        // }
-
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
-        }
-      }
-      if (e.key === 'ArrowUp' && rowNumber > 0) {
-        const prevIndex = cell.row.index - 1;
-        const nextId = flatRows[prevIndex].id;
-        setFocusedCell?.({
-          colId: cell.column.id,
-          rowId: nextId
-        });
-        notifyArrowRowFocus(table.getRow(nextId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
-        const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
-        const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
-        if (cellFocus) {
-          cellFocus.focus();
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        const rows = table.getRowModel().rows;
+        const currentIndex = rows.findIndex(row => row.id === cell.row.id);
+        const nextIndex = currentIndex + (e.key === 'ArrowDown' ? 1 : -1);
+        const nextRow = currentIndex >= 0 ? rows[nextIndex] : undefined;
+        if (nextRow) {
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: nextRow.id
+          });
+          focusArrowRow(e, nextRow.id, cell.column.id, () => props.rowVirtualizer?.scrollToIndex(nextIndex, {
+            align: 'center'
+          }));
+          notifyArrowRowFocus(e, nextRow.original, e.key === 'ArrowDown' ? 'arrowDown' : 'arrowUp', selectionSettings?.useArrow, rowFocus);
         }
       }
       if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {