es-grid-template 1.9.62 → 1.9.64

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

@@ -50,7 +50,7 @@ function processColumns(columns, defaultColumnWidth) {
         }
       }
       if ((0, _utils.isLeafNode)(column)) {
-        if (column.hidden) {
+        if (column.visible === false) {
           // 被隐藏的列 会在这里被剔除
           warnColumnHiddenDeprecated(column);
         } else {

package/lib/ali-table/base-table/cell/EditCell.js

@@ -476,7 +476,9 @@ const EditCell = props => {
             align: colSelect.textAlign
           };
         });
-        let valueSelectTable = formValues[dataIndex];
+
+        // let valueSelectTable = formValues[dataIndex]
+        let valueSelectTable = formValues[dataIndex] !== null ? formValues[dataIndex] : undefined;
         if (fieldValue) {
           // @ts-ignore
           valueSelectTable = record[fieldValue] ?? formValues[dataIndex];
@@ -625,14 +627,16 @@ const EditCell = props => {
           "data-tooltip-id": `${tableId}-tooltip-error`
         });
       case 'select':
-        let valueSelect = formValues[dataIndex];
+        let valueSelect = formValues[dataIndex] !== null ? formValues[dataIndex] : undefined;
+        // let valueSelect = !isNullOrUndefined(formValues[dataIndex]) ? formValues[dataIndex] : undefined
+
         if (fieldValue) {
           // @ts-ignore
           valueSelect = record[fieldValue] ?? formValues[dataIndex];
         }
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
           options: options,
-          value: valueSelect ?? '',
+          value: valueSelect ?? undefined,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -768,7 +772,8 @@ const EditCell = props => {
           "data-tooltip-id": `${tableId}-tooltip-error`
         });
       case 'asyncSelect':
