es-grid-template 1.9.61 → 1.9.62

package/es/ali-table/InternalTable.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import './base-table/styles.scss';
 import type { TableProps } from "../grid-component/type";
-declare const InternalTable: <RecordType extends object>(props: TableProps<RecordType>) => JSX.Element;
+import type { BaseRecord } from "./interfaces";
+declare const InternalTable: <RecordType extends BaseRecord>(props: TableProps<RecordType>) => JSX.Element;
 export default InternalTable;

package/es/ali-table/InternalTable.js

@@ -68,6 +68,7 @@ const InternalTable = props => {
     toolbarItems,
     defaultValue,
     commandSettings,
+    headerData,
     ...rest
   } = props;
   const tableRef = useRef(null);
@@ -314,51 +315,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') {
@@ -465,7 +444,8 @@ const InternalTable = props => {
     onSubmit,
     triggerPaste,
     handleCellChange,
-    handleHeaderCellChange
+    handleHeaderCellChange,
+    headerData
   })).use(features.paginationFeature({
     pagination
   }));

package/es/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/es/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/es/ali-table/base-table/utils.js

@@ -1,7 +1,6 @@
 import { asyncScheduler, BehaviorSubject, defer, fromEvent, Subscription } from 'rxjs';
 import { map, throttleTime } from 'rxjs/operators';
 import * as styledComponents from 'styled-components';
-
 /** styled-components 类库的版本，ali-react-table 同时支持 v3 和 v5 */
 export const STYLED_VERSION = styledComponents.createGlobalStyle != null ? 'v5' : 'v3';
 export const STYLED_REF_PROP = STYLED_VERSION === 'v3' ? 'innerRef' : 'ref';
@@ -151,4 +150,16 @@ export function getParentElement(element, selector) {
     }
   }
   return getParent(element, selector);
+}
+export 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/es/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/es/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/es/ali-table/pipeline/features/columnCustom.d.ts

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

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

@@ -16,6 +16,7 @@ import HeaderEditCell from "../../base-table/cell/HeaderEditCell";
 import { stateKeyResize, stateKeyColumnFilter, stateKeyFilter, stateKeyPagination, stateKeySorter, stateKeyTooltip, stateKeyTypePaste, stateKeyVisible,
 //  state For edit
 stateKeyEndCell, stateKeyEndPasteCell, stateKeyStartCell, stateKeyStartPasteCell, stateKeyFocusedCell, stateKeyIsEditing, stateKeyIsPasting, stateKeyIsSelecting } from "../../utils/constants";
