es-grid-template 1.3.7 → 1.3.8

package/lib/grid-component/EditableCell.js

@@ -64,8 +64,9 @@ 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 inputNode = (value, onChange) => {
-    const dateFormat = (0, _hooks.getDatepickerFormat)(editType, column);
+    const dateFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
     const date = !(0, _hooks.isEmpty)(value) ? (0, _hooks.convertDateToDayjs)(new Date(value), dateFormat) : null;
     const maxDate = (0, _hooks.convertDateToDayjs)(column.maxDate, dateFormat) ?? undefined;
     const minDate = (0, _hooks.convertDateToDayjs)(column.minDate, dateFormat) ?? undefined;
@@ -207,7 +208,7 @@ const EditableCell = props => {
       case 'month':
       case 'quarter':
       case 'year':
-        const pickerFormat = (0, _hooks.getDatepickerFormat)(editType, column);
+        const pickerFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
         const maxDateValue1 = !(0, _hooks.isEmpty)(column.maxDate) ? (0, _dayjs.default)(column.maxDate, pickerFormat) : undefined;
         const minDateValue1 = !(0, _hooks.isEmpty)(column.minDate) ? (0, _dayjs.default)(column.minDate, pickerFormat) : undefined;
         return /*#__PURE__*/_react.default.createElement(_antd.DatePicker, {
@@ -228,7 +229,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container'
         });
       case 'week':
-        const weekFormat = (0, _hooks.getDatepickerFormat)(editType, column);
+        const weekFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
         const maxWeekValue = !(0, _hooks.isEmpty)(column.maxDate) ? (0, _dayjs.default)(column.maxDate, weekFormat) : undefined;
         const minWeekValue = !(0, _hooks.isEmpty)(column.minDate) ? (0, _dayjs.default)(column.minDate, weekFormat) : undefined;
         return /*#__PURE__*/_react.default.createElement(_antd.DatePicker, {
@@ -245,7 +246,7 @@ const EditableCell = props => {
           popupClassName: 'be-popup-container'
         });
       case 'time':
-        const timeFormat = (0, _hooks.getDatepickerFormat)(editType, column);
+        const timeFormat = (0, _hooks.getDatepickerFormat)(editType, cellFormat);
         const maxTimeValue = !(0, _hooks.isEmpty)(column.maxTime) ? (0, _dayjs.default)(column.maxTime).format(timeFormat) : null;
         const minTimeValue = !(0, _hooks.isEmpty)(column.minTime) ? (0, _dayjs.default)(column.minTime).format(timeFormat) : null;
 
@@ -760,8 +761,8 @@ const EditableCell = props => {
       //   )
 
       case 'numeric':
-        const thousandSeparator = column.format?.thousandSeparator ? column.format?.thousandSeparator : format?.thousandSeparator;
-        const decimalSeparator = column.format?.decimalSeparator ? column.format?.decimalSeparator : format?.decimalSeparator;
+        const thousandSeparator = cellFormat?.thousandSeparator;
+        const decimalSeparator = cellFormat?.decimalSeparator;
 
         // let floatValue = value
 
@@ -769,11 +770,11 @@ const EditableCell = props => {
           value,
           thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
           decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
-          decimalScale: !(0, _hooks.isEmpty)(column.format?.decimalScale) ? column.format?.decimalScale : undefined,
-          fixedDecimalScale: !(0, _hooks.isEmpty)(column.format?.fixedDecimalScale) ? column.format?.fixedDecimalScale : false,
-          allowNegative: column.format?.allowNegative ?? true,
-          prefix: column.format?.prefix ?? undefined,
-          suffix: column.format?.suffix ?? undefined
+          decimalScale: cellFormat?.decimalScale ?? undefined,
+          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false,
+          allowNegative: cellFormat?.allowNegative ?? true,
+          prefix: cellFormat?.prefix ?? undefined,
+          suffix: cellFormat?.suffix ?? undefined
         };
         return /*#__PURE__*/_react.default.createElement(_reactNumericComponent.NumericFormat, (0, _extends2.default)({
           id: `col${indexCol}-record${indexRow}`

package/lib/grid-component/TableGrid.js

@@ -408,8 +408,8 @@ const TableGrid = props => {
       hideSelectAll: !type || type === 'single' || mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
     }
 
-    // onScroll={() => {
-    //   setMenuVisible(false)
+    // onScroll={(event) => {
+    //   console.log('event', event)
     // }}
     ,
 
@@ -423,20 +423,23 @@ 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)(!!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;
+        const cellFormat = col.format ? typeof col.format === 'function' ? col.format({}) : col.format : format;
+        const thousandSeparator = cellFormat?.thousandSeparator;
+        const decimalSeparator = cellFormat?.decimalSeparator;
+
+        // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
+        const dec = cellFormat?.decimalScale;
         const sumValue = col.type === 'number' ? (0, _hooks.sumDataByField)(dataSource, col?.key) : 0;
         const value = !(0, _hooks.isEmpty)(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
         const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
         const numericFormatProps = {
           thousandSeparator: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
           decimalSeparator: (0, _hooks.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
-          allowNegative: (col.format?.allowNegative ? col.format?.allowNegative : format?.allowNegative) ?? false,
-          prefix: col.format?.prefix ? col.format?.prefix : format?.prefix,
-          suffix: col.format?.suffix ? col.format?.suffix : format?.suffix,
+          allowNegative: cellFormat?.allowNegative ?? false,
+          prefix: cellFormat?.prefix,
+          suffix: cellFormat?.suffix,
           decimalScale: dec,
-          fixedDecimalScale: (col.format?.fixedDecimalScale ? col.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
+          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
         };
         return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Cell, {
           key: col.key,

package/lib/grid-component/hooks/columns/index.d.ts

@@ -6,4 +6,4 @@ export declare function flatColumns<RecordType>(columns: ColumnsTable<RecordType
 export declare function flatColumns2<RecordType>(columns: ColumnsTable<RecordType>): ColumnsTable<RecordType>;
 export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, format?: IFormat) => any;
 export declare const renderContent: <T>(column: ColumnTable<T>, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
-export declare const renderFilter: <RecordType>(column: ColumnTable<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any) => React.JSX.Element;
+export declare const renderFilter: <RecordType>(column: ColumnTable<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any, format?: IFormat) => React.JSX.Element;

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

@@ -81,9 +81,9 @@ function flatColumns2(columns
 const getValueCell = (column, value, format) => {
   switch (column?.type) {
     case 'number':
-      const thousandSeparator = column?.format?.thousandSeparator ? column?.format?.thousandSeparator : format?.thousandSeparator;
-      const decimalSeparator = column?.format?.decimalSeparator ? column?.format?.decimalSeparator : format?.decimalSeparator;
-      const dec = column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale;
+      const thousandSeparator = format?.thousandSeparator;
+      const decimalSeparator = format?.decimalSeparator;
+      const dec = format?.decimalScale;
 
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
@@ -92,22 +92,22 @@ const getValueCell = (column, value, format) => {
       const numericFormatProps = {
         thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
         decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
-        allowNegative: (column?.format?.allowNegative ? column?.format?.allowNegative : format?.allowNegative) ?? true,
-        prefix: column?.format?.prefix ? column?.format?.prefix : format?.prefix,
-        suffix: column?.format?.suffix ? column?.format?.suffix : format?.suffix,
-        decimalScale: column?.format?.decimalScale || column?.format?.decimalScale === 0 ? column?.format?.decimalScale : format?.decimalScale,
-        fixedDecimalScale: (column?.format?.fixedDecimalScale ? column?.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
+        allowNegative: format?.allowNegative ?? true,
+        prefix: format?.prefix,
+        suffix: format?.suffix,
+        decimalScale: dec,
+        fixedDecimalScale: format?.fixedDecimalScale ?? false
       };
       return !(0, _utils.isEmpty)(contentNumber) ? (0, _reactNumericComponent.numericFormatter)(contentNumber, numericFormatProps) : '';
     case 'date':
-      return value ? (0, _dayjs.default)(value).format(column?.format?.dateFormat ?? format?.dateFormat ?? 'DD/MM/YYYY') : '';
+      return value ? (0, _dayjs.default)(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
     case 'time':
       return value ? value : '';
     case 'year':
       const year = value ? (0, _moment.default)(value).format('yyyy') : '';
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, year);
     case 'datetime':
-      return value ? (0, _moment.default)(value).format(column?.format?.datetimeFormat ?? format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
+      return value ? (0, _moment.default)(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
     case 'boolean':
       return value ? 'true' : 'false';
     case 'color':
@@ -148,10 +148,11 @@ const renderContent = (column, value, record, index, format) => {
   }) : column.template : content);
 };
 exports.renderContent = renderContent;
-const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t) => {
+const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t, format) => {
+  const cellFormat = column.format ? typeof column.format === 'function' ? column.format({}) : column.format : format;
   const type = (0, _utils.getTypeFilter)(column);
-  const dateFormat = (0, _utils.getDatepickerFormat)(column?.typeFilter ?? column?.type, column) ?? 'DD/MM/YYYY';
-  const dateRangeFormat = (0, _utils.getDatepickerFormat)(column?.type, column) ?? 'DD/MM/YYYY';
+  const dateFormat = (0, _utils.getDatepickerFormat)(column?.typeFilter ?? column?.type, cellFormat) ?? 'DD/MM/YYYY';
+  const dateRangeFormat = (0, _utils.getDatepickerFormat)(column?.type, cellFormat) ?? 'DD/MM/YYYY';
   const find = dataSourceFilter?.find(it => it.key === column?.field);
   const options = find ? find.data : [];
   switch (type) {

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

@@ -288,23 +288,24 @@ const useColumns = config => {
             };
           },
           render: (value, record, rowIndex) => {
+            const cellFormat = col.format ? typeof col.format === 'function' ? col.format(record) : col.format : format;
             if (groupSetting && groupSetting.hiddenColumnGroup === false) {
               if (record.children) {
-                return (0, _columns.renderContent)(col, value, record, rowIndex, format);
+                return (0, _columns.renderContent)(col, value, record, rowIndex, cellFormat);
               }
               if (groupColumns?.includes(col.field)) {
                 return '';
               }
-              return (0, _columns.renderContent)(col, value, record, rowIndex, format);
+              return (0, _columns.renderContent)(col, value, record, rowIndex, cellFormat);
             }
             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 (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, cellFormat);
               }
-              return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", (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, cellFormat));
             }
-            return (0, _columns.renderContent)(col, value, record, rowIndex, format);
+            return (0, _columns.renderContent)(col, value, record, rowIndex, cellFormat);
           },
           hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(col.field) ? true : transformedColumn.hidden
         };

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

@@ -1,7 +1,7 @@
 import type * as React from "react";
 import dayjs from "dayjs";
 import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
-import type { ColumnTable, GetRowKey } from "../type";
+import type { ColumnTable, GetRowKey, IFormat } from "../type";
 import type { SelectionSettings } from "../type";
 import type { AnyObject } from "../type";
 import type { Key } from "react";
@@ -21,7 +21,7 @@ export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): string[];
 export declare const updateColumns: (columns: any[], includes: string[]) => any[];
 export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string[]) => any[];
-export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, col: ColumnTable<any>) => string;
+export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
 export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
 export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
 export declare const updateArrayByKey: (arr: any[], element: any, key: string) => any[];
@@ -108,8 +108,11 @@ 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 removeBorderClass2: (className: string, id?: string) => void;
+export declare const onAddBgSelectedCell: (selectedCells: any, id?: string) => void;
+export declare const onAddBorderSelectedCell: (selectedCells: any, id?: string) => void;
+export declare const onRemoveBgSelectedCell: (selectedCells: any, id?: string, rowsSelected?: any) => void;
+export declare const onRemoveBorderSelectedCell: (selectedCells: any, id?: string) => 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;

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

@@ -28,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.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;
+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.onAddBorderSelectedCell = exports.onAddBgSelectedCell = exports.newGuid = exports.mergedSets = exports.isTopMostInRegion = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment/moment"));
 var _uuid = require("uuid");
@@ -216,24 +216,24 @@ const updateColumnsByGroup = (columns, columnsGroup) => {
   });
 };
 exports.updateColumnsByGroup = updateColumnsByGroup;
-const getDatepickerFormat = (type, col) => {
+const getDatepickerFormat = (type, format) => {
   const typeFormat = type ? type.toLowerCase() : '';
   switch (typeFormat) {
     case "date":
     case "daterange":
-      return col.format?.dateFormat ? col.format?.dateFormat : 'DD/MM/YYYY';
+      return format?.dateFormat ?? 'DD/MM/YYYY';
     case "datetime":
-      return col.format?.datetimeFormat ? col.format?.datetimeFormat : 'DD/MM/YYYY HH:mm';
+      return format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm';
     case "week":
-      return col.format?.weekFormat ? col.format?.weekFormat : 'DD/MM';
+      return format?.weekFormat ?? 'DD/MM';
     case "month":
-      return col.format?.monthFormat ? col.format?.monthFormat : 'MM/YYYY';
+      return format?.monthFormat ?? 'MM/YYYY';
     case "quarter":
-      return col.format?.dateFormat ? col.format?.dateFormat : 'DD/MM/YYYY';
+      return format?.dateFormat ?? 'DD/MM/YYYY';
     case "year":
-      return col.format?.yearFormat ? col.format?.yearFormat : 'YYYY';
+      return format?.yearFormat ?? 'YYYY';
     case "time":
-      return col.format?.timeFormat ? col.format?.timeFormat : 'HH:mm';
+      return format?.timeFormat ?? 'HH:mm';
     default:
       return 'DD/MM/YYYY';
   }
@@ -1630,7 +1630,17 @@ const removeBorderClass = (selectedCells, type, className, id) => {
   }
 };
 exports.removeBorderClass = removeBorderClass;
-const onAddClassBgSelectedCell = (selectedCells, id) => {
+const removeBorderClass2 = (className, id) => {
+  const table = document.querySelector(`#${id}`);
+  const cellsFilter = table ? table?.querySelectorAll(`.ui-rc-table-cell.${className}`) : null;
+  if (cellsFilter && cellsFilter.length > 0) {
+    cellsFilter.forEach(cell => {
+      cell.classList.remove(className);
+    });
+  }
+};
+exports.removeBorderClass2 = removeBorderClass2;
+const onAddBgSelectedCell = (selectedCells, id) => {
   const selectors = Array.from(selectedCells).map(pos => {
     const [row1, col1] = pos.split('-');
     return `[data-row-index="${row1}"][data-col-index="${col1}"]`;
@@ -1651,6 +1661,30 @@ const onAddClassBgSelectedCell = (selectedCells, id) => {
     });
   }
 
+  // // tăng z-index để hiển thị round point paste
+  // const row  = getLastSelectCell(selectedCells).row
+  // const col  = getLastSelectCell(selectedCells).col
+  // const cell: any = 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.onAddBgSelectedCell = onAddBgSelectedCell;
+const onAddBorderSelectedCell = (selectedCells, id) => {
+  const table = document.querySelector(`#${id}`);
+
   // tăng z-index để hiển thị round point paste
   const row = getLastSelectCell(selectedCells).row;
   const col = getLastSelectCell(selectedCells).col;
@@ -1669,26 +1703,16 @@ const onAddClassBgSelectedCell = (selectedCells, id) => {
   addBorderClass(selectedCells, 'top', 'cell-border-top', id);
   addBorderClass(selectedCells, 'left', 'cell-border-left', 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(", ");
+exports.onAddBorderSelectedCell = onAddBorderSelectedCell;
+const onRemoveBgSelectedCell = (selectedCells, id, rowsSelected) => {
   const table = document.querySelector(`#${id}`);
-  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');
-
+  const cells = table ? table?.querySelectorAll('.ui-rc-table-cell.selected') : null;
   if (cells) {
     cells.forEach(cell => {
       cell.classList.remove('selected');
     });
   }
-  const cellsIndex = table && rowsSelectors.length > 0 ? table?.querySelectorAll(rowsSelectors) : null;
+  const cellsIndex = table ? table?.querySelectorAll('.ui-rc-table-cell.focus') : null;
   if (cellsIndex) {
     cellsIndex.forEach(cell => {
       cell.classList.remove('focus');
@@ -1707,11 +1731,17 @@ const onRemoveClassSelectedCell = (selectedCells, id, rowsSelected) => {
       });
     }
   }
+};
+exports.onRemoveBgSelectedCell = onRemoveBgSelectedCell;
+const onRemoveBorderSelectedCell = (selectedCells, id) => {
+  const table = document.querySelector(`#${id}`);
 
   // xóa z-index về mặc định
 
   const row = getLastSelectCell(selectedCells).row;
   const col = getLastSelectCell(selectedCells).col;
+
+  // const cell: any = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`)
   const cell = table?.querySelector(`.ui-rc-table-cell[data-row-index="${row}"][data-col-index="${col}"]`);
   if (cell) {
     cell.style.zIndex = 0;
@@ -1722,12 +1752,16 @@ const onRemoveClassSelectedCell = (selectedCells, id, rowsSelected) => {
 
   //  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);
+  removeBorderClass2('cell-border-bottom', id);
+  removeBorderClass2('cell-border-top', id);
+  removeBorderClass2('cell-border-right', id);
+  removeBorderClass2('cell-border-left', 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;
+exports.onRemoveBorderSelectedCell = onRemoveBorderSelectedCell;
 const addClassBorderPasteCell = (pasteCells, type, id) => {
   //  thêm class border
 

package/lib/grid-component/styles.scss

@@ -5,13 +5,17 @@ $rowHoverBg: #FBDED6 !default;
 $rowSelectedBg: #FEF2EF !default;
 //$tableBorderColor: red !default;
 $tableBorderColor: #e0e0e0 !default;
+//$tableBorderColor: #C4C4C4 !default;
 //$tableBorderColor: #f0f0f0 !default;
 $border-radius: 6px !default;
 $border-selected-color: #0550C5 !default;
 $body-color: #ffffff !default;
-$cell-selected-bg: #E6EFFD !default;
-$cell-index-selected-bg: #0550C5 !default;
-$cell-index-focus-bg: #CEDBEF !default;
+//$cell-selected-bg: #E6EFFD !default;
+$cell-selected-bg: #F3F8FF !default;
+//$cell-index-selected-bg: #0550C5 !default;
+$cell-index-selected-bg: #1869E6 !default;
+//$cell-index-focus-bg: #CEDBEF !default;
+$cell-index-focus-bg: #E6EFFD !default;
 $rowSelectedHoverBg: 'ui-rc' !default;
 $boxShadowColor: rgba(5, 5, 5, 0.09) !default;
 $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
@@ -155,7 +159,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
       &.selected {
         //background: red;
-        background-color: $cell-selected-bg;
+        background-color: $cell-selected-bg !important;
       }
 
       .ui-rc-table-cell-content {
@@ -425,7 +429,7 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
           font-weight: 500;
         }
         &.selected {
-          background-color: $cell-index-selected-bg;
+          background-color: $cell-index-selected-bg !important;
           color: #fff;
           //font-weight: 500;
         }
@@ -695,12 +699,12 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
       .#{$prefix}-table-row {
         &.#{$prefix}-table-row-selected {
           >.#{$prefix}-table-cell {
-            background: #FEF2EF;
+            //background: #FEF2EF;
           }
         }
         >.#{$prefix}-table-cell {
           &.#{$prefix}-table-cell-row-hover {
-            background: #FBDED6;
+            //background: #FBDED6;
           }
         }