-        let valueAsyncSelect = formValues[dataIndex];
+        // let valueAsyncSelect = formValues[dataIndex]
+        let valueAsyncSelect = formValues[dataIndex] !== null ? formValues[dataIndex] : undefined;
         if (fieldValue) {
           // @ts-ignore
           valueAsyncSelect = record[fieldValue] ?? formValues[dataIndex];
@@ -776,7 +781,7 @@ const EditCell = props => {
         return /*#__PURE__*/_react.default.createElement(_asyncSelect.AsyncSelect, {
           options: options,
           defaultOptions: options,
-          value: valueAsyncSelect ?? undefined,
+          value: valueAsyncSelect,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -1244,7 +1249,10 @@ const EditCell = props => {
     }
   };
   return /*#__PURE__*/_react.default.createElement("form", {
-    onSubmit: handleSubmit(onSubmit)
+    onSubmit: handleSubmit(onSubmit),
+    style: {
+      height: '100%'
+    }
   }, /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
     name: dataIndex,
     control: control,

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

@@ -301,7 +301,7 @@ const renderFilter = args => {
         ,
         onBlur: e => {
           if (selectedKeys[0] === e.target.value) {} else {
-            setSelectedKeys(e.target.value ? [e.target.value] : []);
+            setSelectedKeys(e.target.value ? [e.target.value.trim()] : []);
           }
         }
 

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/interfaces.d.ts

@@ -25,8 +25,7 @@ export interface ArtColumnStaticPart<RecordType = any> {
     /** Column width; required if the column is locked */
     width?: number;
     fixed?: 'left' | 'right';
-    /** @deprecated Whether the column is hidden */
-    hidden?: boolean;
+    visible?: boolean;
     /** Whether the column is locked (fixed) */
     lock?: boolean;
     /** Props for the header cell */
@@ -68,6 +67,7 @@ export interface ArtColumnStaticPart<RecordType = any> {
     headerEditEnable?: boolean;
     /** Kiểu editor khi edit cell */
     headerEditType?: EditType;
+    editSelectSettings?: any;
 }
 export interface ArtColumnDynamicPart<RecordType = any> {
     /** Custom data retrieval method */

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

@@ -1,7 +1,7 @@
 import type { TablePipeline } from '../pipeline';
 import type { ColumnResizeMode } from '../../base-table/table';
 import type { ArtColumn, SortOrder } from '../../interfaces';
-import type { FilterItem, IFormat, IWrapSettings, Sorter, SourceFilter } from '../../../grid-component/type';
+import type { FilterItem, ICellClick, IFormat, IWrapSettings, Sorter, SourceFilter } from '../../../grid-component/type';
 type FilterState = {
     field: any;
     key: any;
@@ -14,6 +14,7 @@ export interface ColumnFeatureOptions {
     columns: any[];
     isDataTree?: boolean;
     dataSource: any[];
+    rowIndexMap: any;
     /** Uncontrolled usage: default column widths array */
     defaultSizes?: number[];
     columnResizeMode?: ColumnResizeMode;
@@ -63,7 +64,7 @@ export interface ColumnFeatureOptions {
     getValues?: any;
     control?: any;
     errors?: any;
-    handleDeleteContent?: () => void;
+    triggerChangeData?: any;
     tableRef: any;
     triggerPaste?: (pastedRows: any[], pastedColumnsArray: string[], newData: any[], copyRows: any[]) => void;
     handleSubmit: any;
@@ -72,6 +73,8 @@ export interface ColumnFeatureOptions {
     handleHeaderCellChange?: any;
     dataErrors?: any[];
     headerData?: any;
+    headerEditAble?: boolean;
+    onCellClick?: (args: ICellClick, callback?: any) => void;
 }
 export declare function columnCustom(opts: ColumnFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
 export {};

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

@@ -20,6 +20,7 @@ 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");
+var _utility = require("../../utils/utility");
 // import { getMaxDepth } from '../../utils/utility';
 
 function clamp(min, x, max) {
@@ -56,7 +57,7 @@ function columnCustom(opts) {
     control,
     getValues,
     errors,
-    handleDeleteContent,
+    triggerChangeData,
     tableRef,
     triggerPaste,
     handleSubmit,
@@ -64,7 +65,10 @@ function columnCustom(opts) {
     handleCellChange,
     handleHeaderCellChange,
     dataErrors,
-    headerData
+    headerData,
+    headerEditAble,
+    rowIndexMap,
+    onCellClick
     // originData
 
     // currentPage = 1,
@@ -75,6 +79,7 @@ function columnCustom(opts) {
     mode = 'multiple',
     onSorter
   } = opts;
+  const rowKey = 'rowId';
   return function columnResizeFeature(pipeline) {
     // State table
 
@@ -95,7 +100,6 @@ function columnCustom(opts) {
     const originCols = pipeline.getColumns();
     const rowIds = (0, _utils2.getKeys)(allRows, 'rowId');
     const colIds = (0, _utils2.getKeys)(leafColumns, 'field');
-    const rowIndexMap = (0, _utils2.getRowIndexMap)(allRows);
 
     // const deppthCols  = getMaxDepth(originCols)
 
@@ -107,6 +111,7 @@ function columnCustom(opts) {
 
     const focusedCell = pipeline.getStateAtKey(_constants.stateKeyFocusedCell) ?? {};
     const isEditing = pipeline.getStateAtKey(_constants.stateKeyIsEditing) ?? false;
+    const editCellSettings = pipeline.getStateAtKey(_constants.stateKeyEditCellSettings);
     const isSelecting = pipeline.getStateAtKey(_constants.stateKeyIsSelecting) ?? false;
     const isPasting = pipeline.getStateAtKey(_constants.stateKeyIsPasting) ?? false;
     const startCell = pipeline.getStateAtKey(_constants.stateKeyStartCell) ?? undefined;
@@ -125,7 +130,10 @@ function columnCustom(opts) {
       endColIndex,
       endRowIndex
     } = rangeState ?? {};
-    const rowKey = 'rowId';
+    const rowPasteIds = (0, _utils2.getRowIdsBetween3)(allRows, rowIndexMap, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
+    const colPasteds = (0, _utils2.getColIdsBetween1)(leafColumns, startPasteCell?.colId ?? '', endPasteCell?.colId ?? '');
+    const rowSelectIds = (0, _utils2.getRowIdsBetween3)(allRows, rowIndexMap, startCell?.rowId ?? '', endCell?.rowId ?? '');
+    const colSelectIds = (0, _utils2.getColIdsBetween1)(leafColumns, startCell?.colId ?? '', endCell?.colId ?? '');
     leafColumns.forEach((col, colIndex) => {
       if (sizes[colIndex] == null) {
         if (typeof col.width === 'number') {
@@ -329,11 +337,7 @@ function columnCustom(opts) {
       }
     };
     const triggerDragPaste = (pasteState, ctrlKey) => {
-      const tmpCols = [...leafColumns];
-      const rowPasteIds = (0, _utils2.getRowIdsBetween3)(allRows, rowIndexMap, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
-      const colPasteds = (0, _utils2.getColIdsBetween1)(leafColumns, startPasteCell?.colId ?? '', endPasteCell?.colId ?? '');
-      const rowSelectIds = (0, _utils2.getRowIdsBetween3)(allRows, rowIndexMap, startCell?.rowId ?? '', endCell?.rowId ?? '');
-      const colSelectIds = (0, _utils2.getColIdsBetween1)(leafColumns, startCell?.colId ?? '', endCell?.colId ?? '');
+      const tmpCols = leafColumns;
       const dataSelected = []; // data được copy
 
       rowSelectIds.forEach(rowId => {
@@ -341,8 +345,6 @@ function columnCustom(opts) {
         if (!row) return;
         const rowData = [];
         colSelectIds.forEach(colId => {
-          // const cellll = row.getVisibleCells().find(c => c.column.id === colId);
-
           const value = row[colId];
           rowData.push(value !== undefined ? value : '');
         });
@@ -385,7 +387,7 @@ function columnCustom(opts) {
       }
 
       // Cập nhật data mới
-      const newData = (0, _utils2.flattenArray)([...allRows]);
+      const newData = (0, _utils2.flattenArray)(allRows);
       const pastedRows = [];
       if (pasteState.type === 'down' || pasteState.type === 'up') {
         newRange.addedRows.forEach((rowValues, rowIndex1) => {
@@ -451,20 +453,18 @@ function columnCustom(opts) {
           pastedRows.push(newData[targetRow]);
         });
       }
-      const rsFilterData = (0, _utils2.updateOrInsert)((0, _utils2.flattenArray)([...dataSource]), newData);
-      const rs = (0, _utils2.unFlattenData)(rsFilterData);
+
+      // const rsFilterData = updateOrInsert(flattenArray(dataSource), newData)
+      const rsFilterData = (0, _utility.updateOrInsert)(dataSource, newData);
+      const rs = (0, _utility.unFlattenData)(rsFilterData);
       triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
       pipeline.setStateAtKey(_constants.stateKeyEndCell, endPasteCell);
       pipeline.setStateAtKey(_constants.stateKeyEndPasteCell, undefined);
       pipeline.setStateAtKey(_constants.stateKeyStartPasteCell, undefined);
     };
     const triggerPointPaste = (pasteState, cellStart, cellEnd, ctrlKey) => {
-      // const tmpCols = { ...visibleColumns }
-
-      const rowPasteIds = (0, _utils2.getRowIdsBetween3)(allRows, rowIndexMap, cellStart?.rowId ?? '', cellEnd?.rowId ?? '');
-      const colPasteds = (0, _utils2.getColIdsBetween1)(leafColumns, cellStart?.colId ?? '', cellEnd?.colId ?? '');
-      const rowSelectIds = (0, _utils2.getRowIdsBetween3)(allRows, rowIndexMap, startCell?.rowId ?? '', endCell?.rowId ?? '');
-      const colSelectIds = (0, _utils2.getColIdsBetween1)(leafColumns, startCell?.colId ?? '', endCell?.colId ?? '');
+      const rowsPasteId = (0, _utils2.getRowIdsBetween3)(allRows, rowIndexMap, cellStart?.rowId ?? '', cellEnd?.rowId ?? '');
+      const colsPastedId = (0, _utils2.getColIdsBetween1)(leafColumns, cellStart?.colId ?? '', cellEnd?.colId ?? '');
       const dataSelected = [];
       rowSelectIds.forEach(rowId => {
         const row = allRows.find(r => r.rowId === rowId);
@@ -479,21 +479,13 @@ function columnCustom(opts) {
       const copyRows = (0, _utils2.flattenData)('children', dataSource).filter(it => rowSelectIds.includes(it[rowKey]));
 
       // kéo xuóng
-      // setRangeState?.(getSelectedCellMatrix(table, startCell, endPasteCell))
-      const newRange = ctrlKey ? (0, _utils2.addRowsDownWithCtrl)(dataSelected, rowPasteIds.length) : (0, _utils2.addRowsDown)(dataSelected, rowPasteIds.length);
+      const newRange = ctrlKey ? (0, _utils2.addRowsDownWithCtrl)(dataSelected, rowsPasteId.length) : (0, _utils2.addRowsDown)(dataSelected, rowsPasteId.length);
 
       // Cập nhật data mới
-      const newData = (0, _utils2.flattenArray)([...dataSource]);
+      const newData = (0, _utils2.flattenArray)(dataSource);
       const pastedRows = [];
       newRange.addedRows.forEach((rowValues, rowIndex1) => {
-        const targetRow = pasteState.startRowIndex + rowIndex1;
-
-        // Nếu vượt quá số dòng hiện có, thêm dòng mới
-        // if (targetRow >= newData.length) {
-
-        //   newData.push({ id: undefined, rowId: newGuid() })
-        // }
-
+        const targetRow = pasteState?.startRowIndex + rowIndex1;
         rowValues.forEach((cellValue, colIndex1) => {
           const targetCol = startColIndex + colIndex1;
           if (targetCol >= leafColumns.length) {
@@ -510,9 +502,9 @@ function columnCustom(opts) {
         // Lưu dòng được paste
         pastedRows.push(newData[targetRow]);
       });
-      const rsFilterData = (0, _utils2.updateOrInsert)((0, _utils2.flattenArray)([...dataSource]), newData);
-      const rs = (0, _utils2.unFlattenData)(rsFilterData);
-      triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
+      const rsFilterData = (0, _utility.updateOrInsert)(dataSource, newData);
+      const rs = (0, _utility.unFlattenData)(rsFilterData);
+      triggerPaste?.(pastedRows, colsPastedId, rs, copyRows);
     };
     const handleMouseDown = (rowId, colId) => {
       pipeline.setStateAtKey(_constants.stateKeyIsSelecting, true);
@@ -642,6 +634,11 @@ function columnCustom(opts) {
         // }
       }
     };
+
+    // const handleDeleteContent = () => {
+
+    // }
+
     const handleKeyDown = (e, rowId, colId, rowIndex, column, record, editType) => {
       if (e.key === 'Tab') {
         const nextCol = (0, _utils2.getNextColumn)(allCols, focusedCell.colId);
@@ -775,8 +772,54 @@ function columnCustom(opts) {
         }
         return;
       }
-      if (e.key === 'Delete') {
-        handleDeleteContent?.();
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        // handleDeleteContent?.()
+
+        if (startCell && endCell) {
+          const tmpData = (0, _utils2.flattenArray)([...dataSource]);
+          const rs = tmpData.map((row, index) => {
+            if (!rangeState?.rowRange.includes(row.rowId)) {
+              return row;
+            }
+            const updatedRow = {
+              ...row
+            };
+            for (const field of rangeState.colRange) {
+              const col = leafColumns.find(it => it.field === field);
+              const columnIndex = leafColumns.findIndex(it => it.field === field);
+              if ((0, _hooks.isEditable)(col, row)) {
+                let newValue = '';
+                if (col.type === 'number') {
+                  newValue = 0;
+                }
+                if (col.type === 'boolean' || col.type === 'checkbox') {
+                  newValue = false;
+                }
+                const cellEditType = (0, _utils2.getEditType)(col, row);
+                if (col.type === 'date' || col.type === 'datetime' || col.type === 'time' || col.type === 'month' || col.type === 'week' || col.type === 'year' || col.type === 'quarter' || cellEditType === 'asyncSelect' || cellEditType === 'select' || cellEditType === 'treeSelect' || cellEditType === 'selectTable') {
+                  newValue = undefined;
+                }
+                updatedRow[col.field] = newValue;
+                handleCellChange({
+                  key: row[rowKey],
+                  field: col.field,
+                  record: updatedRow,
+                  prevState: row[col.field],
+                  newState: newValue,
+                  option: '',
+                  indexCol: columnIndex,
+                  indexRow: index,
+                  type: e.key
+                });
+              }
+            }
+            return updatedRow;
+          });
+          const newData = (0, _utility.unFlattenData)(rs);
+          triggerChangeData?.([...newData], {
+            type: 'DELETE_CONTENT'
+          });
+        }
         return;
       }
       if (e.key === 'Enter') {
@@ -1001,20 +1044,13 @@ function columnCustom(opts) {
         rowId: rowEnd.id,
         colId: column.field
       };
-      const currentRowId = allRows.findIndex(it => it.rowId === record.rowId);
-      const pasteStartRow = allRows[currentRowId + 1];
+      const currentRowIndex = rowIndexMap.get(record.rowId);
+      const pasteStartRow = allRows[currentRowIndex + 1];
       const cellStart = {
         rowId: pasteStartRow.id,
         colId: endCell?.colId ?? ''
       };
-
-      // const selectState = getSelectedCellMatrix(table, startCell, cellEnd)
-
       const selectPasteState = (0, _utils2.getSelectedCellMatrix1)(allRows, leafColumns, cellStart, cellEnd);
-
-      // setRangeState?.(selectState)
-      // setEndCell?.(cellEnd)
-
       pipeline.setStateAtKey(_constants.stateKeyEndCell, cellEnd);
       triggerPointPaste(selectPasteState, cellStart, cellEnd, e.ctrlKey);
     };
@@ -1272,7 +1308,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,
@@ -1296,7 +1332,7 @@ function columnCustom(opts) {
           startCell: startCell,
           handleSubmit: handleSubmit,
           onSubmit: onSubmit
-        })) : 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", {
+        })) : 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: {
@@ -1379,84 +1415,89 @@ function columnCustom(opts) {
           onDoubleClick: e => {
             // prevCellProps?.onDoubleClick?.(e)
 
-            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 (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);
+              }
             }
           },
           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();
+
+            if (headerEditAble) {
+              if (!isEditing) {
+                handleHeaderKeyDown(e, headerRowId, col.field, headerRowIndex, col, headerRecord, headerEditType ?? 'text');
               } else {
-                if (e.key === 'Enter') {
+                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];
+                    // const currentRowIndex = allRows.findIndex(r => r.rowId === headerRowId);
+                    // const nextRow = allRows[currentRowIndex + 1];
 
-                  // if (nextRow) {
-                  // const nextCellPosition = { rowId: nextRow.rowId, colId: col.field }
+                    // if (nextRow) {
+                    // const nextCellPosition = { rowId: nextRow.rowId, colId: col.field }
 
-                  // pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
-                  // pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
-                  // pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
+                    // pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
+                    // pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
+                    // pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
 
-                  handleHeaderChange(headerRecord, col, startIndex);
-                  pipeline.setStateAtKey(_constants.stateKeyIsEditing, false);
+                    handleHeaderChange(headerRecord, col, startIndex);
+                    pipeline.setStateAtKey(_constants.stateKeyIsEditing, false);
 
-                  // } 
-                }
-                if (e.key === 'Tab') {
-                  e.preventDefault();
+                    // } 
+                  }
+                  if (e.key === 'Tab') {
+                    e.preventDefault();
 
-                  // const nextCol = getNextColumn(allCols, col.field)
+                    // 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);
+                    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
+                      // 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 currentRowIndex = allRows.findIndex(r => r.rowId === headerRowId);
+                      // const nextRow = allRows[currentRowIndex + 1];
 
-                    // const firstCol = nextCol.column
+                      // const firstCol = nextCol.column
 
-                    // if (nextRow) {
+                      // if (nextRow) {
 
-                    //   const nextCellPosition = { rowId: nextRow.rowId, colId: firstCol.field }
+                      //   const nextCellPosition = { rowId: nextRow.rowId, colId: firstCol.field }
 
-                    //   pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
+                      //   pipeline.setStateAtKey(stateKeyFocusedCell, nextCellPosition)
 
-                    //   pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
-                    //   pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
+                      //   pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition)
+                      //   pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition)
 
-                    //   // columnVirtualizer.scrollToIndex(nextRowCol.getIndex())
+                      //   // columnVirtualizer.scrollToIndex(nextRowCol.getIndex())
 
-                    //   // rowVirtualizer.scrollToIndex(nextRow.index, { align: 'auto' })
+                      //   // rowVirtualizer.scrollToIndex(nextRow.index, { align: 'auto' })
 
-                    // }
+                      // }
+                    }
+                    handleHeaderChange(headerRecord, col, startIndex);
+                    pipeline.setStateAtKey(_constants.stateKeyIsEditing, false);
                   }
-                  handleHeaderChange(headerRecord, col, startIndex);
-                  pipeline.setStateAtKey(_constants.stateKeyIsEditing, false);
                 }
               }
             }
@@ -1613,6 +1654,28 @@ function columnCustom(opts) {
                 return;
               }
               if (record.rowId === focusedCell.rowId && col.field === focusedCell.colId && canEdit) {
+                if (onCellClick) {
+                  const cellClickCallback = newOptions => {
+                    if (newOptions) {
+                      pipeline.setStateAtKey(_constants.stateKeyEditCellSettings, {
+                        rowId: record.rowId,
+                        colId: col.field,
+                        editSelectSettings: {
+                          ...col.editSelectSettings,
+                          options: newOptions
+                        }
+                      });
+                    }
+                  };
+                  onCellClick({
+                    index: rowIndex,
+                    rowId: record.rowId,
+                    cellValue: value,
+                    type: "Editing",
+                    field: col.field,
+                    rowData: record
+                  }, cellClickCallback);
+                }
                 handleEdit(e, record, col, editType ?? 'text', false);
               }
             },
@@ -1691,7 +1754,10 @@ function columnCustom(opts) {
             },
             // children: ''
             children: canEdit && cellEditing ? /*#__PURE__*/_react.default.createElement(_EditCell.default, {
-              column: col,
+              column: editCellSettings?.rowId === record.rowId && editCellSettings?.colId === col.field ? {
+                ...col,
+                editSelectSettings: editCellSettings.editSelectSettings
+              } : col,
               editType: editType ?? 'text',
               record: record,
               tableId: id,

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

@@ -10,6 +10,7 @@ export declare const stateKeyIsEditing = "isEditing";
 export declare const stateKeyStartPasteCell = "startPasteCell";
 export declare const stateKeyEndPasteCell = "endPasteCell";
 export declare const stateKeyIsSelecting = "isSelecting";
+export declare const stateKeyEditCellSettings = "editCellSettings";
 export declare const stateKeyIsPasting = "isPasting";
 export declare const stateKeyEndCell = "endCell";
 export declare const stateKeyStartCell = "startCell";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stateKeyVisible = exports.stateKeyTypePaste = exports.stateKeyTooltip = exports.stateKeyStartPasteCell = exports.stateKeyStartCell = exports.stateKeySorter = exports.stateKeyResize = exports.stateKeyPagination = exports.stateKeyIsSelecting = exports.stateKeyIsPasting = exports.stateKeyIsEditing = exports.stateKeyFocusedCell = exports.stateKeyFilter = exports.stateKeyEndPasteCell = exports.stateKeyEndCell = exports.stateKeyColumnFilter = void 0;
+exports.stateKeyVisible = exports.stateKeyTypePaste = exports.stateKeyTooltip = exports.stateKeyStartPasteCell = exports.stateKeyStartCell = exports.stateKeySorter = exports.stateKeyResize = exports.stateKeyPagination = exports.stateKeyIsSelecting = exports.stateKeyIsPasting = exports.stateKeyIsEditing = exports.stateKeyFocusedCell = exports.stateKeyFilter = exports.stateKeyEndPasteCell = exports.stateKeyEndCell = exports.stateKeyEditCellSettings = exports.stateKeyColumnFilter = void 0;
 const stateKeyResize = exports.stateKeyResize = 'columnResize';
 const stateKeyFilter = exports.stateKeyFilter = 'columnsFilter';
 const stateKeySorter = exports.stateKeySorter = 'columnsSorter';
@@ -21,6 +21,7 @@ const stateKeyIsEditing = exports.stateKeyIsEditing = 'isEditing';
 const stateKeyStartPasteCell = exports.stateKeyStartPasteCell = 'startPasteCell';
 const stateKeyEndPasteCell = exports.stateKeyEndPasteCell = 'endPasteCell';
 const stateKeyIsSelecting = exports.stateKeyIsSelecting = 'isSelecting';
+const stateKeyEditCellSettings = exports.stateKeyEditCellSettings = 'editCellSettings';
 const stateKeyIsPasting = exports.stateKeyIsPasting = 'isPasting';
 const stateKeyEndCell = exports.stateKeyEndCell = 'endCell';
 const stateKeyStartCell = exports.stateKeyStartCell = 'startCell';

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

@@ -1,5 +1,5 @@
-import { TreeDataNode } from "rc-master-ui";
-import { ColumnTable } from "../../grid-component";
+import type { TreeDataNode } from "rc-master-ui";
+import type { ColumnTable } from "../../grid-component";
 export declare function convertColumnsToTreeData(columns: ColumnTable[], groupColumns?: string[], t?: any): TreeDataNode[];
 export declare function filterColumnsByField(columns: ColumnTable[], fieldList: string[]): ColumnTable[];
 export declare function filterVisibleColumns(columns: ColumnTable[]): ColumnTable[];