es-grid-template 1.3.6 → 1.3.7

package/es/grid-component/table/Group.js

@@ -96,7 +96,7 @@ const Group = props => {
     })));
   };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
-    heightTable: height,
+    $heightTable: height,
     style: {
       position: 'relative'
     }

package/lib/grid-component/GridStyle.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="react" />
-export declare const GridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    heightTable?: number | string;
-}>> & string;
+interface GridProps {
+    $heightTable?: number | string;
+}
+export declare const GridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GridProps>> & string;
+export {};

package/lib/grid-component/GridStyle.js

@@ -9,4 +9,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})([".ui-rc-table-container{min-height:", ";}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined);
+})([".ui-rc-table-container{min-height:", ";}.ui-rc-toolbar-bottom{position:relative;padding:.25rem 1rem;background-color:#ffffff;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}.toolbar-button{border-radius:0;.ant-btn{border-radius:0;}}}.ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;background-color:#ffffff;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:50px;bottom:0;visibility:visible;right:0;}&.pagination-template{position:relative;&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;left:0;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:100%;bottom:0;visibility:visible;right:0;}}}.react-resizable{position:relative;background-clip:padding-box;}.rc-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.$heightTable ? typeof props.$heightTable === 'string' ? props.$heightTable : `${props.$heightTable}px` : undefined);

package/lib/grid-component/TableGrid.js

@@ -24,6 +24,8 @@ var _AdvanceFilter = _interopRequireDefault(require("./AdvanceFilter"));
 var _reactTooltip = require("react-tooltip");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// import  Table from "../../core/table"
+
 // import {ConfigProvider} from "antd";
 
 const convertFilters = filters => {
@@ -366,8 +368,10 @@ const TableGrid = props => {
     loading: {
       spinning: columns && columns.length === 0 || loading === true,
       indicator: /*#__PURE__*/_react.default.createElement(_LoadingSpinner.default, null)
-    },
-    dataSource: columns && columns.length > 0 ? (0, _hooks.filterDataByColumns3)(dataSource, filterStates) : []
+    }
+    // dataSource={columns && columns.length > 0 ? filterDataByColumns3(dataSource, filterStates) : []}
+    ,
+    dataSource: columns && columns.length > 0 ? (0, _hooks.filterDataByColumns4)(dataSource, filterStates) : []
     // dataSource={columns && columns.length > 0 && loading !== true ? dataSource : []}
     // className={styles.customTable}
     ,
@@ -392,17 +396,16 @@ const TableGrid = props => {
     },
     rowSelection: columns && columns.length === 0 ? undefined : {
       ...selectionSettings,
-      type: selectionSettings?.mode === 'checkbox' || type === 'multiple' ? 'checkbox' : "radio",
-      columnWidth: !mode ? 0.0000001 : columnWidth ?? 50,
+      // type: selectionSettings?.mode,
+      type: mode,
+      columnWidth: columnWidth ?? 50,
       onChange: onSelectChange,
       // selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
       selectedRowKeys: mergedSelectedKeys,
-      defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
+      // defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
+      defaultSelectedRowKeys: defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
-      // ...rowSelection,
-      // checkStrictly: false,
-
-      hideSelectAll: !type || type === 'single' || selectionSettings?.mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
+      hideSelectAll: !type || type === 'single' || mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
     }
 
     // onScroll={() => {
@@ -419,7 +422,7 @@ const TableGrid = props => {
       }
       return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary, {
         fixed: true
-      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _columns.flatColumns)([_rcMasterUi.Table.SELECTION_COLUMN, ...columns]).filter(col => col.hidden !== true).map((col, index) => {
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _columns.flatColumns)(!!mode ? [_rcMasterUi.Table.SELECTION_COLUMN, ...columns] : [...columns]).filter(col => col.hidden !== true).map((col, index) => {
         const thousandSeparator = col.format?.thousandSeparator ? col.format?.thousandSeparator : format?.thousandSeparator;
         const decimalSeparator = col.format?.decimalSeparator ? col.format?.decimalSeparator : format?.decimalSeparator;
         const dec = col.format?.decimalScale || col.format?.decimalScale === 0 ? col.format?.decimalScale : format?.decimalScale;
@@ -443,7 +446,7 @@ const TableGrid = props => {
         }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps));
       })));
     },
