es-grid-template 1.9.93 → 1.9.94

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRowFocusHandlers = getRowFocusHandlers;
+exports.notifyArrowRowFocus = notifyArrowRowFocus;
+/** Capture clicks even when a cell handles the event itself. */
+function getRowFocusHandlers(rowData, rowFocus) {
+  return {
+    onClickCapture: event => {
+      if (event.button === 0) rowFocus?.({
+        rowData,
+        method: 'mouseLeftClick'
+      });
+    },
+    onContextMenuCapture: event => {
+      if (event.button === 2) rowFocus?.({
+        rowData,
+        method: 'mouseRightClick'
+      });
+    }
+  };
+}
+
+/** Notify arrow focus without changing the existing navigation or selection. */
+function notifyArrowRowFocus(rowData, method, useArrow, rowFocus) {
+  if (useArrow === true) rowFocus?.({
+    rowData,
+    method
+  });
+}

package/lib/grid-component/index.d.ts

@@ -1,5 +1,5 @@
 import TempTable from './TempTable';
-import type { ColumnsTable, TableProps, ColumnTable, CommandItem, ContextMenuItem } from './type';
+import type { ColumnsTable, TableProps, ColumnTable, CommandItem, ContextMenuItem, RowFocusEventArgs } from './type';
 import type { ToolbarItem } from "rc-master-ui/es/toolbar";
-export type { ColumnsTable, TableProps, ColumnTable, ToolbarItem, CommandItem, ContextMenuItem };
+export type { ColumnsTable, TableProps, ColumnTable, ToolbarItem, CommandItem, ContextMenuItem, RowFocusEventArgs };
 export default TempTable;

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