+import { getColumnsAtLevel } from "../../base-table/utils";
 // import { getMaxDepth } from '../../utils/utility';
 
 function clamp(min, x, max) {
@@ -59,7 +60,8 @@ export function columnCustom(opts) {
     onSubmit,
     handleCellChange,
     handleHeaderCellChange,
-    dataErrors
+    dataErrors,
+    headerData
     // originData
 
     // currentPage = 1,
@@ -87,8 +89,7 @@ export function columnCustom(opts) {
     const allRows = pipeline.getDataSource(); // flat data
 
     const leafColumns = collectNodes(pipeline.getColumns(), 'leaf-only');
-    // const originCols = pipeline.getColumns()
-
+    const originCols = pipeline.getColumns();
     const rowIds = getKeys(allRows, 'rowId');
     const colIds = getKeys(leafColumns, 'field');
     const rowIndexMap = getRowIndexMap(allRows);
@@ -292,7 +293,7 @@ export 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(stateKeyIsEditing, true);
       reset?.();
       if (!isObjEmpty(record)) {
@@ -314,6 +315,15 @@ export 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];
@@ -769,7 +779,7 @@ export 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) {
@@ -778,6 +788,168 @@ export function columnCustom(opts) {
         handleEdit(e, record, column, editType, true);
       }
     };
+    const handleHeaderKeyDown = (e, rowId, colId, rowIndex, column, record, editType) => {
+      if (e.key === 'Tab') {
+        const currentHeaderRowCols = getColumnsAtLevel(originCols, rowIndex);
+        const currentHeaderRowColsEditAble = currentHeaderRowCols ? currentHeaderRowCols.filter(it => it.headerEditEnable) : undefined;
+        const nextCol = currentHeaderRowColsEditAble ? getNextColumn(currentHeaderRowColsEditAble, focusedCell.colId) : undefined;
+        const nextHeaderRowCols = getColumnsAtLevel(originCols, rowIndex + 1);
+        const nextHeaderRowColsEditAble = nextHeaderRowCols ? nextHeaderRowCols.filter(it => it.headerEditEnable) : undefined;
+        const nextRow = nextHeaderRowColsEditAble ? nextHeaderRowColsEditAble : undefined;
+        const checkEnd = nextCol && currentHeaderRowColsEditAble ? 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(stateKeyFocusedCell, nextCellPosition);
+          pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition);
+          pipeline.setStateAtKey(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(stateKeyFocusedCell, nextCellPosition);
+            pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition);
+            pipeline.setStateAtKey(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();
@@ -798,6 +970,26 @@ export 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();
@@ -1042,15 +1234,19 @@ export 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 = getColumnsAtLevel(originCols, headerRowIndex);
+      const aaEditAble = aa ? aa.filter(it => it.headerEditEnable) : undefined;
+      const nextHeaderCol = aaEditAble ? getNextColumn(aaEditAble, focusedCell.colId) : undefined;
 
       //  Cell thường có thể filter và sort được
       return {
@@ -1097,7 +1293,7 @@ export function columnCustom(opts) {
           startCell: startCell,
           handleSubmit: handleSubmit,
           onSubmit: onSubmit
-        })) : col.headerEditEnable ? /*#__PURE__*/React.createElement(React.Fragment, null, tmpValue) : col.headerTemplate ? /*#__PURE__*/React.createElement(React.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/React.createElement(React.Fragment, null, prevTitle))), !col.headerEditEnable && (!nonActionColumn.includes(col.field) && !col?.children || col?.children && col?.children.length < 1) && /*#__PURE__*/React.createElement("span", {
+        })) : col.headerEditEnable ? /*#__PURE__*/React.createElement(React.Fragment, null, headerValue) : col.headerTemplate ? /*#__PURE__*/React.createElement(React.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/React.createElement(React.Fragment, null, prevTitle))), !col.headerEditEnable && (!nonActionColumn.includes(col.field) && !col?.children || col?.children && col?.children.length < 1) && /*#__PURE__*/React.createElement("span", {
           className: "ui-rc-header-trigger d-flex gap-50"
         }, canSort && /*#__PURE__*/React.createElement("div", {
           style: {
@@ -1148,9 +1344,20 @@ export function columnCustom(opts) {
         headerCellProps: 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: classNames('', {
@@ -1163,7 +1370,7 @@ export function columnCustom(opts) {
           }),
           onMouseDown: () => {
             if (col.headerEditEnable) {
-              handleMouseDown(headerRecord.rowId, col.field);
+              handleMouseDown(headerRowId, col.field);
             }
           },
           onDoubleClick: e => {
@@ -1174,8 +1381,81 @@ export function columnCustom(opts) {
               e.preventDefault();
               return;
             }
-            if (headerRecord.rowId === focusedCell.rowId && col.field === focusedCell.colId && col.headerEditEnable) {
-              handleEdit(e, headerRecord, col, headerEditType ?? 'text');
+            if (headerRowId === focusedCell.rowId && col.field === focusedCell.colId && col.headerEditEnable) {
+              handleEdit(e, headerRecord, col, headerEditType ?? 'text', false, true);
+            }
+          },
+          onKeyDown: e => {
+            // prevCellProps?.onKeyDown?.(e)
+            // chưa editing
+            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(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(stateKeyFocusedCell, nextCellPosition);
+                    pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition);
+                    pipeline.setStateAtKey(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(stateKeyIsEditing, false);
+                }
+              }
             }
           }
         }),
@@ -1330,7 +1610,7 @@ export 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/es/grid-component/type.d.ts

@@ -478,6 +478,7 @@ export type TableProps<RecordType = AnyObject> = {
     showEmptyText?: boolean;
     /** Cấu hình command column */
     commandSettings?: CommandSettings;
+    headerData?: object;
     /**
      * Func khi click command
      * Ví dụ: Edit, Delete, Copy...
@@ -525,7 +526,7 @@ export type TableProps<RecordType = AnyObject> = {
     * handleCallback dùng để cập nhật giá trị sau khi xử lý custom
     */
     onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
-    onHeaderCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
+    onHeaderCellChange?: (data: object) => void;
     /** Callback click cell */
     onCellClick?: (args: ICellClick, callback?: any) => void;
     /** Xác định row có được edit hay không */

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

@@ -196,10 +196,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position">);
-    onCellHeaderStyles?: Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position">);
+    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, "width" | "left" | "right" | "display" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "left" | "right" | "display" | "minWidth" | "position">);
+    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/es/table-component/components/async-select/index.js

@@ -25,7 +25,7 @@ export function AsyncSelect({
       }
     };
     return debounce(fetchOptions, debounceTimeout);
-  }, [loadOptions, debounceTimeout]);
+  }, [debounceTimeout, loadOptions, defaultOptions, rowData]);
   useEffect(() => {
     setOptions(defaultOptions ?? []);
   }, [defaultOptions]);

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

