es-grid-template 1.9.92 → 1.9.94

package/es/ali-table/pipeline/features/columnCustom.js

@@ -338,6 +338,9 @@ export function columnCustom(opts) {
     //  Chức năng edit
 
     const handleEdit = (e, record, col, editType, isKeyDown, isHeader) => {
+      if (!isHeader && (!isEditable(col, record) || rowEditable?.(record) === false)) {
+        return;
+      }
       reset?.();
       const cell = e.currentTarget;
       pipeline.setStateAtKey(stateKeyIsEditing, {
@@ -550,6 +553,9 @@ export function columnCustom(opts) {
             // Không vượt quá số cột
             return;
           }
+          if (!isEditable(leafColumns[targetCol], newData[targetRow])) {
+            return;
+          }
           const columnKey = leafColumns[targetCol].field;
           newData[targetRow] = {
             ...newData[targetRow],

package/es/grid-component/GridRefreshButton.css

@@ -1,9 +1,9 @@
-.ui-rc-grid-refresh-spin {
-  transform-origin: center;
-  transform-box: fill-box;
-  animation: ui-rc-grid-refresh-spin 0.8s linear infinite;
-}
-
-@keyframes ui-rc-grid-refresh-spin {
-  to { transform: rotate(360deg); }
-}
+.ui-rc-grid-refresh-spin {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: ui-rc-grid-refresh-spin 0.8s linear infinite;
+}
+
+@keyframes ui-rc-grid-refresh-spin {
+  to { transform: rotate(360deg); }
+}

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

@@ -0,0 +1,11 @@
+import type { 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. */
+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;
+export {};

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

@@ -0,0 +1,25 @@
+/** Capture clicks even when a cell handles the event itself. */
+export 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. */
+export function notifyArrowRowFocus(rowData, method, useArrow, rowFocus) {
+  if (useArrow === true) rowFocus?.({
+    rowData,
+    method
+  });
+}

package/es/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/es/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/es/group-component/TableContainer.js

@@ -30,6 +30,7 @@ const TableContainer = props => {
     expandable,
     wrapSettings,
     recordDoubleClick,
+    rowFocus,
     // triggerFilter,
     selectionSettings,
     isSelectionChange,
@@ -317,6 +318,7 @@ const TableContainer = props => {
       // triggerFilter,
       wrapSettings,
       recordDoubleClick,
+      rowFocus,
       selectionSettings,
       isSelectionChange,
       setIsSelectionChange,

package/es/group-component/TableContainerEdit.js

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

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

@@ -1,3 +1,4 @@
+import { 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";
@@ -156,6 +157,7 @@ const TableBodyCell = props => {
     id,
     prefix,
     focusedCell,
+    rowFocus,
     setFocusedCell,
     // endCell,
     // startCell,
@@ -454,6 +456,7 @@ const TableBodyCell = props => {
           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) {
@@ -467,6 +470,7 @@ const TableBodyCell = props => {
           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) {

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

@@ -1,3 +1,4 @@
+import { 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";
@@ -195,6 +196,7 @@ const TableBodyCellEdit = props => {
     editingKey,
     prefix,
     focusedCell,
+    rowFocus,
     rangeState,
     setFocusedCell,
     setEditingKey,
@@ -803,6 +805,7 @@ const TableBodyCellEdit = props => {
           rowId: nextRowId,
           colId
         });
+        notifyArrowRowFocus(table.getRow(nextRowId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
         setStartCell?.({
           rowId: nextRowId,
           colId
@@ -850,6 +853,7 @@ const TableBodyCellEdit = props => {
           rowId: nextRowId,
           colId
         });
+        notifyArrowRowFocus(table.getRow(nextRowId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
         setStartCell?.({
           rowId: nextRowId,
           colId

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

@@ -1,3 +1,4 @@
+import { notifyArrowRowFocus } from "../../grid-component/hooks/rowFocus";
 // import ReactDOMServer from 'react-dom/server'
 
 import { getCommonPinningStyles } from "../hook/utils";
@@ -15,6 +16,7 @@ const TableBodyCellEmpty = props => {
     id,
     prefix,
     focusedCell,
+    rowFocus,
     setFocusedCell,
     setIsSelectionChange,
     isSelectionChange,
@@ -100,6 +102,7 @@ const TableBodyCellEmpty = props => {
           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) {
@@ -113,6 +116,7 @@ const TableBodyCellEmpty = props => {
           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) {

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { getRowFocusHandlers } from "../../grid-component/hooks/rowFocus";
 import TableBodyCell from "./TableBodyCell";
 import TableBodyCellEdit from "./TableBodyCellEdit";
 import React from "react";
@@ -28,6 +29,7 @@ const TableBodyRow = ({
   const {
     prefix,
     recordDoubleClick,
+    rowFocus,
     focusedCell,
     rowClassName,
     rowEditable,
@@ -53,7 +55,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.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({
     "data-index": virtualRow.index //needed for dynamic row height measurement
     ,
     ref: rowVirtualizer.measureElement //measure dynamic row height
@@ -79,7 +81,8 @@ const TableBodyRow = ({
       height: isEditing ? virtualRow.size : undefined,
       minHeight: isEditing ? undefined : virtualRow.size,
       ...rowStyles
-    },
+    }
+  }, getRowFocusHandlers(row.original, rowFocus), {
     onDoubleClick: e => {
       recordDoubleClick?.({
         e,
@@ -103,7 +106,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.createElement(TableBodyCellEmpty, _extends({}, rest, {

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

@@ -1,3 +1,4 @@
+import { 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";
@@ -156,6 +157,7 @@ const TableBodyCell = props => {
     id,
     prefix,
     focusedCell,
+    rowFocus,
     setFocusedCell,
     // endCell,
     // startCell,
@@ -434,6 +436,7 @@ const TableBodyCell = props => {
           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) {
@@ -447,6 +450,7 @@ const TableBodyCell = props => {
           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) {

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").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
+    summaryTemplate?: (data: number, key: string) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
     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").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    headerTooltip?: string | boolean | (() => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
     columnGroupText?: string;
     headerTextAlign?: import("./../../grid-component/type").ITextAlign;
-    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);
+    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>>);
     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").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);
+    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>>);
     showTooltip?: boolean;
     tooltipDescription?: string | ((args: {
         value: any;
         rowData: RecordType;
-    }) => 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">);
+    }) => 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">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    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">);
+    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">);
     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/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/es/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/es/table-component/TableContainer.js

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

package/es/table-component/TableContainerEdit.js

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

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

@@ -25,9 +25,13 @@ const TableBody = ({
     locale
   } = React.useContext(TableContext);
 
+  // Keep measured heights attached to records when expanding, sorting or filtering.
+  const getItemKey = React.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 = useVirtualizer({
     count: rows.length,
+    getItemKey,
     estimateSize: () => 32,
     //estimate row height for accurate scrollbar dragging
     getScrollElement: () => tableContainerRef.current,

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

@@ -1,3 +1,4 @@
+import { 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";
@@ -163,6 +164,7 @@ const TableBodyCell = props => {
     id,
     prefix,
     focusedCell,
+    rowFocus,
     setFocusedCell,
     // endCell,
     // startCell,
@@ -443,6 +445,7 @@ const TableBodyCell = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+        notifyArrowRowFocus(table.getRow(nextId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
 
         // if (rowNumber < flatRows.length - 5) {
         //   e.stopPropagation()
@@ -465,6 +468,7 @@ const TableBodyCell = props => {
           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) {

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

@@ -1,3 +1,4 @@
+import { 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, getDragRightData, getEditType, getFormat,
@@ -194,6 +195,7 @@ const TableBodyCellEdit = props => {
     editingKey,
     prefix,
     focusedCell,
+    rowFocus,
     rangeState,
     setFocusedCell,
     setEditingKey,
@@ -269,6 +271,7 @@ const TableBodyCellEdit = props => {
     return selectRowIds.includes(cell.row.id) && colIdss.includes(cell.column.id);
   }, [cell.column.id, cell.row.id, endCell, selectRowIds, startCell, table]);
   const editType = typeof columnMeta.editType === 'function' ? columnMeta.editType(record) : columnMeta.editType;
+  const isSelectCell = ['select', 'selectTable', 'asyncSelect', 'treeSelect'].includes(editType ?? 'text');
   const {
     rowRange,
     colRange,
@@ -827,6 +830,7 @@ const TableBodyCellEdit = props => {
           rowId: nextRowId,
           colId
         });
+        notifyArrowRowFocus(table.getRow(nextRowId).original, 'arrowDown', selectionSettings?.useArrow, rowFocus);
         setStartCell?.({
           rowId: nextRowId,
           colId
@@ -865,6 +869,7 @@ const TableBodyCellEdit = props => {
           rowId: nextRowId,
           colId
         });
+        notifyArrowRowFocus(table.getRow(nextRowId).original, 'arrowUp', selectionSettings?.useArrow, rowFocus);
         setStartCell?.({
           rowId: nextRowId,
           colId
@@ -1453,7 +1458,7 @@ const TableBodyCellEdit = props => {
     }, cellContent)))
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames('ui-rc_cell-content', {
-      'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect', 'treeSelect'].includes(getEditType(columnMeta, record))
+      'select-cell': isSelectCell
     })
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
     className: "ui-rc-table-row-expand-trigger",
@@ -1491,14 +1496,14 @@ const TableBodyCellEdit = props => {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
   })) : /*#__PURE__*/React.createElement("span", {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), cellContent, (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/React.createElement("span", {
+  }))), cellContent, isSelectCell && canEdit && /*#__PURE__*/React.createElement("span", {
     className: 'caret-down',
     onClick: e => {
       handleEdit(e);
     }
   })))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classNames('ui-rc_cell-content', {
-      'select-cell': canEdit && ['select', 'selectTable', 'asyncSelect', 'treeSelect'].includes(getEditType(columnMeta, record))
+      'select-cell': isSelectCell
     })
   }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
     className: "ui-rc-table-row-expand-trigger",
@@ -1536,7 +1541,7 @@ const TableBodyCellEdit = props => {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
   })) : /*#__PURE__*/React.createElement("span", {
     className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
-  }))), cellContent, (editType === 'select' || editType === 'selectTable' || editType === 'asyncSelect' || editType === 'treeSelect') && canEdit && /*#__PURE__*/React.createElement("span", {
+  }))), cellContent, isSelectCell && canEdit && /*#__PURE__*/React.createElement("span", {
     className: 'caret-down',
     onClick: e => {
       handleEdit(e);

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { getRowFocusHandlers } from "../../grid-component/hooks/rowFocus";
 import TableBodyCell from "./TableBodyCell";
 import TableBodyCellEdit from "./TableBodyCellEdit";
 import React from "react";
@@ -25,6 +26,7 @@ const TableBodyRow = ({
   const {
     prefix,
     recordDoubleClick,
+    rowFocus,
     focusedCell,
     rowClassName,
     rowEditable,
@@ -54,10 +56,15 @@ const TableBodyRow = ({
     isSelected: row.getIsSelected()
   }) : onRowStyles;
   const isRowEditable = rowEditable ? rowEditable(row.original) : true;
-  return /*#__PURE__*/React.createElement("div", {
+
+  // A reused DOM row needs measuring again when its virtual index changes.
+  const measureRow = React.useCallback(element => {
+    rowVirtualizer.measureElement(element);
+  }, [rowVirtualizer, virtualRow.index]);
+  return /*#__PURE__*/React.createElement("div", _extends({
     "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,
@@ -80,7 +87,8 @@ const TableBodyRow = ({
       height: isEditing ? virtualRow.size : undefined,
       minHeight: isEditing ? undefined : virtualRow.size,
       ...rowStyles
-    },
+    }
+  }, getRowFocusHandlers(row.original, rowFocus), {
     onDoubleClick: e => {
       recordDoubleClick?.({
         e,
@@ -99,7 +107,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.createElement(TableBodyCellEdit, _extends({}, rest, {

package/es/table-component/style.js

@@ -48,4 +48,4 @@ const colorDark = '#e6e4f3e6 ';
 export const GridStyle = styled.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-hdqm5k-0"
-})(["--row-height:34px;--color:#333;--bgcolor:white;--body-hover-bgcolor:#f5f5f5;--body-hover-color:#333;--hover-bgcolor:var(--body-hover-bgcolor);--hover-color:var(--body-hover-color);--highlight-bgcolor:#eee;--header-row-height:34px;--header-color:#000000de;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--lock-shadow:rgba(152,152,152,0.5) 0 0 6px 2px;--border-color:#dfe3e8;--border-color-select:#eb4619;--cell-border:1px solid var(--border-color);--cell-border-select:1px solid var(--border-color-select);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgcolor:#fafafa;&.", "-grid{color:", ";font-size:", ";background-color:var(--bgcolor);font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-link{text-decoration:underline;color:#336cc9;&:has(textarea){text-decoration:none;}}&.editable{.ui-rc_cell-content{height:100%}}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;&.select-cell{padding-right:18px;position:relative;}.caret-down{float:right;position:absolute;right:0;&::before{content:'';display:inline-block;margin-left:4px;vertical-align:middle;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:var(--header-bgcolor);font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:var(--bgcolor);color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:var(--footer-bgcolor);font-weight:600;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : 'var(--bgcolor)'}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);
+})(["--row-height:34px;--color:#333;--bgcolor:white;--body-hover-bgcolor:#f5f5f5;--body-hover-color:#333;--hover-bgcolor:var(--body-hover-bgcolor);--hover-color:var(--body-hover-color);--highlight-bgcolor:#eee;--header-row-height:34px;--header-color:#000000de;--header-bgcolor:#ffffff;--header-hover-bgcolor:#ddd;--header-highlight-bgcolor:#e4e8ed;--cell-padding:7px 8px;--font-size:13px;--line-height:1.28571;--lock-shadow:rgba(152,152,152,0.5) 0 0 6px 2px;--border-color:#dfe3e8;--border-color-select:#eb4619;--cell-border:1px solid var(--border-color);--cell-border-select:1px solid var(--border-color-select);--cell-border-horizontal:var(--cell-border);--cell-border-vertical:var(--cell-border);--header-cell-border:1px solid var(--border-color);--header-cell-border-horizontal:var(--header-cell-border);--header-cell-border-vertical:var(--header-cell-border);--footer-bgcolor:#fafafa;&.", "-grid{color:", ";font-size:", ";background-color:var(--bgcolor);font-family:", ";&.", "-grid-editable{.", "-grid-container{.", "-grid-tbody{.", "-grid-row{background-color:", ";color:", ";&.", "-grid-row-parent{background-color:#ffffff;font-weight:500;}}}}}table{table-layout:fixed;border-collapse:separate;border-spacing:0;}.", "-grid-container{border:1px solid ", ";border-right:0;&::after{position:absolute;top:0px;right:0;z-index:1;height:100%;border-right:1px solid ", ";content:'';pointer-events:none;}.", "-grid-cell{padding:5px 8px;&.", "-grid-cell-text-center{text-align:center;justify-content:center;}&.", "-grid-cell-text-right{justify-content:flex-end;text-align:right;}&.", "-grid-cell-link{text-decoration:underline;color:#336cc9;&:has(textarea){text-decoration:none;}}&.editable{.ui-rc_cell-content{height:100%;}.ui-rc_cell-content.select-cell{--cell-dropdown-width:18px;box-sizing:border-box;width:100%;padding-inline-end:calc(var(--cell-dropdown-width) + 4px);position:relative;.caret-down{position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:var(--cell-dropdown-width);height:16px;cursor:pointer;&::before{content:'';width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #6f7777;}}}}&.", "-grid-cell-ellipsis{.ui-rc_cell-content{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.", "-grid-cell-wrap{white-space:normal;text-overflow:ellipsis;word-break:break-word;}.", "-grid-header-text-wrap{white-space:normal;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}}.", "-grid-thead{background-color:var(--header-bgcolor);font-weight:", ";.", "-grid-cell{font-weight:inherit;color:", ";background-color:inherit;border-inline-end:1px solid ", ";border-bottom:1px solid ", ";&.ui-rc-grid-cell-ellipsis{.ui-rc-table-column-title,.", "-grid-cell-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all;}}&.ui-rc-grid-cell-wrap{.ui-rc-table-column-title,.", "-grid-cell-text-wrap{white-space:normal;word-break:break-word;overflow:hidden;}}&:hover{.ui-rc-header-trigger{.ui-rc-table-column-sorter-cancel{opacity:1;}}}.", "-grid-filter-column{display:flex;justify-content:space-between;width:100%;align-items:center;position:relative;z-index:3;}.ui-rc-header-trigger{padding-left:6px;display:flex;align-items:center;.ui-rc-table-column-sorter-cancel{opacity:0;}}.resizer{cursor:col-resize;height:100%;position:absolute;right:0;top:0;z-index:3;touch-action:none;user-select:none;width:5px;}.resizer.isResizing{opacity:1;}}}.", "-grid-tbody{.", "-grid-row{font-weight:", ";background-color:var(--bgcolor);color:", ";&.", "-grid-row-odd{background-color:#f9f8fd;}&.", "-grid-row-even{}&.", "-grid-row-parent{background-color:#f5f5f5;font-weight:500;}}}.", "-grid-tfoot{.", "-grid-footer-row{border-bottom-width:1px;border-bottom-color:", ";border-bottom-style:solid;border-top-width:1px;border-top-color:", ";border-top-style:solid;background-color:var(--footer-bgcolor);font-weight:600;}.", "-grid-cell{background-color:inherit;border-inline-end:1px solid ", ";}}}&.", "-grid-dark{background-color:", ";color:", ";.", "-grid-container{border-color:", ";&::after{border-right-color:", ";}}}.ui-rc-toolbar-bottom{border-right:1px solid #e0e0e0;border-left:1px solid #e0e0e0;.be-toolbar-item{.ui-rc-btn{font-size:12px;line-height:1.5}.toolbar-dropdown-button{font-size:12px;.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-color:#28c76f;}.ui-rc-btn.ui-rc-btn-default.ui-rc-btn-variant-outlined.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-color:#28c76f;.ui-rc-btn-icon{color:#28c76f;}}}}}.ui-rc-toolbar-bottom_border-bottom{border-bottom:1px solid #e0e0e0;}.ui-rc-toolbar-bottom{position:relative;padding:.15rem 0.5rem;background-color:#ffffff;.toolbar-button{border-radius:3px;}.ui-rc-btn{border-radius:3px;height:28px;&.ui-rc-btn-compact-item.ui-rc-btn-compact-last-item{border-start-start-radius:0;border-end-start-radius:0;}&.ui-rc-btn-compact-item.ui-rc-btn-compact-first-item{border-start-end-radius:0;border-end-end-radius:0;}}}}"], props => props.$prefix, color, fontSize, fontFamily, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => `${props.$theme.backgroundColor ? props.$theme.backgroundColor : 'var(--bgcolor)'}`, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwHeader, props => props.$prefix, props => `${props.$theme.color ? props.$theme.color : color}`, tableBorderColor, tableBorderColor, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, fwBody, props => `${props.$theme.color ? props.$theme.color : color}`, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, props => props.$prefix, tableBorderColor, tableBorderColor, props => props.$prefix, tableBorderColor, props => props.$prefix, BgColorDark, colorDark, props => props.$prefix, tableBorderColorDark, tableBorderColorDark);

package/es/table-component/style.scss

@@ -422,8 +422,12 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
         }
 
         &.disable {
-          padding: 7px 8px !important;
+          padding: 5px 8px !important;
           background-color: #f0f0f0;
+
+          .ui-rc_cell-content {
+            height: auto;
+          }
         }
 
         &.#{$prefix}-grid-cell-command {
@@ -1196,4 +1200,4 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
   &:has(input:focus) span {
   border-color: red;
 }
-}
+}