es-grid-template 1.9.61 → 1.9.63

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,9 @@ export function columnCustom(opts) {
     onSubmit,
     handleCellChange,
     handleHeaderCellChange,
-    dataErrors
+    dataErrors,
+    headerData,
+    headerEditAble
     // originData
 
     // currentPage = 1,
@@ -87,8 +90,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 +294,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 +316,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];
@@ -438,7 +449,7 @@ export function columnCustom(opts) {
           pastedRows.push(newData[targetRow]);
         });
       }
-      const rsFilterData = updateOrInsert(flattenArray([...dataSource]), newData);
+      const rsFilterData = updateOrInsert(flattenArray(dataSource), newData);
       const rs = unFlattenData(rsFilterData);
       triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
       pipeline.setStateAtKey(stateKeyEndCell, endPasteCell);
@@ -497,7 +508,7 @@ export function columnCustom(opts) {
         // Lưu dòng được paste
         pastedRows.push(newData[targetRow]);
       });
-      const rsFilterData = updateOrInsert(flattenArray([...dataSource]), newData);
+      const rsFilterData = updateOrInsert(flattenArray(dataSource), newData);
       const rs = unFlattenData(rsFilterData);
       triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
     };
@@ -769,7 +780,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 +789,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 +971,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 +1235,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 {
@@ -1073,7 +1270,7 @@ export 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderEditCell, {
+        }, headerEditAble && col.headerEditEnable && cellHeaderEditing ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderEditCell, {
           column: col,
           editType: headerEditType ?? 'text',
           record: headerRecord,
@@ -1097,7 +1294,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", {
+        })) : headerEditAble && 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 +1345,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,19 +1371,97 @@ export 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(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 +1616,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/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 {};

package/es/ali-table/utils/utility.js

@@ -1,4 +1,4 @@
-import { compareDates, compareValues, convertFomatedDateToDate, getSortValue, isDate, isDateString, isDateValue, parseToDate, removeVietnameseTones } from "../../table-component/hook/utils";
+import { compareDates, compareValues, convertFomatedDateToDate, getSortValue, isDate, isDateString, isDateValue, newGuid, parseToDate, removeVietnameseTones } from "../../table-component/hook/utils";
 const prepareFilters = (queries, ignoreAccents = true) => {
   return queries.map(query => {
     const {
@@ -252,4 +252,46 @@ export const getMaxDepth = data => {
     }
   }
   return maxDepth;
+};
+export const addRowIdArray = inputArray => {
+  if (!inputArray || inputArray.length === 0) return [];
+  const result = new Array(inputArray.length);
+  const pending = [];
+  for (let index = inputArray.length - 1; index >= 0; index -= 1) {
+    pending.push({
+      source: inputArray[index],
+      target: result,
+      index
+    });
+  }
+  while (pending.length > 0) {
+    const {
+      source,
+      target,
+      index,
+      parentId
+    } = pending.pop();
+    const rowId = source.id ?? source.rowId ?? newGuid();
+    const node = {
+      ...source,
+      rowId,
+      ...(parentId !== undefined && source.parentId == null ? {
+        parentId
+      } : {})
+    };
+    target[index] = node;
+    if (Array.isArray(source.children) && source.children.length > 0) {
+      const children = new Array(source.children.length);
+      node.children = children;
+      for (let childIndex = source.children.length - 1; childIndex >= 0; childIndex -= 1) {
+        pending.push({
+          source: source.children[childIndex],
+          target: children,
+          index: childIndex,
+          parentId: rowId
+        });
+      }
+    }
+  }
+  return result;
 };

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, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
+    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
     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, "left" | "right" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "position" | "display" | "minWidth" | "width">);
     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/Grid.js

@@ -378,7 +378,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     theme: theme,
     dataRowIds: dataRowIds,
     footerDataSource: footerDataSource
-  })), (bottom || pagination && !infiniteScroll) && /*#__PURE__*/_react.default.createElement("div", {
+  })), (bottom || toolbarItemsBottom && toolbarItemsBottom.length > 0 || pagination && !infiniteScroll) && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(`${prefix}-grid-bottom`, {})
   }, bottom, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('ui-rc-toolbar-bottom', {

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;