@@ -199,7 +199,5 @@ export declare const getIds: <T extends {
 }>(data: T[]) => string[];
 export declare const getKeys: <T extends Record<string, any>, K extends keyof T>(data: T[], key: K) => T[K][];
 export declare const getRowIndexMap: (flatRows: any[]) => Map<string, number>;
-export declare function getRowIdsBetween3(flatRows: {
-    rowId: string;
-}[], rowIndexMap: Map<string, number>, a: string, b: string): string[];
+export declare function getRowIdsBetween3(flatRows: any[], rowIndexMap: Map<string, number>, a: string, b: string): string[];
 export {};

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import './base-table/styles.scss';
 import type { TableProps } from "../grid-component/type";
-declare const InternalTable: <RecordType extends object>(props: TableProps<RecordType>) => JSX.Element;
+import type { BaseRecord } from "./interfaces";
+declare const InternalTable: <RecordType extends BaseRecord>(props: TableProps<RecordType>) => JSX.Element;
 export default InternalTable;

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') {
@@ -470,7 +449,8 @@ const InternalTable = props => {
     onSubmit,
     triggerPaste,
     handleCellChange,
-    handleHeaderCellChange
+    handleHeaderCellChange,
+    headerData
   })).use(_pipeline.features.paginationFeature({
     pagination
   }));

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,7 @@ export interface ColumnFeatureOptions {
     handleCellChange: any;
     handleHeaderCellChange?: any;
     dataErrors?: any[];
+    headerData?: any;
 }
 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,8 @@ function columnCustom(opts) {
     onSubmit,
     handleCellChange,
     handleHeaderCellChange,
-    dataErrors
+    dataErrors,
+    headerData
     // originData
 
     // currentPage = 1,
@@ -90,8 +92,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 +296,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 +318,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];
@@ -772,7 +782,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 +791,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 +973,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 +1237,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 {
@@ -1100,7 +1296,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", {
+        })) : 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 +1347,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,7 +1373,7 @@ function columnCustom(opts) {
           }),
           onMouseDown: () => {
             if (col.headerEditEnable) {
-              handleMouseDown(headerRecord.rowId, col.field);
+              handleMouseDown(headerRowId, col.field);
             }
           },
           onDoubleClick: e => {
@@ -1177,8 +1384,81 @@ function columnCustom(opts) {
               e.preventDefault();
               return;
             }
-            if (headerRecord.rowId === focusedCell.rowId && col.field === focusedCell.colId && col.headerEditEnable) {
-              handleEdit(e, headerRecord, col, headerEditType ?? 'text');
+            if (headerRowId === focusedCell.rowId && col.field === focusedCell.colId && col.headerEditEnable) {
+              handleEdit(e, headerRecord, col, headerEditType ?? 'text', false, true);
+            }
+          },
+          onKeyDown: e => {
+            // prevCellProps?.onKeyDown?.(e)
+            // chưa editing
+            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 +1613,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/grid-component/type.d.ts

@@ -478,6 +478,7 @@ export type TableProps<RecordType = AnyObject> = {
     showEmptyText?: boolean;
     /** Cấu hình command column */
     commandSettings?: CommandSettings;
+    headerData?: object;
     /**
      * Func khi click command
      * Ví dụ: Edit, Delete, Copy...
@@ -525,7 +526,7 @@ export type TableProps<RecordType = AnyObject> = {
     * handleCallback dùng để cập nhật giá trị sau khi xử lý custom
     */
     onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
-    onHeaderCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
+    onHeaderCellChange?: (data: object) => void;
     /** Callback click cell */
     onCellClick?: (args: ICellClick, callback?: any) => void;
     /** Xác định row có được edit hay không */

package/lib/table-component/components/async-select/index.js

@@ -34,7 +34,7 @@ function AsyncSelect({
       }
     };
     return (0, _debounce.default)(fetchOptions, debounceTimeout);
-  }, [loadOptions, debounceTimeout]);
+  }, [debounceTimeout, loadOptions, defaultOptions, rowData]);
   (0, _react.useEffect)(() => {
     setOptions(defaultOptions ?? []);
   }, [defaultOptions]);

package/lib/table-component/hook/utils.d.ts

@@ -199,7 +199,5 @@ export declare const getIds: <T extends {
 }>(data: T[]) => string[];
 export declare const getKeys: <T extends Record<string, any>, K extends keyof T>(data: T[], key: K) => T[K][];
 export declare const getRowIndexMap: (flatRows: any[]) => Map<string, number>;
-export declare function getRowIdsBetween3(flatRows: {
-    rowId: string;
-}[], rowIndexMap: Map<string, number>, a: string, b: string): string[];
+export declare function getRowIdsBetween3(flatRows: any[], rowIndexMap: Map<string, number>, a: string, b: string): string[];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.61",
+  "version": "1.9.62",
   "description": "es-grid-template",
   "keywords": [
     "react",