es-grid-template 1.4.4 → 1.4.6

package/es/grid-component/table/Group.d.ts

@@ -10,6 +10,7 @@ type Props<T> = GridTableProps<T> & {
     triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[]) => void;
     triggerFilter?: (queries: any) => void;
     setTooltipContent?: any;
+    scrollHeight?: number;
 };
 declare const Group: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Group;

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

@@ -11,8 +11,10 @@ import { Collapse2, Expand2 } from "becoxy-icons";
 const Group = props => {
   const {
     t,
+    id,
     columns,
     height,
+    scrollHeight,
     style,
     rowHoverable,
     groupAble,
@@ -97,11 +99,14 @@ const Group = props => {
   };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     $heightTable: height,
+    $heightScroll: scrollHeight,
     style: {
       position: 'relative'
-    }
+    },
+    id: id
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
     t: t,
+    id: id,
     columns: columns,
     style: {
       ...style,

package/lib/grid-component/EditableCell.js

@@ -69,7 +69,8 @@ const EditableCell = props => {
   const dateTimePickerRef = _react.default.useRef(null);
   // const timePickerRef = React.useRef(null);
 
-  const cellFormat = column?.format ? typeof column?.format === 'function' ? column?.format?.(record) : column?.format : format;
+  const colFormat = typeof column?.format === 'function' ? column?.format(record) : column?.format;
+  const cellFormat = (0, _hooks.getFormat)(colFormat, format);
   const inputNode = (value, onChange) => {
     const dateFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
     const date = !(0, _hooks.isEmpty)(value) ? (0, _hooks.convertDateToDayjs)(new Date(value), dateFormat) : null;

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 interface GridProps {
-    $heightTable?: number | string;
+    $heightTable?: number;
+    $heightScroll?: number;
 }
 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);
+})(["height:", ";.ui-rc-table.ui-rc-table-virtual.ui-rc-table-scroll-horizontal{.ui-rc-table-container{padding-bottom:8px;border-bottom:1px solid #e0e0e0;}}.ui-rc-table-container{.ui-rc-table-tbody-virtual.ui-rc-table-tbody{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 ? `${props.$heightTable}px` : undefined, props => props.$heightScroll ? `${props.$heightScroll}px` : undefined);

package/lib/grid-component/InternalTable.js

@@ -33,6 +33,7 @@ var _modifiers = require("@dnd-kit/modifiers");
 var _core = require("@dnd-kit/core");
 var _sortable = require("@dnd-kit/sortable");
 var _reactResizable = require("react-resizable");
+var _faker = require("@faker-js/faker");
 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 {Resizable} from "react-resizable";
@@ -153,6 +154,7 @@ const SortableHeaderCell = ({
 const InternalTable = props => {
   const {
     t,
+    id: tableId,
     // columns,
     columns: propsColumns,
     lang,
@@ -179,11 +181,37 @@ const InternalTable = props => {
     commandClick,
     commandSettings,
     pagination,
+    height: propsHeight,
+    summary,
     ...rest
   } = props;
+  const id = _react.default.useMemo(() => {
+    return tableId ?? _faker.faker.string.alpha(20);
+    // return tableId ?? newGuid()
+  }, [tableId]);
   const rowKey = _react.default.useMemo(() => {
-    return editAble ? 'rowId' : propRowKey ?? 'rowId';
-  }, [propRowKey, editAble]);
+    return propRowKey ?? 'rowId';
+  }, [propRowKey]);
+  const [scrollHeight, setHeight] = (0, _react.useState)(0);
+
+  // const heightt = React.useMemo(() => {
+  //
+  //   const table = document.querySelector(`#${id}`)
+  //   console.log('table', table)
+  //
+  //   const title: any = table?.querySelector(`.ui-rc-table-title`)
+  //
+  //   console.log('title', title)
+  //
+  //   if (title) {
+  //     const titleHeight = title.offsetHeight;
+  //     console.log('Chiều cao:', titleHeight);
+  //   }
+  //
+  //   return (height ?? 0) - (title ? title.offsetHeight : 0)
+  //
+  // }, [height, id])
+
   const local = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
   const buddhistLocale = {
     ...local,
@@ -205,6 +233,19 @@ const InternalTable = props => {
     return (0, _hooks.addRowIdArray)(dataSource);
   }, [dataSource]);
   const [columns, setColumns] = _react.default.useState([]);
+  _react.default.useEffect(() => {
+    // setTimeout(() => {
+    const table = document.querySelector(`#${id}`);
+    const title = table?.querySelector(`.ui-rc-table-title`);
+    const header = table?.querySelector(`.ui-rc-table-header`);
+    const paginationE = table?.querySelector(`.ui-rc-pagination`);
+    const toolbar = table?.querySelector(`.ui-rc-toolbar-bottom`);
+    const summaryE = table?.querySelector(`.ui-rc-table-summary`);
+    const scrollbar = table?.querySelector(`.ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal`);
+    const hhh = (propsHeight ?? 0) - (title ? title.offsetHeight : 0) - (header ? header.offsetHeight : 0) - (paginationE ? paginationE.offsetHeight : 0) - (toolbar ? toolbar.offsetHeight : 0) - (summaryE ? summaryE.offsetHeight : 0) - (scrollbar ? scrollbar.offsetHeight : 0);
+    setHeight(hhh);
+    // })
+  }, [id, propsHeight, columns]);
   const tableRef = _react.default.useRef(null);
   _react.default.useEffect(() => {
     setColumns(propsColumns);
@@ -494,26 +535,46 @@ const InternalTable = props => {
       if (column === SELECTION_COLUMN) {
         return SELECTION_COLUMN;
       }
-      if (find) {
+      const tmpColumn = {
+        ...column,
+        dataIndex: column.field ?? column.dataIndex,
+        key: column.field ?? column.key,
+        title: /*#__PURE__*/_react.default.createElement(SortableHeaderCell, {
+          columnKey: column.field
+        }, /*#__PURE__*/_react.default.createElement(_HeaderContent.default, {
+          column: {
+            ...column
+          },
+          t: t
+        })),
+        ellipsis: column.ellipsis !== false,
+        align: column.textAlign ?? column.align,
+        fixed: column.fixedType ?? column.fixed,
+        isSummary: column.isSummary ?? column.haveSum,
+        hidden: column.hidden ?? column.visible === false
+      };
+
+      // Xử lý đệ quy cho children
+      if (column.children?.length) {
         return {
-          ...find
+          ...column,
+          ...tmpColumn,
+          children: transformColumns(column.children)
         };
       }
-      if (!find) {
+      if (find) {
         return {
-          ...column
+          ...find
         };
       }
-
-      // Xử lý đệ quy cho children
-      if (column.children?.length) {
+      if (!find) {
         return {
           ...column,
-          children: transformColumns(column.children)
+          ...tmpColumn
         };
       }
     });
-  }, [convertColumns]);
+  }, [convertColumns, t]);
   const mergedColumns = _react.default.useMemo(() => {
     return transformColumns(columns);
   }, [columns, transformColumns]);
@@ -607,13 +668,13 @@ const InternalTable = props => {
   };
   const triggerCommandClick = args => {
     const {
-      id,
+      id: idCommand,
       rowId,
       rowData,
       index
     } = args;
     const tmpData = [...mergedData];
-    if (id === 'DELETE') {
+    if (idCommand === 'DELETE') {
       // bật modal confirm
       if (commandSettings && commandSettings.confirmDialog) {
         MySwal.fire({
@@ -699,7 +760,7 @@ const InternalTable = props => {
           }
           if (commandClick) {
             commandClick({
-              id,
+              id: idCommand,
               rowId,
               rowData,
               index,
@@ -710,7 +771,7 @@ const InternalTable = props => {
           // server
           if (commandClick) {
             commandClick({
-              id,
+              id: idCommand,
               rowId,
               rowData,
               index,
@@ -771,6 +832,7 @@ const InternalTable = props => {
     value: dragIndex
   }, /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
     t: t,
+    id: id,
     locale: locale,
     tableRef: tableRef,
     dataSource: mergedData,
@@ -790,7 +852,17 @@ const InternalTable = props => {
     groupAble: groupAble,
     groupColumns: groupColumns,
     commandClick: triggerCommandClick,
-    pagination: pagination,
+    summary: summary,
+    pagination: pagination
+    // scroll={{ y: 300 - 41 - 7 }} // scroll height auto, không quá  600
+    // scroll={{ y: scrollHeight - (summary ? 0 : 7) }} // scroll height auto, không quá  600
+    ,
+    scroll: {
+      y: scrollHeight - (summary ? 0 : 0)
+    } // scroll height auto, không quá  600
+    ,
+    height: propsHeight,
+    scrollHeight: scrollHeight,
     components: {
       header: {
         cell: ResizableTitle

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

@@ -121,8 +121,11 @@ export declare const sortedSetASC: (setValue: any) => Set<unknown>;
 export declare const sortedSetDSC: (setValue: any) => Set<unknown>;
 export declare function getBottomRowCells(cellSet: any): any[];
 export declare function getCellsByPosition(cellSet: any, position?: string): any[];
+export declare function getCellsByPosition2(cellSet: any, position?: string): any[];
 export declare const addBorderClass: (selectedCells: any, type: string, className: string, id?: string, nextCellRight?: boolean) => void;
 export declare const removeBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
+export declare const addBorderPasteClass: (selectedCells: any, type: string, className: string, id?: string, nextCellRight?: boolean) => void;
+export declare const removeBorderPasteClass: (selectedCells: any, type: string, className: string, id?: string) => void;
 export declare const removeBorderClass2: (className: string, id?: string) => void;
 export declare const onAddBgSelectedCell: (selectedCells: any, id?: string, isFocusCellIndex?: boolean) => void;
 export declare const onRemoveBgSelectedCell: (selectedCells: any, id?: string, rowsSelected?: any) => void;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.addRowIdArray = exports.addClassCellIndexSelected = exports.addClassBorderPasteCell = exports.addBorderClass = void 0;
+exports.addRowIdArray = exports.addClassCellIndexSelected = exports.addClassBorderPasteCell = exports.addBorderPasteClass = exports.addBorderClass = void 0;
 exports.addRows8 = addRows8;
 exports.addRowsUp = addRowsUp;
 exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = exports.checkChild = exports.buildConnectedRegions = void 0;
@@ -16,6 +16,7 @@ exports.findAllChildrenKeys = findAllChildrenKeys;
 exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemPath = exports.findItemByKey = void 0;
 exports.getBottomRowCells = getBottomRowCells;
 exports.getCellsByPosition = getCellsByPosition;
+exports.getCellsByPosition2 = getCellsByPosition2;
 exports.getFormat = exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
 exports.hideDraggingPoint = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
@@ -28,7 +29,7 @@ exports.isEmpty = exports.isEditable = exports.isDisable = void 0;
 exports.isEqualSet = isEqualSet;
 exports.isRangeCell = 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.showDraggingPoint = exports.shouldInclude = exports.removeFieldRecursive = exports.removeColumns = exports.removeClassCellIndexSelected = exports.removeClassBorderPasteCell = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onRemoveBgCellIndex = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.onAddBgCellIndex = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = exports.isSelectedCell = 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.removeBorderPasteClass = exports.removeBorderClass2 = exports.removeBorderClass = exports.parseCells = exports.parseBooleanToValue = exports.onRemoveBorderSelectedCell = exports.onRemoveBgSelectedCell = exports.onRemoveBgCellIndex = exports.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.onAddBgCellIndex = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = exports.isSelectedCell = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment/moment"));
 var _uuid = require("uuid");
@@ -1565,6 +1566,61 @@ function getBottomRowCells(cellSet) {
   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}-${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}`);
+      }
+    case "right":
+      {
+        const maxCol = Math.max(...cells.map(c => c.col));
+        return cells.filter(c => c.col === maxCol).map(c => c.key);
+      }
+    default:
+      return [];
+  }
+}
+function getCellsByPosition2(cellSet, position = "bottom") {
   const cells = Array.from(cellSet).map(key => {
     const [row, col] = key.split("-").map(Number);
     return {
@@ -1635,25 +1691,34 @@ const addBorderClass = (selectedCells, type, className, id, nextCellRight) => {
       }
     });
   }
-  if (type === 'left') {
-    const selectorsCells2 = typeCells.map(pos => {
-      const [row, col] = pos.split('-');
-      return `[data-row-index="${row}"][data-col-index="${Number(col) + 1}"]`;
-    });
-    const fullSelector = selectorsCells2.map(s => `.ui-rc-table-cell-fix-right-first${s}`).join(', ');
-    const cellsFilter2 = typeCells.length > 0 ? table?.querySelectorAll(fullSelector) : null;
-    if (cellsFilter2 && cellsFilter2.length > 0) {
-      cellsFilter2.forEach(cell => {
-        // cell.classList.add('has-before');
-        cell.classList.add('cell-border-left');
-      });
-    }
-  }
+
+  // ui-rc-table-tbody-virtual-scrollbar ui-rc-table-tbody-virtual-scrollbar-horizontal ui-rc-table-tbody-virtual-scrollbar-visible
+
+  // if (type === 'left') {
+  //
+  //   const selectorsCells2 = typeCells.map((pos: any) => {
+  //     const [row, col] = pos.split('-');
+  //     return `[data-row-index="${row}"][data-col-index="${Number(col) + 1}"]`;
+  //   });
+  //
+  //   const fullSelector = selectorsCells2.map(s => `.ui-rc-table-cell-fix-right-first${s}`).join(', ');
+  //
+  //   const cellsFilter2 = typeCells.length > 0 ? table?.querySelectorAll(fullSelector) : null
+  //
+  //   if (cellsFilter2 && cellsFilter2.length > 0) {
+  //
+  //     cellsFilter2.forEach(cell => {
+  //       // cell.classList.add('has-before');
+  //       cell.classList.add('cell-border-left');
+  //     });
+  //   }
+  //
+  // }
 };
 exports.addBorderClass = addBorderClass;
 const removeBorderClass = (selectedCells, type, className, id) => {
   const table = document.querySelector(`#${id}`);
-  const typeCells = getCellsByPosition(selectedCells, type);
+  const typeCells = getCellsByPosition2(selectedCells, type);
   const selectorsCells = typeCells.map(pos => {
     const [row, col] = pos.split('-');
     return `[data-row-index="${row}"][data-col-index="${col}"]`;
@@ -1666,6 +1731,62 @@ const removeBorderClass = (selectedCells, type, className, id) => {
   }
 };
 exports.removeBorderClass = removeBorderClass;
+const addBorderPasteClass = (selectedCells, type, className, id, nextCellRight) => {
+  const table = document.querySelector(`#${id}`);
+  const typeCells = getCellsByPosition2(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);
+      if (nextCellRight) {
+        cell.style.zIndex = 1;
+      }
+    });
+  }
+
+  // ui-rc-table-tbody-virtual-scrollbar ui-rc-table-tbody-virtual-scrollbar-horizontal ui-rc-table-tbody-virtual-scrollbar-visible
+
+  // if (type === 'left') {
+  //
+  //   const selectorsCells2 = typeCells.map((pos: any) => {
+  //     const [row, col] = pos.split('-');
+  //     return `[data-row-index="${row}"][data-col-index="${Number(col) + 1}"]`;
+  //   });
+  //
+  //   const fullSelector = selectorsCells2.map(s => `.ui-rc-table-cell-fix-right-first${s}`).join(', ');
+  //
+  //   const cellsFilter2 = typeCells.length > 0 ? table?.querySelectorAll(fullSelector) : null
+  //
+  //   if (cellsFilter2 && cellsFilter2.length > 0) {
+  //
+  //     cellsFilter2.forEach(cell => {
+  //       // cell.classList.add('has-before');
+  //       cell.classList.add('cell-border-left');
+  //     });
+  //   }
+  //
+  // }
+};
+exports.addBorderPasteClass = addBorderPasteClass;
+const removeBorderPasteClass = (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.removeBorderPasteClass = removeBorderPasteClass;
 const removeBorderClass2 = (className, id) => {
   const table = document.querySelector(`#${id}`);
   const cellsFilter = table ? table?.querySelectorAll(`.ui-rc-table-cell.${className}`) : null;
@@ -1800,9 +1921,7 @@ const onAddBorderSelectedCell = (selectedCells, id) => {
   const col = getLastSelectCell(selectedCells).col;
   const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
   const nextCellLeft = table?.querySelector(`.ui-rc-table-cell.ui-rc-table-cell-fix-left[data-row-index="${row}"][data-col-index="${col + 1}"]`);
-  // const nextCellRight: any = table?.querySelector(`.ui-rc-table-cell.ui-rc-table-cell-fix-right[data-row-index="${row}"][data-col-index="${col + 1}"]`)
-
-  console.log('nextCell', nextCellLeft);
+  const nextCellRight = table?.querySelector(`.ui-rc-table-cell.ui-rc-table-cell-fix-right[data-row-index="${row}"][data-col-index="${col + 1}"]`);
   if (cell) {
     cell.style.zIndex = nextCellLeft ? 3 : 1;
   }
@@ -1817,7 +1936,7 @@ const onAddBorderSelectedCell = (selectedCells, id) => {
   //  thêm class border selected
 
   addBorderClass(selectedCells, 'bottom', 'cell-border-bottom', id);
-  addBorderClass(selectedCells, 'right', 'cell-border-right', id);
+  addBorderClass(selectedCells, 'right', 'cell-border-right', id, !!nextCellRight);
   addBorderClass(selectedCells, 'top', 'cell-border-top', id);
   addBorderClass(selectedCells, 'left', 'cell-border-left', id);
 };
@@ -1848,13 +1967,13 @@ exports.onRemoveBorderSelectedCell = onRemoveBorderSelectedCell;
 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);
+  addBorderPasteClass(pasteCells, 'right', 'cell-paste-border-right', id);
+  addBorderPasteClass(pasteCells, 'left', 'cell-paste-border-left', id);
   if (type === 'up') {
-    addBorderClass(pasteCells, 'top', 'cell-paste-border-top', id);
+    addBorderPasteClass(pasteCells, 'top', 'cell-paste-border-top', id);
   }
   if (type === 'down') {
-    addBorderClass(pasteCells, 'bottom', 'cell-paste-border-bottom', id);
+    addBorderPasteClass(pasteCells, 'bottom', 'cell-paste-border-bottom', id);
   }
 };
 exports.addClassBorderPasteCell = addClassBorderPasteCell;