-    pagination: !pagination || pagination && pagination.onChange ? false : {
+    pagination: !pagination || pagination && pagination?.onChange ? false : {
       showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
       ...pagination
     },

package/lib/grid-component/hooks/columns/index.js

@@ -88,7 +88,7 @@ const getValueCell = (column, value, format) => {
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
       const tmpval = typeof value === 'string' ? Number(value) : value;
-      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? tmpval.toFixed(dec) : tmpval.toString() : '0';
+      const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
       const numericFormatProps = {
         thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
         decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),

package/lib/grid-component/hooks/useColumns.js

@@ -165,8 +165,8 @@ const useColumns = config => {
   const transformColumns = (0, _react.useCallback)(columns => {
     // >>>>>>>>>>> Support selection
     const cloneColumns = [...columns];
-    const firstNonGroupColumn = (0, _columns.flatColumns2)(cloneColumns).find(col => col.field && col.field !== '#' && col.field !== 'index' && !groupColumns?.includes(col.field) && col.hidden !== true);
-    const nonGroupColumns = (0, _columns.flatColumns2)(cloneColumns).filter(col => col.field && col.field !== '#' && col.field !== 'index' && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const firstNonGroupColumn = (0, _columns.flatColumns2)(cloneColumns).find(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
+    const nonGroupColumns = (0, _columns.flatColumns2)(cloneColumns).filter(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
 
     // ===================== Render =====================
 
@@ -202,19 +202,18 @@ const useColumns = config => {
             children: convertColumns(transformedColumn.children)
           };
         }
-        if (["index", "#"].includes(col.field)) {
+        if (transformedColumn.field === '#') {
           return {
             ...transformedColumn,
             onCell: () => ({
               className: 'cell-number'
             }),
             render: (val, record) => {
-              // return rowIndex + 1
               return (0, _utils.findItemPath)(dataSource, record, rowKey);
             }
           };
         }
-        if (col.field === 'command') {
+        if (transformedColumn.field === 'command') {
           return {
             ...transformedColumn,
             onCell: () => ({
@@ -300,6 +299,9 @@ const useColumns = config => {
             }
             if (col.field === firstNonGroupColumn?.field && record.children) {
               const currentGroupColumn = (0, _columns.flatColumns2)(cols).find(it => it.field === record.field);
+              if (currentGroupColumn?.template) {
+                return (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, format);
+              }
               return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, format));
             }
             return (0, _columns.renderContent)(col, value, record, rowIndex, format);

package/lib/grid-component/hooks/utils.d.ts

@@ -83,6 +83,8 @@ export declare const filterDataByColumns: (data: any[], queries: any) => any[];
 export declare const filterDataByColumns2: (data: any[], queries: any) => any[];
 export declare const removeFieldRecursive: (data: any[], field: string) => any[];
 export declare const filterDataByColumns3: (data: any[], queries: any[]) => any[];
+export declare const shouldInclude: (item: any, queries: any[]) => any;
+export declare function filterDataByColumns4(data: any[], queries: any[]): any[];
 export declare function isDateString(str: any): boolean;
 export declare function compareDates(date1: any, date2: any): boolean;
 export declare function compareDate(itemValue: any, value: any): boolean;
@@ -102,5 +104,15 @@ export declare function isBottomMostInRanges(rowIndex: number, colIndex: number,
 export declare const mergedSets: (arr: any[]) => Set<unknown>;
 export declare const sortedSetASC: (setValue: any) => Set<unknown>;
 export declare const sortedSetDSC: (setValue: any) => Set<unknown>;
-export declare const onAddClassSelectedCell: (selectedCells: any, id?: string) => void;
-export declare const onRemoveClassSelectedCell: (selectedCells: any, id?: string) => void;
+export declare function getBottomRowCells(cellSet: any): any[];
+export declare function getCellsByPosition(cellSet: any, position?: string): any[];
+export declare const addBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
+export declare const removeBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
+export declare const onAddClassBgSelectedCell: (selectedCells: any, id?: string) => void;
+export declare const onRemoveClassSelectedCell: (selectedCells: any, id?: string, rowsSelected?: any) => void;
+export declare const addClassBorderPasteCell: (pasteCells: any, type: 'up' | 'down', id?: string) => void;
+export declare const removeClassBorderPasteCell: (pasteCells: any, type: 'up' | 'down', id?: string) => void;
+export declare const addClassCellIndexSelected: (rowsSelected: any, id?: string) => void;
+export declare const removeClassCellIndexSelected: (rowsSelected: any, id?: string) => void;
+export declare const showDraggingPoint: (selectedCells: any, id?: any) => void;
+export declare const hideDraggingPoint: (selectedCells: any, id?: any) => void;

package/lib/grid-component/hooks/utils.js

@@ -4,17 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.addRowIdArray = void 0;
+exports.addRowIdArray = exports.addClassCellIndexSelected = exports.addClassBorderPasteCell = exports.addBorderClass = void 0;
 exports.addRows8 = addRows8;
 exports.addRowsUp = addRowsUp;
 exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = exports.checkChild = exports.buildConnectedRegions = void 0;
 exports.compareDate = compareDate;
 exports.compareDates = compareDates;
 exports.filterDataByColumns3 = exports.filterDataByColumns2 = exports.filterDataByColumns = exports.editAbleColumns = exports.customWeekStartEndFormat = exports.countItemsBeforeIndex = exports.convertLabelToTitle = exports.convertFlatColumn = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertColumns = exports.convertArrayWithIndent = void 0;
+exports.filterDataByColumns4 = filterDataByColumns4;
 exports.findAllChildrenKeys = findAllChildrenKeys;
-exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemPath = exports.findItemByKey = void 0;
+exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemPath = exports.findItemByKey = void 0;
+exports.getBottomRowCells = getBottomRowCells;
+exports.getCellsByPosition = getCellsByPosition;
+exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
-exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
+exports.hideDraggingPoint = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
 exports.invalidDate = invalidDate;
 exports.isArraysEqual = void 0;
 exports.isBottomMostInRanges = isBottomMostInRanges;
@@ -24,7 +28,7 @@ exports.isEmpty = exports.isEditable = exports.isDisable = void 0;
 exports.isEqualSet = isEqualSet;
 exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = void 0;
 exports.isRightMostInRegion = isRightMostInRegion;
-exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sortedSetDSC = exports.sortedSetASC = exports.removeFieldRecursive = exports.removeColumns = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveClassSelectedCell = exports.onAddClassSelectedCell = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = void 0;
+exports.updateData = exports.updateColumnsByGroup = exports.updateColumns = exports.updateArrayByKey = exports.transformColumns1 = exports.transformColumns = exports.totalFixedWidth = exports.sumDataByField = exports.sortedSetDSC = exports.sortedSetASC = exports.showDraggingPoint = exports.shouldInclude = exports.removeFieldRecursive = exports.removeColumns = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveClassSelectedCell = exports.onAddClassBgSelectedCell = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment/moment"));
 var _uuid = require("uuid");
@@ -369,7 +373,7 @@ const totalFixedWidth = (columns, type, selectionSettings) => {
     const width = typeof column.width === 'number' ? column.width : parseInt(column.width, 10) || 0; // Chuyển từ chuỗi sang số, nếu không hợp lệ thì lấy 0
     return sum + width;
   }, 0);
-  const selectColumnWidth = !selectionSettings?.mode ? 0.0000001 : typeof selectionSettings?.columnWidth === 'number' ? selectionSettings?.columnWidth : parseInt(selectionSettings?.columnWidth, 10) || 50;
+  const selectColumnWidth = !selectionSettings?.mode ? 0 : typeof selectionSettings?.columnWidth === 'number' ? selectionSettings?.columnWidth : parseInt(selectionSettings?.columnWidth, 10) || 50;
   return totalFixedLeftWidth + selectColumnWidth;
 };
 exports.totalFixedWidth = totalFixedWidth;
@@ -809,8 +813,8 @@ function addRowsUp(array, n) {
           {
             // Lấy giá trị cuối, chuyển về date, cộng thêm (i+1)*step, chuyển lại về định dạng ISO
 
-            const lastDate = new Date(array[m - 1][j]);
-            const newTime = lastDate.getTime() - (i + 1) * steps[j] * -1;
+            const lastDate = new Date(arr[m - 1][j]);
+            const newTime = m === 1 ? lastDate.getTime() - (i + 1) * steps[j] : lastDate.getTime() - (i + 1) * steps[j] * -1;
             newValue = (0, _moment.default)(new Date(newTime)).format();
           }
           break;
@@ -863,7 +867,7 @@ const transformColumns1 = (cols, sortMultiple) => {
     if (!column?.field && !column?.key) {
       return _rcMasterUi.Table.SELECTION_COLUMN;
     }
-    if (column.dataIndex === 'index' || column.field === 'index' || column.dataIndex === '#' || column.dataIndex === '#') {
+    if (column.dataIndex === '#' || column.dataIndex === '#') {
       return {
         ...column
       };
@@ -1246,6 +1250,93 @@ const filterDataByColumns3 = (data, queries) => {
     return result;
   });
 };
+exports.filterDataByColumns3 = filterDataByColumns3;
+const shouldInclude = (item, queries) => {
+  if (item.isFilterState === true) {
+    return true;
+  }
+  let result = null;
+  for (const query of queries) {
+    const {
+      field,
+      value,
+      operator,
+      predicate
+    } = query;
+    const itemValue = item[field];
+    let condition = false;
+    const isDateComparison = isDate(itemValue) || isDateString(value);
+    const itemDate = isDateComparison ? new Date(itemValue) : null;
+    const queryDate = isDateComparison ? parseToDate(value) : null;
+    const itemStr = itemValue?.toString().toLowerCase?.();
+    const queryStr = value?.toString().toLowerCase?.();
+    switch (operator.toLowerCase()) {
+      case "equal":
+        condition = isDateComparison ? compareDates(itemDate, queryDate) : itemValue === value;
+        break;
+      case "notequal":
+        condition = isDateComparison ? !compareDates(itemDate, queryDate) : itemValue !== value;
+        break;
+      case "greaterthan":
+        // @ts-ignore
+        condition = isDateComparison ? itemDate > queryDate : itemValue > value;
+
+        // condition = isDateComparison ? invalidDate(itemDate) && invalidDate(queryDate) && itemDate > queryDate : itemValue > value;
+        break;
+      case "greaterthanorequal":
+        // @ts-ignore
+        condition = isDateComparison ? itemDate >= queryDate : itemValue >= value;
+        break;
+      case "lessthan":
+        // @ts-ignore
+        condition = isDateComparison ? itemDate < queryDate : itemValue < value;
+        break;
+      case "lessthanorequal":
+        // @ts-ignore
+        condition = isDateComparison ? itemDate <= queryDate : itemValue <= value;
+        break;
+      case "contains":
+        condition = itemStr?.includes(queryStr);
+        break;
+      case "startswith":
+        condition = itemStr?.startsWith(queryStr);
+        break;
+      case "endswith":
+        condition = itemStr?.endsWith(queryStr);
+        break;
+      default:
+        console.warn(`Unknown operator: ${operator}`);
+        break;
+    }
+    if (predicate === "and") {
+      result = result === null ? condition : result && condition;
+    } else if (predicate === "or") {
+      result = result === null ? condition : result || condition;
+    }
+  }
+  return result;
+};
+exports.shouldInclude = shouldInclude;
+function filterDataByColumns4(data, queries) {
+  if (!queries || queries.length === 0) {
+    return data;
+  }
+  return data.map(item => {
+    const newItem = {
+      ...item
+    };
+    if (Array.isArray(item.children)) {
+      newItem.children = filterDataByColumns4(item.children, queries);
+    }
+    const isSelfMatched = shouldInclude(item, queries);
+
+    // Nếu chính item thỏa hoặc có con thỏa → giữ lại
+    if (isSelfMatched || newItem.children && newItem.children.length > 0) {
+      return newItem;
+    }
+    return null; // loại bỏ node không phù hợp
+  }).filter(Boolean); // xóa các null
+}
 
 // ======= Helper functions ========
 
@@ -1253,7 +1344,7 @@ const filterDataByColumns3 = (data, queries) => {
 // function isDate(value: any) {
 //   return value instanceof Date || !isNaN(Date.parse(value));
 // }
-exports.filterDataByColumns3 = filterDataByColumns3;
+
 function isDate(value) {
   if (value instanceof Date) {
     return !isNaN(value.getTime());
@@ -1442,31 +1533,152 @@ const sortedSetDSC = setValue => {
   return new Set(sorted);
 };
 exports.sortedSetDSC = sortedSetDSC;
-const onAddClassSelectedCell = (selectedCells, id) => {
+function getBottomRowCells(cellSet) {
+  const cells = Array.from(cellSet).map(key => {
+    const [row, col] = key.split('-').map(Number);
+    return {
+      row,
+      col,
+      key
+    };
+  });
+  const maxRow = Math.max(...cells.map(c => c.row));
+  return cells.filter(c => c.row === maxRow).map(c => c.key);
+}
+function getCellsByPosition(cellSet, position = "bottom") {
+  const cells = Array.from(cellSet).map(key => {
+    const [row, col] = key.split("-").map(Number);
+    return {
+      row,
+      col,
+      key
+    };
+  });
+  switch (position) {
+    case "top":
+      {
+        // const minRow = Math.min(...cells.map(c => c.row));
+        // return cells.filter(c => c.row === minRow).map(c => c.key);
+
+        // const rows = cells.map(c => c.row).filter(r => r > 0);
+        // if (rows.length === 0) return [];
+        // const minRow = Math.min(...rows);
+        // return cells.filter(c => c.row === minRow).map(c => c.key);
+
+        const minRow = Math.min(...cells.map(c => c.row));
+        if (minRow === 0) return []; // Bỏ qua nếu rowIndex = 0
+
+        return cells.filter(c => c.row === minRow).map(c => `${c.row - 1}-${c.col}`);
+      }
+    case "bottom":
+      {
+        const maxRow = Math.max(...cells.map(c => c.row));
+        return cells.filter(c => c.row === maxRow).map(c => c.key);
+      }
+    case "left":
+      {
+        // const minCol = Math.min(...cells.map(c => c.col));
+        // return cells.filter(c => c.col === minCol).map(c => c.key);
+
+        // const cols = cells.map(c => c.col).filter(c => c > 0);
+        // if (cols.length === 0) return [];
+        // const minCol = Math.min(...cols);
+        // return cells.filter(c => c.col === minCol).map(c => c.key);
+
+        const minCol = Math.min(...cells.map(c => c.col));
+        if (minCol === 0) return []; // Bỏ qua nếu colIndex = 0
+
+        // Trả về các ô cùng row, nhưng ở cột bên trái
+        return cells.filter(c => c.col === minCol).map(c => `${c.row}-${c.col - 1}`);
+      }
+    case "right":
+      {
+        const maxCol = Math.max(...cells.map(c => c.col));
+        return cells.filter(c => c.col === maxCol).map(c => c.key);
+      }
+    default:
+      return [];
+  }
+}
+const addBorderClass = (selectedCells, type, className, id) => {
+  const table = document.querySelector(`#${id}`);
+  const typeCells = getCellsByPosition(selectedCells, type);
+  const selectorsCells = typeCells.map(pos => {
+    const [row, col] = pos.split('-');
+    return `[data-row-index="${row}"][data-col-index="${col}"]`;
+  });
+  const cellsFilter = typeCells.length > 0 ? table?.querySelectorAll(selectorsCells.join(',')) : null;
+  if (cellsFilter && cellsFilter.length > 0) {
+    cellsFilter.forEach(cell => {
+      cell.classList.add(className);
+    });
+  }
+};
+exports.addBorderClass = addBorderClass;
+const removeBorderClass = (selectedCells, type, className, id) => {
+  const table = document.querySelector(`#${id}`);
+  const typeCells = getCellsByPosition(selectedCells, type);
+  const selectorsCells = typeCells.map(pos => {
+    const [row, col] = pos.split('-');
+    return `[data-row-index="${row}"][data-col-index="${col}"]`;
+  });
+  const cellsFilter = typeCells.length > 0 ? table?.querySelectorAll(selectorsCells.join(',')) : null;
+  if (cellsFilter && cellsFilter.length > 0) {
+    cellsFilter.forEach(cell => {
+      cell.classList.remove(className);
+    });
+  }
+};
+exports.removeBorderClass = removeBorderClass;
+const onAddClassBgSelectedCell = (selectedCells, id) => {
   const selectors = Array.from(selectedCells).map(pos => {
     const [row1, col1] = pos.split('-');
     return `[data-row-index="${row1}"][data-col-index="${col1}"]`;
   });
-
-  // const cells = document.querySelectorAll(selectors.join(','));
-
   const table = document.querySelector(`#${id}`);
-  console.log('table', table);
-  const cells = table?.querySelectorAll(selectors.join(','));
+  const cells = table && selectors.length > 0 ? table?.querySelectorAll(selectors.join(',')) : null;
   if (cells) {
     cells.forEach(cell => {
       cell.classList.add('selected');
     });
   }
+  const rowsArray = [...new Set([...selectedCells].map(item => item.split("-")[0]))];
+  const rowsSelectors = rowsArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
+  const cellsIndex = table && rowsSelectors.length > 0 ? table?.querySelectorAll(rowsSelectors) : null;
+  if (cellsIndex) {
+    cellsIndex.forEach(cell => {
+      cell.classList.add('focus');
+    });
+  }
+
+  // tăng z-index để hiển thị round point paste
+  const row = getLastSelectCell(selectedCells).row;
+  const col = getLastSelectCell(selectedCells).col;
+  const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
+  if (cell) {
+    cell.style.zIndex = 1;
+  }
+  if (cell && cell.classList.contains('ui-rc-table-cell-fix-left')) {
+    cell.style.zIndex = 3;
+  }
+
+  //  thêm class border selected
+
+  addBorderClass(selectedCells, 'bottom', 'cell-border-bottom', id);
+  addBorderClass(selectedCells, 'right', 'cell-border-right', id);
+  addBorderClass(selectedCells, 'top', 'cell-border-top', id);
+  addBorderClass(selectedCells, 'left', 'cell-border-left', id);
 };
-exports.onAddClassSelectedCell = onAddClassSelectedCell;
-const onRemoveClassSelectedCell = (selectedCells, id) => {
+exports.onAddClassBgSelectedCell = onAddClassBgSelectedCell;
+const onRemoveClassSelectedCell = (selectedCells, id, rowsSelected) => {
   const selectors = Array.from(selectedCells).map(pos => {
     const [row, col] = pos.split('-');
     return `[data-row-index="${row}"][data-col-index="${col}"]`;
   });
+  const rowsArray = [...new Set([...selectedCells].map(item => item.split("-")[0]))];
+  const rowsSelectors = rowsArray.map(row => `.rc-ui-cell-index[data-row-index="${row}"]`).join(", ");
   const table = document.querySelector(`#${id}`);
-  const cells = table?.querySelectorAll(selectors.join(','));
+  const cells = table && selectors.length > 0 ? table?.querySelectorAll(selectors.join(',')) : null;
   // const cells = table?.querySelectorAll(selectors.join(','))
 
   // const cells = table?.querySelectorAll('.ui-rc-table-cell.selected');
@@ -1476,5 +1688,127 @@ const onRemoveClassSelectedCell = (selectedCells, id) => {
       cell.classList.remove('selected');
     });
   }
+  const cellsIndex = table && rowsSelectors.length > 0 ? table?.querySelectorAll(rowsSelectors) : null;
+  if (cellsIndex) {
+    cellsIndex.forEach(cell => {
+      cell.classList.remove('focus');
+    });
+  }
+
+  // xóa class selected ô STT
+
+  if (rowsSelected && rowsSelected.size > 0) {
+    const rowsSelectedArray = [...new Set([...rowsSelected].map(item => item.split("-")[0]))];
+    const rowsSelectedSelectors = rowsSelectedArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
+    const cellsSelectedIndex = table && rowsSelectedSelectors.length > 0 ? table?.querySelectorAll(rowsSelectedSelectors) : null;
+    if (cellsSelectedIndex) {
+      cellsSelectedIndex.forEach(cell => {
+        cell.classList.remove('selected');
+      });
+    }
+  }
+
+  // xóa z-index về mặc định
+
+  const row = getLastSelectCell(selectedCells).row;
+  const col = getLastSelectCell(selectedCells).col;
+  const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
+  if (cell) {
+    cell.style.zIndex = 0;
+  }
+  if (cell && cell.classList.contains('ui-rc-table-cell-fix-left')) {
+    cell.style.zIndex = 2;
+  }
+
+  //  remove class border
+
+  removeBorderClass(selectedCells, 'bottom', 'cell-border-bottom', id);
+  removeBorderClass(selectedCells, 'right', 'cell-border-right', id);
+  removeBorderClass(selectedCells, 'top', 'cell-border-top', id);
+  removeBorderClass(selectedCells, 'left', 'cell-border-left', id);
+};
+exports.onRemoveClassSelectedCell = onRemoveClassSelectedCell;
+const addClassBorderPasteCell = (pasteCells, type, id) => {
+  //  thêm class border
+
+  addBorderClass(pasteCells, 'right', 'cell-paste-border-right', id);
+  addBorderClass(pasteCells, 'left', 'cell-paste-border-left', id);
+  if (type === 'up') {
+    addBorderClass(pasteCells, 'top', 'cell-paste-border-top', id);
+  }
+  if (type === 'down') {
+    addBorderClass(pasteCells, 'bottom', 'cell-paste-border-bottom', id);
+  }
+};
+exports.addClassBorderPasteCell = addClassBorderPasteCell;
+const removeClassBorderPasteCell = (pasteCells, type, id) => {
+  //  remove class border
+
+  removeBorderClass(pasteCells, 'bottom', 'cell-paste-border-bottom', id);
+  removeBorderClass(pasteCells, 'right', 'cell-paste-border-right', id);
+  removeBorderClass(pasteCells, 'top', 'cell-paste-border-top', id);
+  removeBorderClass(pasteCells, 'left', 'cell-paste-border-left', id);
+};
+exports.removeClassBorderPasteCell = removeClassBorderPasteCell;
+const addClassCellIndexSelected = (rowsSelected, id) => {
+  // thêm class selected vào ô STT
+  const table = document.querySelector(`#${id}`);
+  if (rowsSelected && rowsSelected.size > 0) {
+    const rowsSelectedArray = [...new Set([...rowsSelected].map(item => item.split("-")[0]))];
+    const rowsSelectedSelectors = rowsSelectedArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
+    const cellsSelectedIndex = table && rowsSelectedSelectors.length > 0 ? table?.querySelectorAll(rowsSelectedSelectors) : null;
+    if (cellsSelectedIndex) {
+      cellsSelectedIndex.forEach(cell => {
+        cell.classList.add('selected');
+      });
+    }
+  }
+};
+exports.addClassCellIndexSelected = addClassCellIndexSelected;
+const removeClassCellIndexSelected = (rowsSelected, id) => {
+  // thêm class selected vào ô STT
+  const table = document.querySelector(`#${id}`);
+  if (rowsSelected && rowsSelected.size > 0) {
+    const rowsSelectedArray = [...new Set([...rowsSelected].map(item => item.split("-")[0]))];
+    const rowsSelectedSelectors = rowsSelectedArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
+    const cellsSelectedIndex = table && rowsSelectedSelectors.length > 0 ? table?.querySelectorAll(rowsSelectedSelectors) : null;
+    if (cellsSelectedIndex) {
+      cellsSelectedIndex.forEach(cell => {
+        cell.classList.remove('selected');
+      });
+    }
+  }
+};
+exports.removeClassCellIndexSelected = removeClassCellIndexSelected;
+const showDraggingPoint = (selectedCells, id) => {
+  const row = getLastSelectCell(selectedCells).row;
+  const col = getLastSelectCell(selectedCells).col;
+  const table = document.querySelector(`#${id}`);
+  const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
+  const point = cell?.querySelector('.dragging-point');
+  if (point) {
+    point.classList.add('show');
+    point.classList.remove('hidden');
+  }
+};
+exports.showDraggingPoint = showDraggingPoint;
+const hideDraggingPoint = (selectedCells, id) => {
+  const table = document.querySelector(`#${id}`);
+
+  // const point = table?.querySelector('.dragging-point.show')
+  // const points = document.querySelectorAll('.dragging-point.show')
+  const points = table?.querySelectorAll('.dragging-point.show');
+
+  // if (point) {
+  //   point.classList.add('hidden')
+  //   point.classList.remove('show')
+  // }
+
+  if (points && points.length > 0) {
+    points.forEach(cell => {
+      cell.classList.add('hidden');
+      cell.classList.remove('show');
+    });
+  }
 };
-exports.onRemoveClassSelectedCell = onRemoveClassSelectedCell;
+exports.hideDraggingPoint = hideDraggingPoint;