es-grid-template 1.9.61 → 1.9.63

package/lib/ali-table/InternalTable.js

@@ -73,6 +73,7 @@ const InternalTable = props => {
     toolbarItems,
     defaultValue,
     commandSettings,
+    headerData,
     ...rest
   } = props;
   const tableRef = (0, _react.useRef)(null);
@@ -319,51 +320,29 @@ const InternalTable = props => {
       type: changeType,
       newState,
       prevState,
-      option,
-      field,
-      indexCol,
-      indexRow,
-      key
+      field
     } = args;
     if (changeType === 'blur') {
-      const handleChangeCallback = callbackData => {
-        const callbackRecord = callbackData;
-        Object.entries(callbackRecord).forEach(([name, value]) => {
-          setValue(name, value);
-        });
-        onSubmit(callbackRecord);
-      };
-      if (onHeaderCellChange) {
-        if (onHeaderCellChange.length > 1) {
-          onHeaderCellChange({
-            field,
-            indexCol,
-            type: 'onChange',
-            value: newState,
-            option,
-            indexRow,
-            rowData: record,
-            rowId: key,
-            // rowsData: [...dataSource],
-            rowsData: [...convertData],
-            sumValue: []
-          }, handleChangeCallback);
-        } else {
-          onHeaderCellChange({
-            field,
-            indexCol,
-            type: 'onChange',
-            option,
-            value: newState,
-            indexRow,
-            rowData: record,
-            rowId: key,
-            rowsData: [...convertData],
-            sumValue: []
-          }, handleChangeCallback);
+      // const handleChangeCallback = (callbackData: RecordType[]) => {
+      //   const callbackRecord = callbackData
 
-          // onSubmit(record)
-        }
+      //   Object.entries(callbackRecord).forEach(
+      //     ([name, value]: any) => {
+      //       setValue(name, value)
+
+      //     }
+      //   )
+
+      //   onSubmit(callbackRecord)
+
+      // }
+
+      if (onHeaderCellChange) {
+        const newObj = {
+          ...headerData,
+          [field]: newState
+        };
+        onHeaderCellChange(newObj);
       }
     }
     if (prevState && newState && prevState !== newState && changeType === 'enter') {
@@ -469,8 +448,10 @@ const InternalTable = props => {
     handleSubmit,
     onSubmit,
     triggerPaste,
+    headerEditAble,
     handleCellChange,
-    handleHeaderCellChange
+    handleHeaderCellChange,
+    headerData
   })).use(_pipeline.features.paginationFeature({
     pagination
   }));

package/lib/ali-table/base-table/styles.js

