es-grid-template 1.4.7 → 1.4.9

package/es/grid-component/InternalTable.js

@@ -21,7 +21,7 @@ import withReactContent from "sweetalert2-react-content";
 import { Tooltip } from "react-tooltip";
 import classNames from "classnames";
 import HeaderContent from "./hooks/content/HeaderContent";
-import { ArrowDown, ArrowUp, FilterFill } from "becoxy-icons";
+import { ArrowDown, ArrowUp, FilterFill, SortCancel } from "becoxy-icons";
 import { Select } from "rc-master-ui";
 import { Button, Space } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
@@ -223,17 +223,17 @@ const InternalTable = props => {
   }, [dataSource]);
   const [columns, setColumns] = React.useState([]);
   React.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);
-    // })
+    if (propsHeight) {
+      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 > 0 ? hhh : 0);
+    }
   }, [id, propsHeight, columns, editAble]);
   const tableRef = React.useRef(null);
   React.useEffect(() => {
@@ -382,7 +382,8 @@ const InternalTable = props => {
           column: {
             ...column
           },
-          t: t
+          t: t,
+          id: id
         })),
         ellipsis: column.ellipsis !== false,
         align: column.textAlign ?? column.align,
@@ -440,7 +441,7 @@ const InternalTable = props => {
           const {
             sortOrder
           } = args;
-          return /*#__PURE__*/React.createElement(Fragment, null, !sortOrder && /*#__PURE__*/React.createElement(ArrowUp, {
+          return /*#__PURE__*/React.createElement(Fragment, null, !sortOrder && /*#__PURE__*/React.createElement(SortCancel, {
             fontSize: 15,
             style: {
               display: 'flex',
@@ -846,10 +847,14 @@ const InternalTable = props => {
     // 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: {
+
+    scroll: scrollHeight - (summary ? 1 : 1) < 0 ? {
+      y: 500
+    } : {
       y: scrollHeight - (summary ? 1 : 1)
     } // scroll height auto, không quá  600
     ,
+
     height: propsHeight,
     scrollHeight: scrollHeight,
     components: {
@@ -873,12 +878,12 @@ const InternalTable = props => {
       fontWeight: 500
     }
   }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/React.createElement(Tooltip, {
-    id: "tooltip-form-error",
+    id: `${id}-tooltip-form-error`,
     style: {
       zIndex: 1999
     }
   }), /*#__PURE__*/React.createElement(Tooltip, {
-    id: "tooltip-cell-content",
+    id: `${id}-tooltip-cell-content`,
     style: {
       zIndex: 1999
     },

package/es/grid-component/TableGrid.js

@@ -36,7 +36,9 @@ const convertFilters = filters => {
     filteredKeys,
     operator
   }) => {
-    if (!filteredKeys || filteredKeys.length === 0) return;
+    if (!filteredKeys || filteredKeys.length === 0) {
+      return;
+    }
     if (column?.typeFilter === "DateRange" && filteredKeys.length === 2) {
       result.push({
         key,
@@ -131,6 +133,7 @@ const useStyle = createStyles(({
 const EMPTY_LIST = [];
 const TableGrid = props => {
   const {
+    id,
     columns,
     tableRef,
     dataSource,
@@ -398,7 +401,7 @@ const TableGrid = props => {
       // selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
       selectedRowKeys: mergedSelectedKeys,
       // defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
-      defaultSelectedRowKeys: defaultSelectedRowKeys,
+      defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
       hideSelectAll: !type || type === 'single' || mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
     }
@@ -517,7 +520,7 @@ const TableGrid = props => {
     ,
     showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
   }, pagination)), bottomToolbar?.(), /*#__PURE__*/React.createElement(Tooltip, {
-    id: "tooltip-header",
+    id: `${id}-tooltip-header`,
     style: {
       zIndex: 1999
     }

package/es/grid-component/hooks/content/HeaderContent.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import type { ColumnTable } from "../../type";
 type Props = {
     t?: any;
+    id?: string;
     content?: string;
     column?: ColumnTable;
     template?: React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);

package/es/grid-component/hooks/content/HeaderContent.js

@@ -1,23 +1,10 @@
 import React, { Fragment } from "react";
 import classnames from "classnames";
-
-// import styled from "styled-components";
 import { getTemplate } from "../utils";
-// const TooltipStyle = styled.div`
-//   width: max-content;
-//   background-color: #444;
-//   color: white;
-//   font-size: 90%;
-//   padding: 4px 8px;
-//   border-radius: 4px;
-//   opacity: 0.9;
-//   z-index: 9999;
-//   max-width: 450px;
-// `
-
 const HeaderContent = props => {
   const {
-    t
+    t,
+    id
   } = props;
   const {
     headerTooltip,
@@ -31,43 +18,9 @@ const HeaderContent = props => {
   const tooltip = React.useMemo(() => {
     return headerTooltip ?? t ? t(columnGroupText ?? headerText) : columnGroupText ?? headerText;
   }, [columnGroupText, headerText, headerTooltip, t]);
-  //
-  //
-  // const [isOpen, setIsOpen] = useState(false)
-  //
-  // const { refs, floatingStyles, context } = useFloating({
-  //   open: isOpen,
-  //   onOpenChange: setIsOpen,
-  //   placement: "top",
-  //   whileElementsMounted: autoUpdate,
-  //   middleware: [
-  //     offset(5),
-  //     flip({
-  //       fallbackAxisSideDirection: "start"
-  //     }),
-  //     shift()
-  //   ]
-  // })
-  //
-  // const hover = useHover(context, { move: false })
-  // const focus = useFocus(context)
-  // const dismiss = useDismiss(context)
-  // const role = useRole(context, { role: "tooltip" })
-  //
-  // const { getReferenceProps, getFloatingProps } = useInteractions([
-  //   hover,
-  //   focus,
-  //   dismiss,
-  //   role
-  // ])
-
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-    // ref={refs.setReference}
-    // tabIndex={-1}
-    // style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'keep-all'}}
-    // style={{flex: 1}}
     className: classnames('', {}),
-    "data-tooltip-id": "tooltip-header",
+    "data-tooltip-id": `${id}-tooltip-header`,
     "data-tooltip-content": tooltip,
     "data-tooltip-offset": 16
   }, headerTemplate ? getTemplate(headerTemplate) : t ? t(text) : text));

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

@@ -506,10 +506,12 @@ export const getRowsPasteIndex = pasteRows => {
   return [...new Set(result)];
 };
 export function addRows8(arr, n) {
-  if (!Array.isArray(arr) || arr.length === 0) return {
-    combined: arr,
-    addedRows: []
-  };
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return {
+      combined: arr,
+      addedRows: []
+    };
+  }
   const m = arr.length;
   const numCols = arr[0].length;
   const addedRows = [];
@@ -643,10 +645,12 @@ export function addRows8(arr, n) {
 }
 export function addRowsUp(array, n) {
   const arr = array.reverse();
-  if (!Array.isArray(arr) || arr.length === 0) return {
-    combined: arr,
-    addedRows: []
-  };
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return {
+      combined: arr,
+      addedRows: []
+    };
+  }
   const m = arr.length;
   const numCols = arr[0].length;
   const addedRows = [];
@@ -1368,12 +1372,16 @@ export const buildConnectedRegions = cells => {
   ];
   const regions = [];
   for (const cell of cells) {
-    if (visited.has(cell.key)) continue;
+    if (visited.has(cell.key)) {
+      continue;
+    }
     const stack = [cell];
     const region = [];
     while (stack.length) {
       const current = stack.pop();
-      if (visited.has(current.key)) continue;
+      if (visited.has(current.key)) {
+        continue;
+      }
       visited.add(current.key);
       region.push(current);
       for (const [dr, dc] of directions) {
@@ -1421,9 +1429,13 @@ export function isRightMostInRegion(rowIndex, colIndex, listSelectCell) {
   return false;
 }
 export function isEqualSet(setA, setB) {
-  if (setA.size !== setB.size) return false;
+  if (setA.size !== setB.size) {
+    return false;
+  }
   for (const item of setA) {
-    if (!setB.has(item)) return false;
+    if (!setB.has(item)) {
+      return false;
+    }
   }
   return true;
 }
@@ -1489,7 +1501,9 @@ export function getCellsByPosition(cellSet, position = "bottom") {
         // 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
+        if (minRow === 0) {
+          return [];
+        } // Bỏ qua nếu rowIndex = 0
 
         return cells.filter(c => c.row === minRow).map(c => `${c.row}-${c.col}`);
       }
@@ -1509,7 +1523,9 @@ export function getCellsByPosition(cellSet, position = "bottom") {
         // 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
+        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}`);
@@ -1544,7 +1560,9 @@ export function getCellsByPosition2(cellSet, position = "bottom") {
         // 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
+        if (minRow === 0) {
+          return [];
+        } // Bỏ qua nếu rowIndex = 0
 
         return cells.filter(c => c.row === minRow).map(c => `${c.row - 1}-${c.col}`);
       }
@@ -1564,7 +1582,9 @@ export function getCellsByPosition2(cellSet, position = "bottom") {
         // 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
+        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}`);

package/es/grid-component/styles.scss

@@ -294,6 +294,16 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
     .#{$prefix}-table-cell {
 
+      .ui-rc-table-column-sorter{
+        line-height: normal !important;
+      }
+
+      &:hover {
+        .ui-rc-table-column-sorter-up.active {
+          opacity: 1 !important;
+        }
+      }
+
       .ui-rc-table-cell-content {
         line-height: 22px;
       }
@@ -508,12 +518,12 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
             pointer-events: none; /* không ảnh hưởng đến tương tác */
             z-index: 1;
           }
-          &.ui-rc-table-cell-fix-left {
+          &.ui-rc-table-cell-fix-left.ui-rc-table-cell-fix-left-last {
             &::after {
               left: -100%;
             }
           }
-          &.ui-rc-table-cell-fix-right {
+          &.ui-rc-table-cell-fix-right.ui-rc-table-cell-fix-right-first {
             &::after {
               left: 100%;
             }

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

@@ -976,7 +976,10 @@ const GridEdit = props => {
       // if (ref.current && tableId && !tableId.contains(event.target as Node)) {
 
       if (ref.current && tableBody && !tableBody.contains(event.target)) {
-        setEditingKey('');
+        // setEditingKey('')
+        setTimeout(() => {
+          setEditingKey('');
+        });
         isSelecting.current = false;
         startCell.current = null;
         // setSelectedCells(new Set())
@@ -990,9 +993,12 @@ const GridEdit = props => {
         setRangeCells(new Set());
       }
     };
+
+    // document.addEventListener('click', handleClickOutside)
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('touchstart', handleClickOutside);
     return () => {
+      // document.removeEventListener('click', handleClickOutside)
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('touchstart', handleClickOutside);
     };
@@ -1437,7 +1443,7 @@ const GridEdit = props => {
       if (target.closest('.dragging-point')) {
         e.stopPropagation();
         e.preventDefault();
-        return; // Không xử lý gì cả
+        // Không xử lý gì cả
       } else {
         // setStartSelectedCell({row, col})
 
@@ -1686,7 +1692,9 @@ const GridEdit = props => {
       startCell.current = null;
       e.stopPropagation();
     }
-    if (!isSelectingRow.current || !rowStart.current) return;
+    if (!isSelectingRow.current || !rowStart.current) {
+      return;
+    }
     // const { row: startRow, col: startCol } = rowStart.current;
     const {
       row: startRow,
@@ -2227,7 +2235,7 @@ const GridEdit = props => {
             disable: !isEditable(column, record)
           }),
           record,
-          column: column,
+          column,
           editType: getEditType(column, record),
           dataIndex: column.dataIndex,
           indexRow: rowNumber,
@@ -2441,7 +2449,6 @@ const GridEdit = props => {
     }
     if (args.item.key === 'DELETE_CONTENT') {
       handleDeleteContent();
-      return;
     }
   };
   const hideModalAddRow = () => {

package/lib/grid-component/InternalTable.js

@@ -234,17 +234,17 @@ const InternalTable = props => {
   }, [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);
-    // })
+    if (propsHeight) {
+      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 > 0 ? hhh : 0);
+    }
   }, [id, propsHeight, columns, editAble]);
   const tableRef = _react.default.useRef(null);
   _react.default.useEffect(() => {
@@ -393,7 +393,8 @@ const InternalTable = props => {
           column: {
             ...column
           },
-          t: t
+          t: t,
+          id: id
         })),
         ellipsis: column.ellipsis !== false,
         align: column.textAlign ?? column.align,
@@ -451,7 +452,7 @@ const InternalTable = props => {
           const {
             sortOrder
           } = args;
-          return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, !sortOrder && /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowUp, {
+          return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, !sortOrder && /*#__PURE__*/_react.default.createElement(_becoxyIcons.SortCancel, {
             fontSize: 15,
             style: {
               display: 'flex',
@@ -857,10 +858,14 @@ const InternalTable = props => {
     // 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: {
+
+    scroll: scrollHeight - (summary ? 1 : 1) < 0 ? {
+      y: 500
+    } : {
       y: scrollHeight - (summary ? 1 : 1)
     } // scroll height auto, không quá  600
     ,
+
     height: propsHeight,
     scrollHeight: scrollHeight,
     components: {
@@ -884,12 +889,12 @@ const InternalTable = props => {
       fontWeight: 500
     }
   }, columns[columns.findIndex(i => i.field === dragIndex.active)]?.headerText))), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
-    id: "tooltip-form-error",
+    id: `${id}-tooltip-form-error`,
     style: {
       zIndex: 1999
     }
   }), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
-    id: "tooltip-cell-content",
+    id: `${id}-tooltip-cell-content`,
     style: {
       zIndex: 1999
     },

package/lib/grid-component/TableGrid.js

@@ -36,7 +36,9 @@ const convertFilters = filters => {
     filteredKeys,
     operator
   }) => {
-    if (!filteredKeys || filteredKeys.length === 0) return;
+    if (!filteredKeys || filteredKeys.length === 0) {
+      return;
+    }
     if (column?.typeFilter === "DateRange" && filteredKeys.length === 2) {
       result.push({
         key,
@@ -131,6 +133,7 @@ const useStyle = (0, _antdStyle.createStyles)(({
 const EMPTY_LIST = [];
 const TableGrid = props => {
   const {
+    id,
     columns,
     tableRef,
     dataSource,
@@ -398,7 +401,7 @@ const TableGrid = props => {
       // selectedRowKeys: mode === 'checkbox' && type === 'single' ? selectedRowKeys : undefined,
       selectedRowKeys: mergedSelectedKeys,
       // defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
-      defaultSelectedRowKeys: defaultSelectedRowKeys,
+      defaultSelectedRowKeys,
       preserveSelectedRowKeys: true,
       hideSelectAll: !type || type === 'single' || mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
     }
@@ -517,7 +520,7 @@ const TableGrid = props => {
     ,
     showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
   }, pagination)), bottomToolbar?.(), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
-    id: "tooltip-header",
+    id: `${id}-tooltip-header`,
     style: {
       zIndex: 1999
     }

package/lib/grid-component/hooks/content/HeaderContent.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import type { ColumnTable } from "../../type";
 type Props = {
     t?: any;
+    id?: string;
     content?: string;
     column?: ColumnTable;
     template?: React.ReactElement | React.ReactNode | (() => React.ReactElement | React.ReactNode);

package/lib/grid-component/hooks/content/HeaderContent.js

@@ -10,23 +10,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../utils");
 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 styled from "styled-components";
-
-// const TooltipStyle = styled.div`
-//   width: max-content;
-//   background-color: #444;
-//   color: white;
-//   font-size: 90%;
-//   padding: 4px 8px;
-//   border-radius: 4px;
-//   opacity: 0.9;
-//   z-index: 9999;
-//   max-width: 450px;
-// `
-
 const HeaderContent = props => {
   const {
-    t
+    t,
+    id
   } = props;
   const {
     headerTooltip,
@@ -40,43 +27,9 @@ const HeaderContent = props => {
   const tooltip = _react.default.useMemo(() => {
     return headerTooltip ?? t ? t(columnGroupText ?? headerText) : columnGroupText ?? headerText;
   }, [columnGroupText, headerText, headerTooltip, t]);
-  //
-  //
-  // const [isOpen, setIsOpen] = useState(false)
-  //
-  // const { refs, floatingStyles, context } = useFloating({
-  //   open: isOpen,
-  //   onOpenChange: setIsOpen,
-  //   placement: "top",
-  //   whileElementsMounted: autoUpdate,
-  //   middleware: [
-  //     offset(5),
-  //     flip({
-  //       fallbackAxisSideDirection: "start"
-  //     }),
-  //     shift()
-  //   ]
-  // })
-  //
-  // const hover = useHover(context, { move: false })
-  // const focus = useFocus(context)
-  // const dismiss = useDismiss(context)
-  // const role = useRole(context, { role: "tooltip" })
-  //
-  // const { getReferenceProps, getFloatingProps } = useInteractions([
-  //   hover,
-  //   focus,
-  //   dismiss,
-  //   role
-  // ])
-
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    // ref={refs.setReference}
-    // tabIndex={-1}
-    // style={{flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', wordBreak: 'keep-all'}}
-    // style={{flex: 1}}
     className: (0, _classnames.default)('', {}),
-    "data-tooltip-id": "tooltip-header",
+    "data-tooltip-id": `${id}-tooltip-header`,
     "data-tooltip-content": tooltip,
     "data-tooltip-offset": 16
   }, headerTemplate ? (0, _utils.getTemplate)(headerTemplate) : t ? t(text) : text));

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

@@ -580,10 +580,12 @@ const getRowsPasteIndex = pasteRows => {
 };
 exports.getRowsPasteIndex = getRowsPasteIndex;
 function addRows8(arr, n) {
-  if (!Array.isArray(arr) || arr.length === 0) return {
-    combined: arr,
-    addedRows: []
-  };
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return {
+      combined: arr,
+      addedRows: []
+    };
+  }
   const m = arr.length;
   const numCols = arr[0].length;
   const addedRows = [];
@@ -717,10 +719,12 @@ function addRows8(arr, n) {
 }
 function addRowsUp(array, n) {
   const arr = array.reverse();
-  if (!Array.isArray(arr) || arr.length === 0) return {
-    combined: arr,
-    addedRows: []
-  };
+  if (!Array.isArray(arr) || arr.length === 0) {
+    return {
+      combined: arr,
+      addedRows: []
+    };
+  }
   const m = arr.length;
   const numCols = arr[0].length;
   const addedRows = [];
@@ -1459,12 +1463,16 @@ const buildConnectedRegions = cells => {
   ];
   const regions = [];
   for (const cell of cells) {
-    if (visited.has(cell.key)) continue;
+    if (visited.has(cell.key)) {
+      continue;
+    }
     const stack = [cell];
     const region = [];
     while (stack.length) {
       const current = stack.pop();
-      if (visited.has(current.key)) continue;
+      if (visited.has(current.key)) {
+        continue;
+      }
       visited.add(current.key);
       region.push(current);
       for (const [dr, dc] of directions) {
@@ -1515,9 +1523,13 @@ function isRightMostInRegion(rowIndex, colIndex, listSelectCell) {
   return false;
 }
 function isEqualSet(setA, setB) {
-  if (setA.size !== setB.size) return false;
+  if (setA.size !== setB.size) {
+    return false;
+  }
   for (const item of setA) {
-    if (!setB.has(item)) return false;
+    if (!setB.has(item)) {
+      return false;
+    }
   }
   return true;
 }
@@ -1586,7 +1598,9 @@ function getCellsByPosition(cellSet, position = "bottom") {
         // 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
+        if (minRow === 0) {
+          return [];
+        } // Bỏ qua nếu rowIndex = 0
 
         return cells.filter(c => c.row === minRow).map(c => `${c.row}-${c.col}`);
       }
@@ -1606,7 +1620,9 @@ function getCellsByPosition(cellSet, position = "bottom") {
         // 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
+        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}`);
@@ -1641,7 +1657,9 @@ function getCellsByPosition2(cellSet, position = "bottom") {
         // 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
+        if (minRow === 0) {
+          return [];
+        } // Bỏ qua nếu rowIndex = 0
 
         return cells.filter(c => c.row === minRow).map(c => `${c.row - 1}-${c.col}`);
       }
@@ -1661,7 +1679,9 @@ function getCellsByPosition2(cellSet, position = "bottom") {
         // 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
+        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}`);

package/lib/grid-component/styles.scss

@@ -294,6 +294,16 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 
     .#{$prefix}-table-cell {
 
+      .ui-rc-table-column-sorter{
+        line-height: normal !important;
+      }
+
+      &:hover {
+        .ui-rc-table-column-sorter-up.active {
+          opacity: 1 !important;
+        }
+      }
+
       .ui-rc-table-cell-content {
         line-height: 22px;
       }
@@ -508,12 +518,12 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
             pointer-events: none; /* không ảnh hưởng đến tương tác */
             z-index: 1;
           }
-          &.ui-rc-table-cell-fix-left {
+          &.ui-rc-table-cell-fix-left.ui-rc-table-cell-fix-left-last {
             &::after {
               left: -100%;
             }
           }
-          &.ui-rc-table-cell-fix-right {
+          &.ui-rc-table-cell-fix-right.ui-rc-table-cell-fix-right-first {
             &::after {
               left: 100%;
             }

package/lib/grid-component/table/GridEdit.js

@@ -980,7 +980,10 @@ const GridEdit = props => {
       // if (ref.current && tableId && !tableId.contains(event.target as Node)) {
 
       if (ref.current && tableBody && !tableBody.contains(event.target)) {
-        setEditingKey('');
+        // setEditingKey('')
+        setTimeout(() => {
+          setEditingKey('');
+        });
         isSelecting.current = false;
         startCell.current = null;
         // setSelectedCells(new Set())
@@ -994,9 +997,12 @@ const GridEdit = props => {
         setRangeCells(new Set());
       }
     };
+
+    // document.addEventListener('click', handleClickOutside)
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('touchstart', handleClickOutside);
     return () => {
+      // document.removeEventListener('click', handleClickOutside)
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('touchstart', handleClickOutside);
     };
@@ -1441,7 +1447,7 @@ const GridEdit = props => {
       if (target.closest('.dragging-point')) {
         e.stopPropagation();
         e.preventDefault();
-        return; // Không xử lý gì cả
+        // Không xử lý gì cả
       } else {
         // setStartSelectedCell({row, col})
 
@@ -1690,7 +1696,9 @@ const GridEdit = props => {
       startCell.current = null;
       e.stopPropagation();
     }
-    if (!isSelectingRow.current || !rowStart.current) return;
+    if (!isSelectingRow.current || !rowStart.current) {
+      return;
+    }
     // const { row: startRow, col: startCol } = rowStart.current;
     const {
       row: startRow,
@@ -2231,7 +2239,7 @@ const GridEdit = props => {
             disable: !(0, _hooks.isEditable)(column, record)
           }),
           record,
-          column: column,
+          column,
           editType: (0, _hooks.getEditType)(column, record),
           dataIndex: column.dataIndex,
           indexRow: rowNumber,
@@ -2445,7 +2453,6 @@ const GridEdit = props => {
     }
     if (args.item.key === 'DELETE_CONTENT') {
       handleDeleteContent();
-      return;
     }
   };
   const hideModalAddRow = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "description": "es-grid-template",
   "keywords": [
     "react",