es-grid-template 1.9.62 → 1.9.64

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

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

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

@@ -469,7 +469,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];
@@ -618,14 +620,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.createElement(Select, {
           options: options,
-          value: valueSelect ?? '',
+          value: valueSelect ?? undefined,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -761,7 +765,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];
@@ -769,7 +774,7 @@ const EditCell = props => {
         return /*#__PURE__*/React.createElement(AsyncSelect, {
           options: options,
           defaultOptions: options,
-          value: valueAsyncSelect ?? undefined,
+          value: valueAsyncSelect,
           onChange: (val, option) => {
             onChange(val ?? '');
             const formState = getValues();
@@ -1237,7 +1242,10 @@ const EditCell = props => {
     }
   };
   return /*#__PURE__*/React.createElement("form", {
-    onSubmit: handleSubmit(onSubmit)
+    onSubmit: handleSubmit(onSubmit),
+    style: {
+      height: '100%'
+    }
   }, /*#__PURE__*/React.createElement(Controller, {
     name: dataIndex,
     control: control,

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

@@ -292,7 +292,7 @@ export 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/es/ali-table/base-table/styles.js

@@ -60,7 +60,7 @@ const outerBorderStyleMixin = css(["border-top:var(--cell-border-horizontal);bor
 export const StyleTableContainer = styled.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);
 export const StyledArtTableWrapper = styled.div.withConfig({
   displayName: "StyledArtTableWrapper",
   componentId: "es-grid-template__sc-ipj1ht-1"

package/es/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/es/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/es/ali-table/pipeline/features/columnCustom.js

@@ -3,20 +3,25 @@ import { internals } from "../../internals";
 import { collectNodes, makeRecursiveMapper, mergeCellProps } from "../../utils";
 import Resizer from "../../base-table/ColumnResizer";
 import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
-import { booleanOperator, findItemPath, isEditable, isObjEmpty, nonActionColumn, numberOperator, pageSizeOptions, stringOperator, translateOption, updateArrayByKey } from "../../../grid-component/hooks";
+import { booleanOperator, findItemPath, isEditable, isObjEmpty, nonActionColumn, numberOperator, pageSizeOptions, stringOperator, translateOption, updateArrayByKey
+// updateOrInsert 
+} from "../../../grid-component/hooks";
 import classNames from 'classnames';
 import { Dropdown, Select, Space, Button } from 'rc-master-ui';
-import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, convertFilters, extendsObject, flattenArray, flattenData, getColIdsBetween1, getDefaultOperator, getDragRightData, getKeys, getNextColumn, getNextColumn1, getPrevColumn, getRowIdsBetween3, getRowIndexMap, getSelectedCellMatrix1, getTypeFilter,
+import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, convertFilters, extendsObject, flattenArray, flattenData, getColIdsBetween1, getDefaultOperator, getDragRightData, getEditType, getKeys, getNextColumn, getNextColumn1, getPrevColumn, getRowIdsBetween3,
+// getRowIndexMap,
+getSelectedCellMatrix1, getTypeFilter,
 // isObjEqual,
-newGuid, unFlattenData, updateOrInsert } from "../../../table-component/hook/utils";
+newGuid } from "../../../table-component/hook/utils";
 import { renderFilter } from "../../base-table/renderFilter";
 import { renderValueCell } from "../../../table-component/hook/useColumns";
 import EditCell from "../../base-table/cell/EditCell";
 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";
+stateKeyEndCell, stateKeyEndPasteCell, stateKeyStartCell, stateKeyStartPasteCell, stateKeyFocusedCell, stateKeyEditCellSettings, stateKeyIsEditing, stateKeyIsPasting, stateKeyIsSelecting } from "../../utils/constants";
 import { getColumnsAtLevel } from "../../base-table/utils";
+import { unFlattenData, updateOrInsert } from "../../utils/utility";
 // import { getMaxDepth } from '../../utils/utility';
 
 function clamp(min, x, max) {
@@ -53,7 +58,7 @@ export function columnCustom(opts) {
     control,
     getValues,
     errors,
-    handleDeleteContent,
+    triggerChangeData,
     tableRef,
     triggerPaste,
     handleSubmit,
@@ -61,7 +66,10 @@ export function columnCustom(opts) {
     handleCellChange,
     handleHeaderCellChange,
     dataErrors,
-    headerData
+    headerData,
+    headerEditAble,
+    rowIndexMap,
+    onCellClick
     // originData
 
     // currentPage = 1,
@@ -72,6 +80,7 @@ export function columnCustom(opts) {
     mode = 'multiple',
     onSorter
   } = opts;
+  const rowKey = 'rowId';
   return function columnResizeFeature(pipeline) {
     // State table
 
@@ -92,7 +101,6 @@ export function columnCustom(opts) {
     const originCols = pipeline.getColumns();
     const rowIds = getKeys(allRows, 'rowId');
     const colIds = getKeys(leafColumns, 'field');
-    const rowIndexMap = getRowIndexMap(allRows);
 
     // const deppthCols  = getMaxDepth(originCols)
 
@@ -104,6 +112,7 @@ export function columnCustom(opts) {
 
     const focusedCell = pipeline.getStateAtKey(stateKeyFocusedCell) ?? {};
     const isEditing = pipeline.getStateAtKey(stateKeyIsEditing) ?? false;
+    const editCellSettings = pipeline.getStateAtKey(stateKeyEditCellSettings);
     const isSelecting = pipeline.getStateAtKey(stateKeyIsSelecting) ?? false;
     const isPasting = pipeline.getStateAtKey(stateKeyIsPasting) ?? false;
     const startCell = pipeline.getStateAtKey(stateKeyStartCell) ?? undefined;
@@ -122,7 +131,10 @@ export function columnCustom(opts) {
       endColIndex,
       endRowIndex
     } = rangeState ?? {};
-    const rowKey = 'rowId';
+    const rowPasteIds = getRowIdsBetween3(allRows, rowIndexMap, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
+    const colPasteds = getColIdsBetween1(leafColumns, startPasteCell?.colId ?? '', endPasteCell?.colId ?? '');
+    const rowSelectIds = getRowIdsBetween3(allRows, rowIndexMap, startCell?.rowId ?? '', endCell?.rowId ?? '');
+    const colSelectIds = getColIdsBetween1(leafColumns, startCell?.colId ?? '', endCell?.colId ?? '');
     leafColumns.forEach((col, colIndex) => {
       if (sizes[colIndex] == null) {
         if (typeof col.width === 'number') {
@@ -326,11 +338,7 @@ export function columnCustom(opts) {
       }
     };
     const triggerDragPaste = (pasteState, ctrlKey) => {
-      const tmpCols = [...leafColumns];
-      const rowPasteIds = getRowIdsBetween3(allRows, rowIndexMap, startPasteCell?.rowId ?? '', endPasteCell?.rowId ?? '');
-      const colPasteds = getColIdsBetween1(leafColumns, startPasteCell?.colId ?? '', endPasteCell?.colId ?? '');
-      const rowSelectIds = getRowIdsBetween3(allRows, rowIndexMap, startCell?.rowId ?? '', endCell?.rowId ?? '');
-      const colSelectIds = getColIdsBetween1(leafColumns, startCell?.colId ?? '', endCell?.colId ?? '');
+      const tmpCols = leafColumns;
       const dataSelected = []; // data được copy
 
       rowSelectIds.forEach(rowId => {
@@ -338,8 +346,6 @@ export 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 : '');
         });
@@ -382,7 +388,7 @@ export function columnCustom(opts) {
       }
 
       // Cập nhật data mới
-      const newData = flattenArray([...allRows]);
+      const newData = flattenArray(allRows);
       const pastedRows = [];
       if (pasteState.type === 'down' || pasteState.type === 'up') {
         newRange.addedRows.forEach((rowValues, rowIndex1) => {
@@ -448,7 +454,9 @@ export function columnCustom(opts) {
           pastedRows.push(newData[targetRow]);
         });
       }
-      const rsFilterData = updateOrInsert(flattenArray([...dataSource]), newData);
+
+      // const rsFilterData = updateOrInsert(flattenArray(dataSource), newData)
+      const rsFilterData = updateOrInsert(dataSource, newData);
       const rs = unFlattenData(rsFilterData);
       triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
       pipeline.setStateAtKey(stateKeyEndCell, endPasteCell);
@@ -456,12 +464,8 @@ export function columnCustom(opts) {
       pipeline.setStateAtKey(stateKeyStartPasteCell, undefined);
     };
     const triggerPointPaste = (pasteState, cellStart, cellEnd, ctrlKey) => {
-      // const tmpCols = { ...visibleColumns }
-
-      const rowPasteIds = getRowIdsBetween3(allRows, rowIndexMap, cellStart?.rowId ?? '', cellEnd?.rowId ?? '');
-      const colPasteds = getColIdsBetween1(leafColumns, cellStart?.colId ?? '', cellEnd?.colId ?? '');
-      const rowSelectIds = getRowIdsBetween3(allRows, rowIndexMap, startCell?.rowId ?? '', endCell?.rowId ?? '');
-      const colSelectIds = getColIdsBetween1(leafColumns, startCell?.colId ?? '', endCell?.colId ?? '');
+      const rowsPasteId = getRowIdsBetween3(allRows, rowIndexMap, cellStart?.rowId ?? '', cellEnd?.rowId ?? '');
+      const colsPastedId = getColIdsBetween1(leafColumns, cellStart?.colId ?? '', cellEnd?.colId ?? '');
       const dataSelected = [];
       rowSelectIds.forEach(rowId => {
         const row = allRows.find(r => r.rowId === rowId);
@@ -476,21 +480,13 @@ export function columnCustom(opts) {
       const copyRows = flattenData('children', dataSource).filter(it => rowSelectIds.includes(it[rowKey]));
 
       // kéo xuóng
-      // setRangeState?.(getSelectedCellMatrix(table, startCell, endPasteCell))
-      const newRange = ctrlKey ? addRowsDownWithCtrl(dataSelected, rowPasteIds.length) : addRowsDown(dataSelected, rowPasteIds.length);
+      const newRange = ctrlKey ? addRowsDownWithCtrl(dataSelected, rowsPasteId.length) : addRowsDown(dataSelected, rowsPasteId.length);
 
       // Cập nhật data mới
-      const newData = flattenArray([...dataSource]);
+      const newData = 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) {
@@ -507,9 +503,9 @@ export function columnCustom(opts) {
         // Lưu dòng được paste
         pastedRows.push(newData[targetRow]);
       });
-      const rsFilterData = updateOrInsert(flattenArray([...dataSource]), newData);
+      const rsFilterData = updateOrInsert(dataSource, newData);
       const rs = unFlattenData(rsFilterData);
-      triggerPaste?.(pastedRows, colPasteds, rs, copyRows);
+      triggerPaste?.(pastedRows, colsPastedId, rs, copyRows);
     };
     const handleMouseDown = (rowId, colId) => {
       pipeline.setStateAtKey(stateKeyIsSelecting, true);
@@ -639,6 +635,11 @@ export function columnCustom(opts) {
         // }
       }
     };
+
+    // const handleDeleteContent = () => {
+
+    // }
+
     const handleKeyDown = (e, rowId, colId, rowIndex, column, record, editType) => {
       if (e.key === 'Tab') {
         const nextCol = getNextColumn(allCols, focusedCell.colId);
@@ -772,8 +773,54 @@ export function columnCustom(opts) {
         }
         return;
       }
-      if (e.key === 'Delete') {
-        handleDeleteContent?.();
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        // handleDeleteContent?.()
+
+        if (startCell && endCell) {
+          const tmpData = 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 (isEditable(col, row)) {
+                let newValue = '';
+                if (col.type === 'number') {
+                  newValue = 0;
+                }
+                if (col.type === 'boolean' || col.type === 'checkbox') {
+                  newValue = false;
+                }
+                const cellEditType = 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 = unFlattenData(rs);
+          triggerChangeData?.([...newData], {
+            type: 'DELETE_CONTENT'
+          });
+        }
         return;
       }
       if (e.key === 'Enter') {
@@ -998,20 +1045,13 @@ export 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 = getSelectedCellMatrix1(allRows, leafColumns, cellStart, cellEnd);
-
-      // setRangeState?.(selectState)
-      // setEndCell?.(cellEnd)
-
       pipeline.setStateAtKey(stateKeyEndCell, cellEnd);
       triggerPointPaste(selectPasteState, cellStart, cellEnd, e.ctrlKey);
     };
@@ -1269,7 +1309,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,
@@ -1293,7 +1333,7 @@ export function columnCustom(opts) {
           startCell: startCell,
           handleSubmit: handleSubmit,
           onSubmit: onSubmit
-        })) : 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", {
+        })) : 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: {
@@ -1376,84 +1416,89 @@ export 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(stateKeyIsEditing, false);
+                    handleHeaderChange(headerRecord, col, startIndex);
+                    pipeline.setStateAtKey(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(stateKeyFocusedCell, nextCellPosition);
-                    pipeline.setStateAtKey(stateKeyStartCell, nextCellPosition);
-                    pipeline.setStateAtKey(stateKeyEndCell, nextCellPosition);
+                    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
+                      // 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(stateKeyIsEditing, false);
                   }
-                  handleHeaderChange(headerRecord, col, startIndex);
-                  pipeline.setStateAtKey(stateKeyIsEditing, false);
                 }
               }
             }
@@ -1610,6 +1655,28 @@ export function columnCustom(opts) {
                 return;
               }
               if (record.rowId === focusedCell.rowId && col.field === focusedCell.colId && canEdit) {
+                if (onCellClick) {
+                  const cellClickCallback = newOptions => {
+                    if (newOptions) {
+                      pipeline.setStateAtKey(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);
               }
             },
@@ -1688,7 +1755,10 @@ export function columnCustom(opts) {
             },
             // children: ''
             children: canEdit && cellEditing ? /*#__PURE__*/React.createElement(EditCell, {
-              column: col,
+              column: editCellSettings?.rowId === record.rowId && editCellSettings?.colId === col.field ? {
+                ...col,
+                editSelectSettings: editCellSettings.editSelectSettings
+              } : col,
               editType: editType ?? 'text',
               record: record,
               tableId: id,

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

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