@@ -68,7 +68,7 @@ const outerBorderStyleMixin = (0, _styledComponents.css)(["border-top:var(--cell
 const StyleTableContainer = exports.StyleTableContainer = _styledComponents.default.div.withConfig({
   displayName: "StyleTableContainer",
   componentId: "es-grid-template__sc-ipj1ht-0"
-})(["--row-height:34px;--color:#333;--bgcolor:white;--body-hover-bgcolor:#f5f5f5;--body-hover-color:#333;--hover-bgcolor:var(--body-hover-bgcolor,#f5f5f5);--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;&.", "{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--hover-color:#dadde1;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#4f5266;background-color:var(--bgcolor);}&.use-outer-border{", ";}&.", "{.", "{border-left:0;border-right:0;td,th{border-right:0;}td.first,th.first{border-left:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),0px 0 0 0 var(--border-color);}}}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{&.use-outer-border{border-bottom:var(--header-cell-border);}.", "{border-top:0;td,th{border-bottom:0;border-top:0;}td.lock-left{box-shadow:none;}td.first,th.first{}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{.", "{border:0;td,th{border-right:0;border-bottom:0;}td.lock-left{box-shadow:none;}td,th{border:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{border-top:0;border:0;}}}.", "{padding:8px;}&.ui-rc-grid .ui-rc-pagination{background-color:var(--bgcolor);color:var(--color);padding:10px;background-color:var(--bgcolor);.ui-rc-pagination-prev{.anticon.anticon-left{color:var(--color);}}.ui-rc-pagination-disabled{.anticon.anticon-left{color:#7d7a7a;}}.ui-rc-pagination-next{.anticon.anticon-right{color:var(--color);}&.ui-rc-pagination-disabled{.anticon.anticon-right{color:#7d7a7a;}}}}&.auto-height{.ui-rc-grid-bottom{border-top:0;}}.ui-rc-grid-bottom{border-top:var(--cell-border-horizontal);}&.", "{&.ui-rc-grid{.ui-rc-toolbar-bottom{background-color:var(--footer-bgcolor);color:#ffffff;}}.ui-rc-grid-top-toolbar{border-color:var(--border-color);color:#ffffff;}.ui-rc-toolbar{.ui-rc-toolbar-selection-item{background-color:var(--footer-bgcolor);color:#ffffff;}}}"], Classes.tableThemeDark, outerBorderStyleMixin, Classes.gridHorizontal, Classes.tableWrapper, Classes.tableTop, Classes.gridVertical, Classes.tableWrapper, Classes.tableTop, Classes.gridNone, Classes.tableWrapper, Classes.tableTop, Classes.tableTop, Classes.tableThemeDark);
+})(["--row-height:34px;--color:#333;--bgcolor:white;--body-hover-bgcolor:#f5f5f5;--body-hover-color:#333;--hover-bgcolor:var(--body-hover-bgcolor,#f5f5f5);--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;&.", "{--bgcolor:#343e59;--footer-bgcolor:#2e3342;--header-bgcolor:#343e59;--hover-bgcolor:#232b43;--header-hover-bgcolor:#606164;--highlight-bgcolor:#eff2f5;--header-highlight-bgcolor:#191a1b;--hover-color:#dadde1;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#4f5266;background-color:var(--bgcolor);}&.use-outer-border{", ";}&.", "{.", "{border-left:0;border-right:0;td,th{border-right:0;}td.first,th.first{border-left:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}tr{td{&.lock-left,&.lock-right{border-bottom-width:0;box-shadow:0 -1px 0 0 var(--border-color),0 0px 0 0 var(--border-color),0px 0 0 0 var(--border-color);}}}&.has-footer tfoot tr.last td{}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{&.use-outer-border{border-bottom:var(--header-cell-border);}.", "{border-top:0;td,th{border-bottom:0;border-top:0;}td.lock-left{box-shadow:none;}td.first,th.first{}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{}}}&.", "{.", "{border:0;td,th{border-right:0;border-bottom:0;}td.lock-left{box-shadow:none;}td,th{border:0;}td.last,th.last{}thead tr.first th,tbody tr.first td{}&.has-footer tfoot tr td{border-bottom:0;border-top:0;}&.has-footer tbody tr.last td{}&.has-footer tfoot tr td{}&:not(.has-footer) tbody tr.last td{}&:has(.", ") thead tr.first th{border-top:0;border:0;}}}.", "{padding:8px;}&.ui-rc-grid .ui-rc-pagination{background-color:var(--bgcolor);color:var(--color);padding:10px;background-color:var(--bgcolor);.ui-rc-pagination-prev{.anticon.anticon-left{color:var(--color);}}.ui-rc-pagination-disabled{.anticon.anticon-left{color:#7d7a7a;}}.ui-rc-pagination-next{.anticon.anticon-right{color:var(--color);}&.ui-rc-pagination-disabled{.anticon.anticon-right{color:#7d7a7a;}}}}&.auto-height{.ui-rc-grid-bottom{border-top:0;}}.ui-rc-grid-bottom{border-top:var(--cell-border-horizontal);}.ui-rc-toolbar-bottom{.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{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;}}}&.", "{&.ui-rc-grid{.ui-rc-toolbar-bottom{background-color:var(--footer-bgcolor);color:#ffffff;}}.ui-rc-grid-top-toolbar{border-color:var(--border-color);color:#ffffff;}.ui-rc-toolbar{.ui-rc-toolbar-selection-item{background-color:var(--footer-bgcolor);color:#ffffff;}}}"], Classes.tableThemeDark, outerBorderStyleMixin, Classes.gridHorizontal, Classes.tableWrapper, Classes.tableTop, Classes.gridVertical, Classes.tableWrapper, Classes.tableTop, Classes.gridNone, Classes.tableWrapper, Classes.tableTop, Classes.tableTop, Classes.tableThemeDark);
 const StyledArtTableWrapper = exports.StyledArtTableWrapper = _styledComponents.default.div.withConfig({
   displayName: "StyledArtTableWrapper",
   componentId: "es-grid-template__sc-ipj1ht-1"

package/lib/ali-table/base-table/table.d.ts

@@ -6,8 +6,8 @@ import { TableDOMHelper } from './helpers/TableDOMUtils';
 import type { ResolvedUseVirtual, VerticalRenderRange, VirtualEnum } from './interfaces';
 import type { LoadingContentWrapperProps } from './loading';
 import type { BaseTableCSSVariables } from './styles';
-import type { CommandClick, ExpandedRowRender, IFormat, IFTheme, RenderExpandIcon, RowClassName } from '../../grid-component/type';
-export type PrimaryKey = string | ((row: any) => string);
+import type { AnyObject, CommandClick, ExpandedRowRender, IFormat, IFTheme, RenderExpandIcon, RowClassName } from '../../grid-component/type';
+export type PrimaryKey<RecordType = AnyObject> = keyof RecordType | ((row: RecordType) => keyof RecordType);
 export type ColumnResizeMode = 'onChange' | 'onEnd';
 export type ExpandableConfig<RecordType> = {
     expandedRowKeys?: readonly Key[];

package/lib/ali-table/base-table/utils.d.ts

@@ -1,4 +1,5 @@
 import { Subscription } from 'rxjs';
+import { ColumnTable } from '../../grid-component';
 /** styled-components 类库的版本，ali-react-table 同时支持 v3 和 v5 */
 export declare const STYLED_VERSION: string;
 export declare const STYLED_REF_PROP: string;
@@ -19,3 +20,4 @@ export declare function syncScrollLeft(elements: HTMLElement[], callback: (scrol
  */
 export declare function shallowEqual<T>(objA: T, objB: T): boolean;
 export declare function getParentElement(element: any, selector: any): any;
+export declare function getColumnsAtLevel(columns: ColumnTable[], level: number): ColumnTable[];

package/lib/ali-table/base-table/utils.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.STYLED_VERSION = exports.STYLED_REF_PROP = exports.OVERSCAN_SIZE = exports.AUTO_VIRTUAL_THRESHOLD = void 0;
+exports.getColumnsAtLevel = getColumnsAtLevel;
 exports.getParentElement = getParentElement;
 exports.getScrollbarSize = getScrollbarSize;
 exports.shallowEqual = shallowEqual;
@@ -164,4 +165,16 @@ function getParentElement(element, selector) {
     }
   }
   return getParent(element, selector);
+}
+function getColumnsAtLevel(columns, level) {
+  if (level === 0) {
+    return columns;
+  }
+  const result = [];
+  for (const column of columns) {
+    if (column.children?.length) {
+      result.push(...getColumnsAtLevel(column.children, level - 1));
+    }
+  }
+  return result;
 }

package/lib/ali-table/interfaces.d.ts

@@ -1,7 +1,11 @@
 import type { ReactElement, ReactNode } from 'react';
 import type React from 'react';
 import type { ColumnTemplate, CommandItem, EditType, FilterOperator, IColumnType, IFormat, ITextAlign, TypeFilter } from '../grid-component/type';
+import type { PrimaryKey } from './base-table/table';
 export type CellProps = React.TdHTMLAttributes<HTMLTableCellElement>;
+export type BaseRecord = {
+    rowId: PrimaryKey;
+};
 export type FilterState = {
     field: any;
     key: any;

package/lib/ali-table/internals.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
+import type { PrimaryKey } from './base-table/table';
 import type { ArtColumn } from './interfaces';
 declare function safeRenderHeader(column: ArtColumn): import("react").ReactNode;
 declare function safeRenderHeaderContent(column: ArtColumn, t?: any): any;
 declare function safeGetValue(column: ArtColumn, record: any, rowIndex: number): any;
-declare function safeGetRowKey(primaryKey: string | ((record: any) => string), record: any, rowIndex: number): string;
+declare function safeGetRowKey(primaryKey: PrimaryKey, record: any, rowIndex: number): string;
 declare function safeGetCellProps(column: ArtColumn, record: any, rowIndex: number): import("./interfaces").CellProps;
 declare function safeRender(column: ArtColumn, record: any, rowIndex: number): any;
 export declare const internals: {

package/lib/ali-table/pipeline/features/columnCustom.d.ts

@@ -71,6 +71,8 @@ export interface ColumnFeatureOptions {
     handleCellChange: any;
     handleHeaderCellChange?: any;
     dataErrors?: any[];
+    headerData?: any;
+    headerEditAble?: boolean;
 }
 export declare function columnCustom(opts: ColumnFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
 export {};

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

@@ -19,6 +19,7 @@ var _useColumns = require("../../../table-component/hook/useColumns");
 var _EditCell = _interopRequireDefault(require("../../base-table/cell/EditCell"));
 var _HeaderEditCell = _interopRequireDefault(require("../../base-table/cell/HeaderEditCell"));
 var _constants = require("../../utils/constants");
+var _utils3 = require("../../base-table/utils");
 // import { getMaxDepth } from '../../utils/utility';
 
 function clamp(min, x, max) {
@@ -62,7 +63,9 @@ function columnCustom(opts) {
     onSubmit,
     handleCellChange,
     handleHeaderCellChange,
-    dataErrors
+    dataErrors,
+    headerData,
+    headerEditAble
     // originData
 
     // currentPage = 1,
@@ -90,8 +93,7 @@ function columnCustom(opts) {
     const allRows = pipeline.getDataSource(); // flat data
 
     const leafColumns = (0, _utils.collectNodes)(pipeline.getColumns(), 'leaf-only');
-    // const originCols = pipeline.getColumns()
-
+    const originCols = pipeline.getColumns();
     const rowIds = (0, _utils2.getKeys)(allRows, 'rowId');
     const colIds = (0, _utils2.getKeys)(leafColumns, 'field');
     const rowIndexMap = (0, _utils2.getRowIndexMap)(allRows);
@@ -295,7 +297,7 @@ function columnCustom(opts) {
 
     //  Chức năng edit
 
-    const handleEdit = (e, record, col, editType, isKeyDown) => {
+    const handleEdit = (e, record, col, editType, isKeyDown, isHeader) => {
       pipeline.setStateAtKey(_constants.stateKeyIsEditing, true);
       reset?.();
       if (!(0, _hooks.isObjEmpty)(record)) {
@@ -317,6 +319,15 @@ function columnCustom(opts) {
           }
         }, 10);
       }
+      if (focusedCell?.rowId && isHeader) {
+        setTimeout(() => {
+          const textarea = document.querySelector(`.ui-rc-grid-table-header-row .header-cell-editable[data-col-key="${focusedCell.colId}"] textarea`);
+          if (textarea) {
+            textarea.focus();
+            textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+          }
+        }, 10);
+      }
     };
     const triggerDragPaste = (pasteState, ctrlKey) => {
       const tmpCols = [...leafColumns];
@@ -441,7 +452,7 @@ function columnCustom(opts) {
           pastedRows.push(newData[targetRow]);
         });
       }
-      const rsFilterData = (0, _utils2.updateOrInsert)((0, _utils2.flattenArray)([...dataSource]), newData);
+      const rsFilterData = (0, _utils2.updateOrInsert)((0, _utils2.flattenArray)(dataSource), newData);
       const rs = (0, _utils2.unFlattenData)(rsFilterData);
       triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
       pipeline.setStateAtKey(_constants.stateKeyEndCell, endPasteCell);
@@ -500,7 +511,7 @@ function columnCustom(opts) {
         // Lưu dòng được paste
         pastedRows.push(newData[targetRow]);
       });
-      const rsFilterData = (0, _utils2.updateOrInsert)((0, _utils2.flattenArray)([...dataSource]), newData);
+      const rsFilterData = (0, _utils2.updateOrInsert)((0, _utils2.flattenArray)(dataSource), newData);
       const rs = (0, _utils2.unFlattenData)(rsFilterData);
       triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
     };
@@ -772,7 +783,7 @@ function columnCustom(opts) {
       if (e.key === 'Enter') {
         e.preventDefault();
         e.stopPropagation();
-        handleEdit(e, record, column, editType);
+        handleEdit(e, record, column, editType, false);
         return;
       }
       if (e.key.length === 1 && !e.ctrlKey) {
@@ -781,6 +792,168 @@ function columnCustom(opts) {
         handleEdit(e, record, column, editType, true);
       }
     };
+    const handleHeaderKeyDown = (e, rowId, colId, rowIndex, column, record, editType) => {
+      if (e.key === 'Tab') {
+        const currentHeaderRowCols = (0, _utils3.getColumnsAtLevel)(originCols, rowIndex);
+        const currentHeaderRowColsEditAble = currentHeaderRowCols ? currentHeaderRowCols.filter(it => it.headerEditEnable) : undefined;
+        const nextCol = currentHeaderRowColsEditAble ? (0, _utils2.getNextColumn)(currentHeaderRowColsEditAble, focusedCell.colId) : undefined;
+        const nextHeaderRowCols = (0, _utils3.getColumnsAtLevel)(originCols, rowIndex + 1);
+        const nextHeaderRowColsEditAble = nextHeaderRowCols ? nextHeaderRowCols.filter(it => it.headerEditEnable) : undefined;
+        const nextRow = nextHeaderRowColsEditAble ? nextHeaderRowColsEditAble : undefined;
+        const checkEnd = nextCol && currentHeaderRowColsEditAble ? (0, _utils2.getNextColumn1)(currentHeaderRowColsEditAble, nextCol.column.field) : undefined;
+        if (!checkEnd) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        if (nextCol?.column && !nextCol.isWrapped) {
+          const nextCellPosition = {
+            rowId,
+            colId: nextCol.column.field
+          };
+          pipeline.setStateAtKey(_constants.stateKeyFocusedCell, nextCellPosition);
+          pipeline.setStateAtKey(_constants.stateKeyStartCell, nextCellPosition);
+          pipeline.setStateAtKey(_constants.stateKeyEndCell, nextCellPosition);
+        } else {
+          // Nếu là cột cuối cùng, có thể nhảy xuống dòng tiếp theo
+
+          // const currentRowIndex = allRows.findIndex(r => r.rowId === rowId);
+          // const nextRow = allRows[currentRowIndex + 1];
+
+          const firstCol = nextRow?.[0];
+          if (nextRow && firstCol) {
+            const nextRowId = `header-field-${rowIndex + 1}`;
+            const nextCellPosition = {
+              rowId: nextRowId,
+              colId: firstCol.field
+            };
+            pipeline.setStateAtKey(_constants.stateKeyFocusedCell, nextCellPosition);
+            pipeline.setStateAtKey(_constants.stateKeyStartCell, nextCellPosition);
+            pipeline.setStateAtKey(_constants.stateKeyEndCell, nextCellPosition);
+            if (tableRef) {
+              // tableRef?.current?.artTableWrapperRef?.current?.scrollLeft = 0
+
+              // const wrapper = tableRef.current?.artTableWrapperRef?.current;
+              const wrapper = tableRef.current?.domHelper?.stickyScroll;
+              if (!wrapper) return;
+              wrapper.scrollLeft = 0;
+            }
+          } else {
+            e.preventDefault();
+            e.stopPropagation();
+          }
+        }
+        return;
+      }
+
+      // if (e.key === 'ArrowRight') {
+
+      //   // e.preventDefault();
+      //   // e.stopPropagation()
+
+      //   const nextCol = getNextColumn(leafColumns, column.field)
+
+      //   if (nextCol.column && !nextCol.isWrapped) {
+
+      //     const nextCellPosition = { rowId, colId: nextCol.column.field }
+
+      //     pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
+      //     pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
+      //     pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
+
+      //   }
+
+      //   return
+      // }
+
+      // if (e.key === 'ArrowLeft') {
+
+      //   // e.preventDefault()
+      //   // e.stopPropagation()
+
+      //   const prevCol = getPrevColumn(leafColumns, column.field)
+
+      //   if (prevCol) {
+
+      //     const nextCellPosition = { rowId, colId: prevCol.field }
+      //     pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
+      //     pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
+      //     pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
+
+      //   }
+      //   return
+      // }
+
+      // if (e.key === 'ArrowDown') {
+
+      //   // e.preventDefault()
+      //   // e.stopPropagation()
+
+      //   const nextRow = allRows[rowIndex + 1]
+
+      //   if (nextRow) {
+      //     const nextRowId = nextRow.rowId
+
+      //     const nextCellPosition = { rowId: nextRowId, colId }
+      //     // setFocusedCell?.({ rowId: nextRowId, colId });
+      //     // 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' })
+
+      //     pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
+      //     pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
+      //     pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
+
+      //     // const rowElement: any = document.querySelector(`.ui-rc-grid-table-row[data-row-key="${nextRowId}"]`)
+
+      //     // const cellFocus = rowElement?.querySelector('.ui-rc-grid-cell')
+
+      //   }
+
+      //   return
+      // }
+
+      // if (e.key === 'ArrowUp') {
+
+      //   // e.preventDefault()
+      //   // e.stopPropagation()
+
+      //   const nextRow = allRows[rowIndex - 1]
+
+      //   if (nextRow) {
+      //     const nextRowId = nextRow.rowId
+
+      //     const nextCellPosition = { rowId: nextRowId, colId }
+
+      //     pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
+      //     pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
+      //     pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
+
+      //   }
+
+      //   return
+      // }
+
+      // if (e.key === 'Delete') {
+      //   handleDeleteContent?.()
+      //   return
+      // }
+
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        handleEdit(e, record, column, editType, false, true);
+        return;
+      }
+      if (e.key.length === 1 && !e.ctrlKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleEdit(e, record, column, editType, true, true);
+      }
+    };
     const handleChange = (record, column, indexCol) => {
       const currentRowIndex = allRows.findIndex(r => r.rowId === record.rowId);
       const formState = getValues();
@@ -801,6 +974,26 @@ function columnCustom(opts) {
         });
       } else {}
     };
+    const handleHeaderChange = (record, column, indexCol) => {
+      const currentRowIndex = allRows.findIndex(r => r.rowId === record.rowId);
+      const formState = getValues();
+      const itemState = getValues(column.field);
+      const prevState = record[column.field];
+      const newState = itemState;
+      if (newState !== prevState) {
+        handleHeaderCellChange?.({
+          key: record.rowId,
+          field: column.field,
+          record: formState,
+          prevState,
+          newState,
+          option: newState,
+          indexCol: indexCol,
+          indexRow: currentRowIndex,
+          type: 'blur'
+        });
+      } else {}
+    };
     const handlePointDoubleClick = (e, column, record) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1045,15 +1238,19 @@ function columnCustom(opts) {
       const htmlTooltip = headerCustomTooltip;
       const headerEditType = col.headerEditType;
       const headerRowIndex = params.path.findIndex(it => it.field === col.field);
-      const tmpValue = allRows.length > 0 ? allRows[0][col.field] : undefined;
+      const headerRowId = `header-field-${headerRowIndex}`;
+
+      // const headerRecord: any = { ...col, rowId: `field-${headerRowIndex}`, [col.field]: tmpValue, children: undefined }
+
       const headerRecord = {
-        ...col,
-        rowId: `field-${headerRowIndex}`,
-        [col.field]: tmpValue,
-        children: undefined
+        [col.field]: headerData?.[col.field] ?? ''
       };
-      const cellHeaderEditing = isEditing && headerRecord.rowId === focusedCell.rowId && col.field === focusedCell.colId;
-      const isCellSelect = startCell?.rowId === headerRecord.rowId && startCell?.colId === col.field;
+      const headerValue = headerData?.[col.field] ?? '';
+      const cellHeaderEditing = isEditing && headerRowId === focusedCell.rowId && col.field === focusedCell.colId;
+      const isCellSelect = headerRowId === focusedCell.rowId && startCell?.colId === col.field;
+      const aa = (0, _utils3.getColumnsAtLevel)(originCols, headerRowIndex);
+      const aaEditAble = aa ? aa.filter(it => it.headerEditEnable) : undefined;
+      const nextHeaderCol = aaEditAble ? (0, _utils2.getNextColumn)(aaEditAble, focusedCell.colId) : undefined;
 
       //  Cell thường có thể filter và sort được
       return {
@@ -1076,7 +1273,7 @@ function columnCustom(opts) {
             [`${prefix}-grid-cell-text-center`]: (col?.headerTextAlign ?? col?.textAlign) === 'center',
             [`${prefix}-grid-cell-text-right`]: (col?.headerTextAlign ?? col.textAlign) === 'right'
           })
-        }, col.headerEditEnable && cellHeaderEditing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HeaderEditCell.default, {
+        }, headerEditAble && col.headerEditEnable && cellHeaderEditing ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_HeaderEditCell.default, {
           column: col,
           editType: headerEditType ?? 'text',
           record: headerRecord,
@@ -1100,7 +1297,7 @@ function columnCustom(opts) {
           startCell: startCell,
           handleSubmit: handleSubmit,
           onSubmit: onSubmit
-        })) : col.headerEditEnable ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tmpValue) : col.headerTemplate ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, prevTitle))), !col.headerEditEnable && (!_hooks.nonActionColumn.includes(col.field) && !col?.children || col?.children && col?.children.length < 1) && /*#__PURE__*/_react.default.createElement("span", {
+        })) : headerEditAble && col.headerEditEnable ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headerValue) : col.headerTemplate ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, prevTitle))), !col.headerEditEnable && (!_hooks.nonActionColumn.includes(col.field) && !col?.children || col?.children && col?.children.length < 1) && /*#__PURE__*/_react.default.createElement("span", {
           className: "ui-rc-header-trigger d-flex gap-50"
         }, canSort && /*#__PURE__*/_react.default.createElement("div", {
           style: {
@@ -1151,9 +1348,20 @@ function columnCustom(opts) {
         headerCellProps: (0, _utils.mergeCellProps)(col.headerCellProps ?? {}, {
           'data-tooltip-id': `${id}-tooltip-content`,
           'data-tooltip-content': htmlTooltip,
+          // @ts-ignore
+          'data-col-key': col.field,
+          ref: el => {
+            if (focusedCell?.rowId === headerRowId && focusedCell?.colId === col.field && !isEditing) {
+              el?.focus({
+                preventScroll: true
+              });
+            }
+          },
+          tabIndex: focusedCell?.rowId === headerRowId && focusedCell?.colId === col.field ? 1 : col.field === nextHeaderCol?.column?.field ? 1 : -1,
           style: {
             overflow: 'visible',
             position: 'relative',
+            outline: 'none',
             padding: cellHeaderEditing ? 0 : undefined
           },
           className: (0, _classnames.default)('', {
@@ -1166,19 +1374,97 @@ function columnCustom(opts) {
           }),
           onMouseDown: () => {
             if (col.headerEditEnable) {
-              handleMouseDown(headerRecord.rowId, col.field);
+              handleMouseDown(headerRowId, col.field);
             }
           },
           onDoubleClick: e => {
             // prevCellProps?.onDoubleClick?.(e)
 
-            if (!col.headerEditEnable) {
-              e.stopPropagation();
-              e.preventDefault();
-              return;
+            if (headerEditAble) {
+              if (!col.headerEditEnable) {
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+              }
+              if (headerRowId === focusedCell.rowId && col.field === focusedCell.colId && col.headerEditEnable) {
+                handleEdit(e, headerRecord, col, headerEditType ?? 'text', false, true);
+              }
             }
-            if (headerRecord.rowId === focusedCell.rowId && col.field === focusedCell.colId && col.headerEditEnable) {
-              handleEdit(e, headerRecord, col, headerEditType ?? 'text');
+          },
+          onKeyDown: e => {
+            // prevCellProps?.onKeyDown?.(e)
+            // chưa editing
+
+            if (headerEditAble) {
+              if (!isEditing) {
+                handleHeaderKeyDown(e, headerRowId, col.field, headerRowIndex, col, headerRecord, headerEditType ?? 'text');
+              } else {
+                if (e.shiftKey && e.key === 'Enter') {
+                  e.preventDefault();
+                  e.stopPropagation();
+                } else {
+                  if (e.key === 'Enter') {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    // const currentRowIndex = allRows.findIndex(r => r.rowId === headerRowId);
+                    // const nextRow = allRows[currentRowIndex + 1];
+
+                    // if (nextRow) {
+                    // const nextCellPosition = { rowId: nextRow.rowId, colId: col.field }
+
+                    // pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
+                    // pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
+                    // pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
+
+                    handleHeaderChange(headerRecord, col, startIndex);
+                    pipeline.setStateAtKey(_constants.stateKeyIsEditing, false);
+
+                    // } 
+                  }
+                  if (e.key === 'Tab') {
+                    e.preventDefault();
+
+                    // const nextCol = getNextColumn(allCols, col.field)
+
+                    if (nextHeaderCol?.column?.field && !nextHeaderCol?.isWrapped) {
+                      const nextCellPosition = {
+                        rowId: headerRowId,
+                        colId: nextHeaderCol.column.field
+                      };
+                      pipeline.setStateAtKey(_constants.stateKeyFocusedCell, nextCellPosition);
+                      pipeline.setStateAtKey(_constants.stateKeyStartCell, nextCellPosition);
+                      pipeline.setStateAtKey(_constants.stateKeyEndCell, nextCellPosition);
+
+                      // columnVirtualizer.scrollToIndex(nextCol.getIndex(), { align: 'center' })
+                    } else {
+                      // Nếu là cột cuối cùng, có thể nhảy xuống dòng tiếp theo
+
+                      // const currentRowIndex = allRows.findIndex(r => r.rowId === headerRowId);
+                      // const nextRow = allRows[currentRowIndex + 1];
+
+                      // const firstCol = nextCol.column
+
+                      // if (nextRow) {
+
+                      //   const nextCellPosition = { rowId: nextRow.rowId, colId: firstCol.field }
+
+                      //   pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
+
+                      //   pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
+                      //   pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
+
+                      //   // columnVirtualizer.scrollToIndex(nextRowCol.getIndex())
+
+                      //   // rowVirtualizer.scrollToIndex(nextRow.index, { align: 'auto' })
+
+                      // }
+                    }
+                    handleHeaderChange(headerRecord, col, startIndex);
+                    pipeline.setStateAtKey(_constants.stateKeyIsEditing, false);
+                  }
+                }
+              }
             }
           }
         }),
@@ -1333,7 +1619,7 @@ function columnCustom(opts) {
                 return;
               }
               if (record.rowId === focusedCell.rowId && col.field === focusedCell.colId && canEdit) {
-                handleEdit(e, record, col, editType ?? 'text');
+                handleEdit(e, record, col, editType ?? 'text', false);
               }
             },
             onKeyDown: e => {

package/lib/ali-table/utils/utility.d.ts

@@ -9,4 +9,5 @@ export declare function sortData1(data: any[], sorter: Sorter[]): any[];
 export declare function sortData(data: any[], sorter: Sorter[]): any[];
 export declare function filterDataByColumns1(data: any[], queries: FilterItem[] | undefined, sorter: Sorter[] | undefined, keysFilter: string[] | undefined, ignoreAccents?: boolean): any[];
 export declare const getMaxDepth: (data: any[]) => number;
+export declare const addRowIdArray: (inputArray: any[]) => any[];
 export {};