@@ -451,6 +451,8 @@ export type TableProps<RecordType = AnyObject> = {
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
     /** Click vào row */
     recordClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
+    /** Notify mouse clicks or enabled arrow-key navigation independently of row selection. */
+    rowFocus?: (args: RowFocusEventArgs<RecordType>) => void;
     /** Filter */
     /** Hiển thị filter nâng cao */
     showAdvanceFilter?: boolean;
@@ -789,6 +791,8 @@ export type IWrapSettings = {
     wrapMode?: IWrapMode;
 };
 export type SelectionSettings<T = AnyObject> = {
+    /** Invoke rowFocus on ArrowUp/ArrowDown. Defaults to false. */
+    useArrow?: boolean;
     mode?: 'checkbox' | 'radio';
     type?: 'single' | 'multiple';
     checkboxOnly?: boolean;
@@ -824,6 +828,10 @@ export type RowSelection<T> = {
     checkboxOnly?: boolean;
     arrowKey?: boolean;
 };
+export type RowFocusEventArgs<RecordType> = {
+    rowData: RecordType;
+    method: 'mouseLeftClick' | 'mouseRightClick' | 'arrowUp' | 'arrowDown';
+};
 export type RecordDoubleClickEventArgs<RecordType> = {
     rowData: RecordType;
     rowIndex: number | undefined;

package/lib/group-component/TableContainer.js

@@ -38,6 +38,7 @@ const TableContainer = props => {
     expandable,
     wrapSettings,
     recordDoubleClick,
+    rowFocus,
     // triggerFilter,
     selectionSettings,
     isSelectionChange,
@@ -325,6 +326,7 @@ const TableContainer = props => {
       // triggerFilter,
       wrapSettings,
       recordDoubleClick,
+      rowFocus,
       selectionSettings,
       isSelectionChange,
       setIsSelectionChange,

package/lib/group-component/TableContainerEdit.js

@@ -86,6 +86,7 @@ const TableContainerEdit = props => {
     expandable,
     wrapSettings,
     recordDoubleClick,
+    rowFocus,
     // triggerFilter,
     selectionSettings,
     isSelectionChange,
@@ -2213,6 +2214,7 @@ const TableContainerEdit = props => {
       originData,
       wrapSettings,
       recordDoubleClick,
+      rowFocus,
       selectionSettings: {
         ...selectionSettings,
         checkboxOnly: true

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _rowFocus = require("../../grid-component/hooks/rowFocus");
 var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
 var _Command = _interopRequireDefault(require("../components/command/Command"));
 var _utils = require("../hook/utils");
@@ -164,6 +165,7 @@ const TableBodyCell = props => {
     id,
     prefix,
     focusedCell,
+    rowFocus,
     setFocusedCell,
     // endCell,
     // startCell,
@@ -462,6 +464,7 @@ const TableBodyCell = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+        (0, _rowFocus.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) {
@@ -475,6 +478,7 @@ const TableBodyCell = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+        (0, _rowFocus.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) {

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _rowFocus = require("../../grid-component/hooks/rowFocus");
 var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
 var _Command = _interopRequireDefault(require("../components/command/Command"));
 var _utils = require("../hook/utils");
@@ -202,6 +203,7 @@ const TableBodyCellEdit = props => {
     editingKey,
     prefix,
     focusedCell,
+    rowFocus,
     rangeState,
     setFocusedCell,
     setEditingKey,
@@ -810,6 +812,7 @@ const TableBodyCellEdit = props => {
           rowId: nextRowId,
           colId
         });
+        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextRowId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
         setStartCell?.({
           rowId: nextRowId,
           colId
@@ -857,6 +860,7 @@ const TableBodyCellEdit = props => {
           rowId: nextRowId,
           colId
         });
+        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextRowId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
         setStartCell?.({
           rowId: nextRowId,
           colId

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _rowFocus = require("../../grid-component/hooks/rowFocus");
 var _utils = require("../hook/utils");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
@@ -22,6 +23,7 @@ const TableBodyCellEmpty = props => {
     id,
     prefix,
     focusedCell,
+    rowFocus,
     setFocusedCell,
     setIsSelectionChange,
     isSelectionChange,
@@ -107,6 +109,7 @@ const TableBodyCellEmpty = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+        (0, _rowFocus.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) {
@@ -120,6 +123,7 @@ const TableBodyCellEmpty = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+        (0, _rowFocus.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) {

package/lib/group-component/body/TableBodyRow.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _rowFocus = require("../../grid-component/hooks/rowFocus");
 var _TableBodyCell = _interopRequireDefault(require("./TableBodyCell"));
 var _TableBodyCellEdit = _interopRequireDefault(require("./TableBodyCellEdit"));
 var _react = _interopRequireDefault(require("react"));
@@ -35,6 +36,7 @@ const TableBodyRow = ({
   const {
     prefix,
     recordDoubleClick,
+    rowFocus,
     focusedCell,
     rowClassName,
     rowEditable,
@@ -60,7 +62,7 @@ const TableBodyRow = ({
   const rowClass = typeof rowClassName === 'function' ? rowClassName(row.original, row.index, row.depth) : rowClassName;
   const rowStyles = typeof onRowStyles === 'function' ? onRowStyles(row.original, row) : onRowStyles;
   const isRowEditable = rowEditable ? rowEditable(row.original) : true;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     "data-index": virtualRow.index //needed for dynamic row height measurement
     ,
     ref: rowVirtualizer.measureElement //measure dynamic row height
@@ -86,7 +88,8 @@ const TableBodyRow = ({
       height: isEditing ? virtualRow.size : undefined,
       minHeight: isEditing ? undefined : virtualRow.size,
       ...rowStyles
-    },
+    }
+  }, (0, _rowFocus.getRowFocusHandlers)(row.original, rowFocus), {
     onDoubleClick: e => {
       recordDoubleClick?.({
         e,
@@ -110,7 +113,7 @@ const TableBodyRow = ({
         field: colKey
       })(e);
     }
-  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
+  }), fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
     const cell = row.getVisibleCells().find(c => c.column.id === column.id);
     if (row.subRows && row.subRows.length === 0 && groupColumns?.includes(cell.column.id)) {
       return /*#__PURE__*/_react.default.createElement(_TableBodyCellEmpty.default, (0, _extends2.default)({}, rest, {

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _rowFocus = require("../../grid-component/hooks/rowFocus");
 var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
 var _Command = _interopRequireDefault(require("../components/command/Command"));
 var _utils = require("../hook/utils");
@@ -164,6 +165,7 @@ const TableBodyCell = props => {
     id,
     prefix,
     focusedCell,
+    rowFocus,
     setFocusedCell,
     // endCell,
     // startCell,
@@ -442,6 +444,7 @@ const TableBodyCell = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+        (0, _rowFocus.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) {
@@ -455,6 +458,7 @@ const TableBodyCell = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+        (0, _rowFocus.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) {

package/lib/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, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     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/lib/group-component/useContext.d.ts

@@ -1,3 +1,4 @@
+import type { RowFocusEventArgs } from "../grid-component/type";
 import type { Dispatch, SetStateAction } from 'react';
 import type { ColumnTable, ExpandableConfig, IFormat, IGroupSetting, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "./../grid-component/type";
 import type { SubmitHandler } from "react-hook-form";
@@ -19,6 +20,7 @@ export interface IContext<T> {
     setExpanded: Dispatch<SetStateAction<ExpandedState>>;
     expanded: ExpandedState;
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<T>) => void;
+    rowFocus?: (args: RowFocusEventArgs<T>) => void;
     selectionSettings?: SelectionSettings;
     isSelectionChange?: {
         isChange: boolean;

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Dropdown } from './dropdown';
 export type { DropdownProps as DropDownProps, DropdownProps, } from './dropdown';
 export { default as GridComponent } from './grid-component';
-export type { ColumnsTable, TableProps, ColumnTable, CommandItem, ToolbarItem, ContextMenuItem } from './grid-component';
+export type { ColumnsTable, TableProps, ColumnTable, CommandItem, ToolbarItem, ContextMenuItem, RowFocusEventArgs } from './grid-component';
 export { default as Tabs } from './tabs';
 export type { TabPaneProps, TabsProps } from './tabs';
 export { default as SelectTable } from './select-table';

package/lib/table-component/TableContainer.js

@@ -36,6 +36,7 @@ const TableContainer = props => {
     expandable,
     wrapSettings,
     recordDoubleClick,
+    rowFocus,
     // triggerFilter,
     selectionSettings,
     isSelectionChange,
@@ -332,6 +333,7 @@ const TableContainer = props => {
       // triggerFilter,
       wrapSettings,
       recordDoubleClick,
+      rowFocus,
       recordClick,
       selectionSettings,
       isSelectionChange,

package/lib/table-component/TableContainerEdit.js

@@ -83,6 +83,7 @@ const TableContainerEdit = props => {
     expandable,
     wrapSettings,
     recordDoubleClick,
+    rowFocus,
     selectionSettings,
     isSelectionChange,
     setIsSelectionChange,
@@ -2224,6 +2225,7 @@ const TableContainerEdit = props => {
       originData,
       wrapSettings,
       recordDoubleClick,
+      rowFocus,
       selectionSettings,
       isSelectionChange,
       setIsSelectionChange,

package/lib/table-component/body/TableBody.js

@@ -34,9 +34,13 @@ const TableBody = ({
     locale
   } = _react.default.useContext(_useContext.TableContext);
 
+  // Keep measured heights attached to records when expanding, sorting or filtering.
+  const getItemKey = _react.default.useCallback(index => rows[index].id, [rows]);
+
   //dynamic row height virtualization - alternatively you could use a simpler fixed row height strategy without the need for `measureElement`
   const rowVirtualizer = (0, _reactVirtual.useVirtualizer)({
     count: rows.length,
+    getItemKey,
     estimateSize: () => 32,
     //estimate row height for accurate scrollbar dragging
     getScrollElement: () => tableContainerRef.current,

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _rowFocus = require("../../grid-component/hooks/rowFocus");
 var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
 var _Command = _interopRequireDefault(require("../components/command/Command"));
 var _utils = require("../hook/utils");
@@ -170,6 +171,7 @@ const TableBodyCell = props => {
     id,
     prefix,
     focusedCell,
+    rowFocus,
     setFocusedCell,
     // endCell,
     // startCell,
@@ -450,6 +452,7 @@ const TableBodyCell = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
 
         // if (rowNumber < flatRows.length - 5) {
         //   e.stopPropagation()
@@ -472,6 +475,7 @@ const TableBodyCell = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+        (0, _rowFocus.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) {

package/lib/table-component/body/TableBodyCellEdit.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _rowFocus = require("../../grid-component/hooks/rowFocus");
 var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
 var _Command = _interopRequireDefault(require("../components/command/Command"));
 var _utils = require("../hook/utils");
@@ -199,6 +200,7 @@ const TableBodyCellEdit = props => {
     editingKey,
     prefix,
     focusedCell,
+    rowFocus,
     rangeState,
     setFocusedCell,
     setEditingKey,
@@ -833,6 +835,7 @@ const TableBodyCellEdit = props => {
           rowId: nextRowId,
           colId
         });
+        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextRowId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
         setStartCell?.({
           rowId: nextRowId,
           colId
@@ -871,6 +874,7 @@ const TableBodyCellEdit = props => {
           rowId: nextRowId,
           colId
         });
+        (0, _rowFocus.notifyArrowRowFocus)(table.getRow(nextRowId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
         setStartCell?.({
           rowId: nextRowId,
           colId

package/lib/table-component/body/TableBodyRow.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _rowFocus = require("../../grid-component/hooks/rowFocus");
 var _TableBodyCell = _interopRequireDefault(require("./TableBodyCell"));
 var _TableBodyCellEdit = _interopRequireDefault(require("./TableBodyCellEdit"));
 var _react = _interopRequireDefault(require("react"));
@@ -32,6 +33,7 @@ const TableBodyRow = ({
   const {
     prefix,
     recordDoubleClick,
+    rowFocus,
     focusedCell,
     rowClassName,
     rowEditable,
@@ -61,10 +63,15 @@ const TableBodyRow = ({
     isSelected: row.getIsSelected()
   }) : onRowStyles;
   const isRowEditable = rowEditable ? rowEditable(row.original) : true;
-  return /*#__PURE__*/_react.default.createElement("div", {
+
+  // A reused DOM row needs measuring again when its virtual index changes.
+  const measureRow = _react.default.useCallback(element => {
+    rowVirtualizer.measureElement(element);
+  }, [rowVirtualizer, virtualRow.index]);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     "data-index": virtualRow.index //needed for dynamic row height measurement
     ,
-    ref: rowVirtualizer.measureElement //measure dynamic row height
+    ref: measureRow //measure dynamic row height
     ,
     key: row.id,
     "data-row-key": row.id,
@@ -87,7 +94,8 @@ const TableBodyRow = ({
       height: isEditing ? virtualRow.size : undefined,
       minHeight: isEditing ? undefined : virtualRow.size,
       ...rowStyles
-    },
+    }
+  }, (0, _rowFocus.getRowFocusHandlers)(row.original, rowFocus), {
     onDoubleClick: e => {
       recordDoubleClick?.({
         e,
@@ -106,7 +114,7 @@ const TableBodyRow = ({
       })(e);
       // }
     }
-  }, fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
+  }), fixedLeftColumns.length > 0 ? fixedLeftColumns.map(column => {
     const cell = row.getVisibleCells().find(c => c.column.id === column.id);
     if (editAble) {
       return /*#__PURE__*/_react.default.createElement(_TableBodyCellEdit.default, (0, _extends2.default)({}, rest, {

package/lib/table-component/useContext.d.ts

@@ -1,3 +1,4 @@
+import type { RowFocusEventArgs } from "../grid-component/type";
 import type { Dispatch, SetStateAction } from 'react';
 import type { ColumnTable, ExpandableConfig, FilterItem, IFormat, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "./../grid-component/type";
 import type { SubmitHandler } from "react-hook-form";
@@ -20,6 +21,7 @@ export interface IContext<T> {
     setExpanded: Dispatch<SetStateAction<ExpandedState>>;
     expanded: ExpandedState;
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<T>) => void;
+    rowFocus?: (args: RowFocusEventArgs<T>) => void;
     recordClick?: (args: RecordDoubleClickEventArgs<T>) => void;
     selectionSettings?: SelectionSettings;
     isSelectionChange?: {

package/lib/table-virtuoso/body/TableBodyCell.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _rowFocus = require("../../grid-component/hooks/rowFocus");
 var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
 var _utils = require("../hook/utils");
 var _Checkbox = _interopRequireDefault(require("rc-master-ui/lib/checkbox/Checkbox"));
@@ -158,6 +159,7 @@ const TableBodyCell = props => {
     id,
     prefix,
     focusedCell,
+    rowFocus,
     setFocusedCell,
     // endCell,
     // startCell,
@@ -389,6 +391,7 @@ const TableBodyCell = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+        (0, _rowFocus.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) {
@@ -402,6 +405,7 @@ const TableBodyCell = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+        (0, _rowFocus.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) {

package/lib/table-virtuoso/body/TableBodyCellRowGroup.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _rowFocus = require("../../grid-component/hooks/rowFocus");
 var _utils = require("../hook/utils");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireDefault(require("react"));
@@ -23,6 +24,7 @@ const TableBodyCellRowGroup = props => {
     id,
     prefix,
     focusedCell,
+    rowFocus,
     setFocusedCell,
     expanded,
     setExpanded,
@@ -104,6 +106,7 @@ const TableBodyCellRowGroup = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+        (0, _rowFocus.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) {
@@ -117,6 +120,7 @@ const TableBodyCellRowGroup = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+        (0, _rowFocus.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) {

package/lib/table-virtuoso/body/TableBodyRow.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _rowFocus = require("../../grid-component/hooks/rowFocus");
 var _TableBodyCell = _interopRequireDefault(require("./TableBodyCell"));
 var _reactTable = require("@tanstack/react-table");
 var _react = _interopRequireDefault(require("react"));
@@ -33,6 +34,7 @@ const TableBodyRow = ({
   const {
     prefix,
     recordDoubleClick,
+    rowFocus,
     focusedCell,
     rowClassName,
     onRowStyles,
@@ -67,7 +69,8 @@ const TableBodyRow = ({
     style: {
       ...rowStyles,
       height: rowheight
-    },
+    }
+  }, (0, _rowFocus.getRowFocusHandlers)(row.original, rowFocus), {
     onDoubleClick: e => {
       recordDoubleClick?.({
         e,

package/lib/table-virtuoso/table/TableContainer.js

@@ -37,6 +37,7 @@ const TableContainer = props => {
     expandable,
     wrapSettings,
     recordDoubleClick,
+    rowFocus,
     // triggerFilter,
     selectionSettings,
     isSelectionChange,
@@ -281,6 +282,7 @@ const TableContainer = props => {
       originData,
       wrapSettings,
       recordDoubleClick,
+      rowFocus,
       selectionSettings,
       isSelectionChange,
       setIsSelectionChange,

package/lib/table-virtuoso/useContext.d.ts

@@ -1,3 +1,4 @@
+import type { RowFocusEventArgs } from "../grid-component/type";
 import type { Dispatch, SetStateAction } from 'react';
 import type { ColumnTable, ExpandableConfig, IFormat, IGroupSetting, IWrapSettings, Locale, PaginationConfig, RangeState, RecordDoubleClickEventArgs, RowClassName, SelectionSettings, SourceFilter } from "../grid-component/type";
 import type { SubmitHandler } from "react-hook-form";
@@ -19,6 +20,7 @@ export interface IContext<T> {
     setExpanded: Dispatch<SetStateAction<ExpandedState>>;
     expanded: ExpandedState;
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<T>) => void;
+    rowFocus?: (args: RowFocusEventArgs<T>) => void;
     selectionSettings?: SelectionSettings;
     isSelectionChange?: {
         isChange: boolean;