es-grid-template 1.9.22 → 1.9.24

package/es/grid-component/type.d.ts

@@ -312,105 +312,195 @@ export type IFTheme = {
     cssVariables?: BaseTableCSSVariables;
 };
 export type TableProps<RecordType = AnyObject> = {
+    /** Unique id của table */
     id?: string;
+    /** Theme hiển thị của table */
     theme?: IFTheme;
+    /** Hiển thị border bao quanh toàn bộ table */
     useOuterBorder?: boolean;
+    /** Hiển thị header */
     showHeader?: boolean;
+    /** CSS class cho container table */
     className?: string;
+    /** Tiêu đề table */
     title?: ReactNode | ((data: RecordType) => ReactNode);
+    /** Tiêu đề khi table ở chế độ fullscreen */
     fullScreenTitle?: ReactNode | (() => ReactNode);
+    /** Tên field dùng làm key duy nhất cho mỗi record */
     rowKey?: string;
+    /** Nguồn dữ liệu */
     dataSource: RecordType[];
+    /** Danh sách cột */
     columns: ColumnsTable<RecordType>;
+    /** Hiển thị loading */
     loading?: boolean;
+    /** Chiều cao table */
     height?: number;
+    /** Chiều cao tối thiểu table */
     minHeight?: number;
+    /** Format dữ liệu mặc định */
     format?: IFormat;
-    /** useTranslation 'react-i18next' */
+    /**
+     * Hàm translate
+     *  useTranslation 'react-i18next'
+     * {t} = useTranslation()
+     * */
     t?: any;
     /** Language code: exp: vi || en || ja || zh .... */
     lang?: string;
+    /** custom Locale cấu hình cho table */
     locale?: Locale;
+    /** Cấu hình wrap text */
     wrapSettings?: IWrapSettings;
+    /** Bật chế độ tải dữ liệu vô hạn */
     infiniteScroll?: boolean;
+    /** Hàm gọi khi cuộn đến cuối */
     next?: () => void;
+    /** Ngưỡng trigger load thêm dữ liệu */
     onEndReachedThreshold?: number;
-    /**  Group data by columns */
+    /** Cho phép group dữ liệu */
     groupAble?: boolean;
+    /** Danh sách cột dùng để group */
     groupColumns?: string[];
+    /** Cấu hình group */
     groupSetting?: IGroupSetting;
-    /** Toolbar */
+    /** Hiển thị toolbar */
     showToolbar?: boolean;
+    /** Các action trên toolbar
+     *
+     * các Key mặc định:
+     * key: 'ADD' : Thêm dòng mới vào cuối
+     * key: 'DUPLICATE' : Nhân bản dòng được chọn (nếu có)
+     * key: 'INSERT_AFTER' : Chèn dòng mới sau dòng được chọn
+     * key: 'INSERT_BEFORE' : Chèn dòng mới trước dòng được chọn
+     * key: 'INSERT_CHILDREN' : Chèn dòng con vào dòng được chọn
+     * key: 'DELETE' : Xóa tất cả dòng
+     * key: 'DELETE_ROWS' : Xóa các dòng được chọn
+     */
     toolbarItems?: ToolbarItem[];
+    /** Chế độ hiển thị toolbar */
     toolbarMode?: 'scroll';
+    /** Hiển thị chức năng chọn cột */
     showColumnChoose?: boolean;
+    /** Callback khi thay đổi cột hiển thị */
     onChooseColumns?: (props: IOnChooseColumns) => void;
+    /** Cho phép fullscreen */
     fullScreen?: boolean;
+    /** Cấu hình phân trang, false để tắt */
     pagination?: false | PaginationConfig;
-    showCustomTooltip?: boolean;
     /** Context Menu */
+    /** Danh sách menu chuột phải */
     contextMenuItems?: ContextMenuItem[];
-    showDefaultContext?: boolean;
+    /**
+     * Danh sách menu cần ẩn
+     * Có thể trả về động theo row hiện tại
+     */
     contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<RecordType>, 'item' | 'event'>) => string[]);
+    /** func khi mở context menu */
     contextMenuOpen?: (args: Omit<ContextInfo<RecordType>, 'item'>) => void;
+    /** func khi click menu */
     contextMenuClick?: (args: ContextInfo<RecordType>) => void;
+    /** Double click vào row */
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
+    /** Click vào row */
     recordClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
     /** Filter */
+    /** Hiển thị filter nâng cao */
     showAdvanceFilter?: boolean;
+    /** Cho phép filter */
     allowFiltering?: boolean;
+    /** Filter mặc định */
     defaultFilter?: FilterItem[];
+    /** func khi filter thay đổi */
     onFilter?: (query: FilterItem[]) => void;
+    /** Nguồn dữ liệu filter */
     dataSourceFilter?: SourceFilter[];
+    /**
+     * Custom popup filter cho từng cột
+     */
     onFilterClick?: (column: ColumnTable<RecordType>, callback: (key: string, data: any) => void) => void;
     /** mặc định so sánh không dấu + lowercase
      * ignoreAccents !== false => không khai báo hoặc ignoreAccents = true => so sánh không dấu
      * ignoreAccents = false => so sánh có dấu + uperrcase sensitive
      * **/
     ignoreAccents?: boolean;
-    /** Sorter */
-    sortMultiple?: boolean;
+    /** Cho phép sort */
     allowSortering?: boolean;
+    /** Cho phép sort nhiều cột */
+    sortMultiple?: boolean;
+    /** func khi sort */
     onSorter?: (args: Sorter[]) => void;
+    /** Sort mặc định */
     defaultSorter?: Sorter[];
-    /** selected record feature */
     selectionSettings?: SelectionSettings;
+    /** Cấu hình chọn row */
     rowSelection?: RowSelection<RecordType>;
+    /** func khi chọn row */
     rowSelected?: (args: {
         type: string;
         rowData: RecordType;
         selected: RecordType | RecordType[];
     }) => void;
-    /** resize column width  feature */
+    /** Cho phép resize độ rộng cột */
     allowResizing?: boolean;
+    /** Hiển thị dòng tổng hợp */
     summary?: boolean;
+    /** Dữ liệu footer */
     footerDataSource?: any[];
+    /** Hiển thị text khi không có dữ liệu */
     showEmptyText?: boolean;
+    /** Cấu hình command column */
     commandSettings?: CommandSettings;
+    /**
+     * Func khi click command
+     * Ví dụ: Edit, Delete, Copy...
+     */
     commandClick?: (args: CommandClick<RecordType>) => void;
+    /** Callback khi expand/collapse row */
     onExpandClick?: (args: {
         expandedKeys: string[];
         key: string;
         rowData: any;
     }) => void;
+    /** Cấu hình expandable row */
     expandable?: ExpandableConfig<RecordType>;
+    /** custom Action area bên trái thanh toolbar */
     actionTemplate?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    /** Nội dung hiển thị cuối table */
     bottom?: ReactNode;
     rowClassName?: string | RowClassName<RecordType>;
     onRowStyles?: CSSProperties | ((data: RecordType) => CSSProperties);
     onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    /** Bật virtual scroll */
     useVirtual?: {
+        /** Virtual theo chiều ngang */
         horizontal?: boolean;
+        /** Virtual theo chiều dọc */
         vertical?: boolean;
     };
+    /** Cho phép chỉnh sửa dữ liệu */
     editAble?: boolean;
+    /** Callback khi data thay đổi */
     onDataChange?: (data: RecordType[]) => void;
+    /** Giá trị mặc định khi thêm mới */
     defaultValue?: AnyObject | (() => AnyObject);
+    /** Callback xử lý paste dữ liệu */
     onCellPaste?: ICellPasteModel<RecordType>;
+    /**
+    * Callback khi cell thay đổi giá trị
+    *
+    * handleCallback dùng để cập nhật giá trị sau khi xử lý custom
+    */
     onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
+    /** Callback click cell */
     onCellClick?: (args: ICellClick, callback?: any) => void;
+    /** Xác định row có được edit hay không */
     rowEditable?: (rowData: RecordType) => boolean;
+    /** Validate dữ liệu
+     *
+     * exp: validate= yup.object().shape({})
+     */
     validate?: any;
     onBlur?: (data: RecordType[]) => void;
 };

package/es/group-component/hook/utils.d.ts

@@ -194,10 +194,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width">);
+    onCellStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
+    onCellHeaderStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "display" | "left" | "minWidth" | "position" | "right" | "width">);
+    onCellFooterStyles?: Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "left" | "right" | "display" | "width" | "minWidth">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/table-component/TableContainer.js

@@ -112,11 +112,15 @@ const TableContainer = props => {
         return;
       }
       if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
-        setFocusedCell(undefined);
-        setIsSelectionChange(prev => ({
-          ...prev,
-          isChange: false
-        }));
+        if (focusedCell) {
+          setFocusedCell(undefined);
+        }
+        if (isSelectionChange?.isChange) {
+          setIsSelectionChange(prev => ({
+            ...prev,
+            isChange: false
+          }));
+        }
       }
     };
     document.addEventListener('mousedown', handleClickOutside);

package/es/table-component/TableContainerEdit.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment } from "react";
 import { useCopyToClipboard } from 'usehooks-ts';
-import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDefaultValue, getEditType, getFormat, getRowIdsBetween, getSelectedCellMatrix, getTableHeight, isEditable, isFormattedNumber, newGuid, parseExcelClipboardText, sumSize,
+import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDefaultValue, getEditType, getFormat, getRowIdsBetween, getSelectedCellMatrix, getTableHeight, isEditable, isFormattedNumber, newGuid, parseExcelClipboard,
+// parseExcelClipboardText,
+sumSize,
 // sumSize,
 unFlattenData, updateArrayByKey, updateColumnWidthsRecursive, updateOrInsert } from "./hook/utils";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -522,7 +524,7 @@ const TableContainerEdit = props => {
       triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource, []);
     }
   }, [dataSource, format, onCellPaste?.maxRowsPaste, originData, rowKey, startCell, table, triggerPaste]);
-  const handlePasteToTable = React.useCallback(pasteData => {
+  const handlePasteToTable = React.useCallback((pasteData, e) => {
     if (!startCell) return;
 
     // const pastedRows = pasted.trim().split('\n').map(row => row.split('\t'));
@@ -535,8 +537,9 @@ const TableContainerEdit = props => {
 
     // )
 
-    // const rowsPasted  = parseExcelText(pasteData)
-    const rowsPasted = parseExcelClipboardText(pasteData);
+    const rowsPasted = parseExcelClipboard(e);
+    // const rowsPasted2 = parseExcelClipboardText(pasteData)
+
     if (rowsPasted.length > (onCellPaste?.maxRowsPaste ?? 200)) {
       // bật popup thông báo
 
@@ -583,7 +586,7 @@ const TableContainerEdit = props => {
       if (startCell && !editingKey) {
         e.preventDefault(); // Chặn hành vi mặc định
         const clipboardText = e.clipboardData?.getData('text/plain') ?? '';
-        handlePasteToTable(clipboardText);
+        handlePasteToTable(clipboardText, e);
       }
     };
     document.addEventListener('paste', handlePaste);
@@ -608,27 +611,30 @@ const TableContainerEdit = props => {
         if (editingKey) {
           onBlur?.(dataSource);
         }
-        setTimeout(() => {
-          setEditingKey('');
-          // editingKey.current = ''
-        });
-        setEndCell(undefined);
-        setStartCell(undefined);
-        setRangeState(undefined);
-        setFocusedCell(undefined);
+        if (editingKey) {
+          setTimeout(() => {
+            setEditingKey('');
+          });
+        }
+        if (endCell) {
+          setEndCell(undefined);
+        }
+        if (startCell) {
+          setStartCell(undefined);
+        }
+        if (rangeState) {
+          setRangeState(undefined);
+        }
+        if (focusedCell) {
+          setFocusedCell(undefined);
+        }
       }
     };
-
-    // 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)
     };
-  }, [dataSource, editingKey, id, onBlur]);
+  }, [dataSource, editingKey, endCell, focusedCell, id, onBlur, rangeState, startCell]);
   const columnSizingState = table.getState().columnSizing;
   React.useEffect(() => {
     requestAnimationFrame(() => {

package/es/table-component/body/TableBodyCell.js

@@ -399,7 +399,13 @@ const TableBodyCell = props => {
       if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
         setIsOpenTooltip(true);
       }
-    },
+    }
+
+    // onMouseLeave={() => {
+    //   setIsOpenTooltip(false)
+    // }}
+    ,
+
     onKeyDown: e => {
       const flatRows = table.getRowModel().flatRows;
       if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {

package/es/table-component/hook/utils.js

@@ -2389,12 +2389,20 @@ export function parseExcelClipboardText(text) {
 }
 export function parseExcelClipboard(e) {
   const text = e.clipboardData?.getData('text/plain') ?? '';
-  if (!text) return [];
+  if (!text) {
+    return [];
+  }
 
   // Excel thường dùng \r\n giữa dòng, \t giữa cột
-  const rows = text.split(/\r?\n/) // tách theo dòng
-  .filter(r => r.trim() !== '') // bỏ dòng trống
-  .map(row => row.split('\t') // tách theo cột
+  const rawRows = text.split(/\r?\n/); // tách theo dòng
+
+  // Loại bỏ chỉ các dòng trống ở cuối (trailing empty rows), giữ nguyên dòng trống ở giữa
+  let lastNonEmpty = rawRows.length - 1;
+  while (lastNonEmpty >= 0 && rawRows[lastNonEmpty].trim() === '') {
+    lastNonEmpty--;
+  }
+  const trimmedRows = lastNonEmpty >= 0 ? rawRows.slice(0, lastNonEmpty + 1) : [];
+  const rows = trimmedRows.map(row => row.split('\t') // tách theo cột
   .map(cell => cell.replace(/\r/g, '').replace(/\n/g, '\n')) // giữ xuống dòng trong ô
   );
   return rows;

package/es/table-component/table/TableWrapper.js

@@ -244,6 +244,7 @@ const TableWrapper = props => {
       content,
       activeAnchor
     }) => activeAnchor?.getAttribute('data-tooltip-sort') || content
+    // float
   }), /*#__PURE__*/React.createElement(Tooltip, {
     id: `${id}-tooltip-error`,
     style: {

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

@@ -312,105 +312,195 @@ export type IFTheme = {
     cssVariables?: BaseTableCSSVariables;
 };
 export type TableProps<RecordType = AnyObject> = {
+    /** Unique id của table */
     id?: string;
+    /** Theme hiển thị của table */
     theme?: IFTheme;
+    /** Hiển thị border bao quanh toàn bộ table */
     useOuterBorder?: boolean;
+    /** Hiển thị header */
     showHeader?: boolean;
+    /** CSS class cho container table */
     className?: string;
+    /** Tiêu đề table */
     title?: ReactNode | ((data: RecordType) => ReactNode);
+    /** Tiêu đề khi table ở chế độ fullscreen */
     fullScreenTitle?: ReactNode | (() => ReactNode);
+    /** Tên field dùng làm key duy nhất cho mỗi record */
     rowKey?: string;
+    /** Nguồn dữ liệu */
     dataSource: RecordType[];
+    /** Danh sách cột */
     columns: ColumnsTable<RecordType>;
+    /** Hiển thị loading */
     loading?: boolean;
+    /** Chiều cao table */
     height?: number;
+    /** Chiều cao tối thiểu table */
     minHeight?: number;
+    /** Format dữ liệu mặc định */
     format?: IFormat;
-    /** useTranslation 'react-i18next' */
+    /**
+     * Hàm translate
+     *  useTranslation 'react-i18next'
+     * {t} = useTranslation()
+     * */
     t?: any;
     /** Language code: exp: vi || en || ja || zh .... */
     lang?: string;
+    /** custom Locale cấu hình cho table */
     locale?: Locale;
+    /** Cấu hình wrap text */
     wrapSettings?: IWrapSettings;
+    /** Bật chế độ tải dữ liệu vô hạn */
     infiniteScroll?: boolean;
+    /** Hàm gọi khi cuộn đến cuối */
     next?: () => void;
+    /** Ngưỡng trigger load thêm dữ liệu */
     onEndReachedThreshold?: number;
-    /**  Group data by columns */
+    /** Cho phép group dữ liệu */
     groupAble?: boolean;
+    /** Danh sách cột dùng để group */
     groupColumns?: string[];
+    /** Cấu hình group */
     groupSetting?: IGroupSetting;
-    /** Toolbar */
+    /** Hiển thị toolbar */
     showToolbar?: boolean;
+    /** Các action trên toolbar
+     *
+     * các Key mặc định:
+     * key: 'ADD' : Thêm dòng mới vào cuối
+     * key: 'DUPLICATE' : Nhân bản dòng được chọn (nếu có)
+     * key: 'INSERT_AFTER' : Chèn dòng mới sau dòng được chọn
+     * key: 'INSERT_BEFORE' : Chèn dòng mới trước dòng được chọn
+     * key: 'INSERT_CHILDREN' : Chèn dòng con vào dòng được chọn
+     * key: 'DELETE' : Xóa tất cả dòng
+     * key: 'DELETE_ROWS' : Xóa các dòng được chọn
+     */
     toolbarItems?: ToolbarItem[];
+    /** Chế độ hiển thị toolbar */
     toolbarMode?: 'scroll';
+    /** Hiển thị chức năng chọn cột */
     showColumnChoose?: boolean;
+    /** Callback khi thay đổi cột hiển thị */
     onChooseColumns?: (props: IOnChooseColumns) => void;
+    /** Cho phép fullscreen */
     fullScreen?: boolean;
+    /** Cấu hình phân trang, false để tắt */
     pagination?: false | PaginationConfig;
-    showCustomTooltip?: boolean;
     /** Context Menu */
+    /** Danh sách menu chuột phải */
     contextMenuItems?: ContextMenuItem[];
-    showDefaultContext?: boolean;
+    /**
+     * Danh sách menu cần ẩn
+     * Có thể trả về động theo row hiện tại
+     */
     contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<RecordType>, 'item' | 'event'>) => string[]);
+    /** func khi mở context menu */
     contextMenuOpen?: (args: Omit<ContextInfo<RecordType>, 'item'>) => void;
+    /** func khi click menu */
     contextMenuClick?: (args: ContextInfo<RecordType>) => void;
+    /** Double click vào row */
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
+    /** Click vào row */
     recordClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
     /** Filter */
+    /** Hiển thị filter nâng cao */
     showAdvanceFilter?: boolean;
+    /** Cho phép filter */
     allowFiltering?: boolean;
+    /** Filter mặc định */
     defaultFilter?: FilterItem[];
+    /** func khi filter thay đổi */
     onFilter?: (query: FilterItem[]) => void;
+    /** Nguồn dữ liệu filter */
     dataSourceFilter?: SourceFilter[];
+    /**
+     * Custom popup filter cho từng cột
+     */
     onFilterClick?: (column: ColumnTable<RecordType>, callback: (key: string, data: any) => void) => void;
     /** mặc định so sánh không dấu + lowercase
      * ignoreAccents !== false => không khai báo hoặc ignoreAccents = true => so sánh không dấu
      * ignoreAccents = false => so sánh có dấu + uperrcase sensitive
      * **/
     ignoreAccents?: boolean;
-    /** Sorter */
-    sortMultiple?: boolean;
+    /** Cho phép sort */
     allowSortering?: boolean;
+    /** Cho phép sort nhiều cột */
+    sortMultiple?: boolean;
+    /** func khi sort */
     onSorter?: (args: Sorter[]) => void;
+    /** Sort mặc định */
     defaultSorter?: Sorter[];
-    /** selected record feature */
     selectionSettings?: SelectionSettings;
+    /** Cấu hình chọn row */
     rowSelection?: RowSelection<RecordType>;
+    /** func khi chọn row */
     rowSelected?: (args: {
         type: string;
         rowData: RecordType;
         selected: RecordType | RecordType[];
     }) => void;
-    /** resize column width  feature */
+    /** Cho phép resize độ rộng cột */
     allowResizing?: boolean;
+    /** Hiển thị dòng tổng hợp */
     summary?: boolean;
+    /** Dữ liệu footer */
     footerDataSource?: any[];
+    /** Hiển thị text khi không có dữ liệu */
     showEmptyText?: boolean;
+    /** Cấu hình command column */
     commandSettings?: CommandSettings;
+    /**
+     * Func khi click command
+     * Ví dụ: Edit, Delete, Copy...
+     */
     commandClick?: (args: CommandClick<RecordType>) => void;
+    /** Callback khi expand/collapse row */
     onExpandClick?: (args: {
         expandedKeys: string[];
         key: string;
         rowData: any;
     }) => void;
+    /** Cấu hình expandable row */
     expandable?: ExpandableConfig<RecordType>;
+    /** custom Action area bên trái thanh toolbar */
     actionTemplate?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    /** Nội dung hiển thị cuối table */
     bottom?: ReactNode;
     rowClassName?: string | RowClassName<RecordType>;
     onRowStyles?: CSSProperties | ((data: RecordType) => CSSProperties);
     onRowHeaderStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
     onRowFooterStyles?: Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'> | (() => Omit<React.CSSProperties, 'display' | 'transform' | 'gridTemplateColumns' | 'height' | 'minHeight'>);
+    /** Bật virtual scroll */
     useVirtual?: {
+        /** Virtual theo chiều ngang */
         horizontal?: boolean;
+        /** Virtual theo chiều dọc */
         vertical?: boolean;
     };
+    /** Cho phép chỉnh sửa dữ liệu */
     editAble?: boolean;
+    /** Callback khi data thay đổi */
     onDataChange?: (data: RecordType[]) => void;
+    /** Giá trị mặc định khi thêm mới */
     defaultValue?: AnyObject | (() => AnyObject);
+    /** Callback xử lý paste dữ liệu */
     onCellPaste?: ICellPasteModel<RecordType>;
+    /**
+    * Callback khi cell thay đổi giá trị
+    *
+    * handleCallback dùng để cập nhật giá trị sau khi xử lý custom
+    */
     onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
+    /** Callback click cell */
     onCellClick?: (args: ICellClick, callback?: any) => void;
+    /** Xác định row có được edit hay không */
     rowEditable?: (rowData: RecordType) => boolean;
+    /** Validate dữ liệu
+     *
+     * exp: validate= yup.object().shape({})
+     */
     validate?: any;
     onBlur?: (data: RecordType[]) => void;
 };

package/lib/table-component/TableContainer.js

@@ -119,11 +119,15 @@ const TableContainer = props => {
         return;
       }
       if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
-        setFocusedCell(undefined);
-        setIsSelectionChange(prev => ({
-          ...prev,
-          isChange: false
-        }));
+        if (focusedCell) {
+          setFocusedCell(undefined);
+        }
+        if (isSelectionChange?.isChange) {
+          setIsSelectionChange(prev => ({
+            ...prev,
+            isChange: false
+          }));
+        }
       }
     };
     document.addEventListener('mousedown', handleClickOutside);

package/lib/table-component/TableContainerEdit.js

@@ -529,7 +529,7 @@ const TableContainerEdit = props => {
       triggerPaste?.(pastedRows, pastedColumnsArray, newDataSource, []);
     }
   }, [dataSource, format, onCellPaste?.maxRowsPaste, originData, rowKey, startCell, table, triggerPaste]);
-  const handlePasteToTable = _react.default.useCallback(pasteData => {
+  const handlePasteToTable = _react.default.useCallback((pasteData, e) => {
     if (!startCell) return;
 
     // const pastedRows = pasted.trim().split('\n').map(row => row.split('\t'));
@@ -542,8 +542,9 @@ const TableContainerEdit = props => {
 
     // )
 
-    // const rowsPasted  = parseExcelText(pasteData)
-    const rowsPasted = (0, _utils.parseExcelClipboardText)(pasteData);
+    const rowsPasted = (0, _utils.parseExcelClipboard)(e);
+    // const rowsPasted2 = parseExcelClipboardText(pasteData)
+
     if (rowsPasted.length > (onCellPaste?.maxRowsPaste ?? 200)) {
       // bật popup thông báo
 
@@ -590,7 +591,7 @@ const TableContainerEdit = props => {
       if (startCell && !editingKey) {
         e.preventDefault(); // Chặn hành vi mặc định
         const clipboardText = e.clipboardData?.getData('text/plain') ?? '';
-        handlePasteToTable(clipboardText);
+        handlePasteToTable(clipboardText, e);
       }
     };
     document.addEventListener('paste', handlePaste);
@@ -615,27 +616,30 @@ const TableContainerEdit = props => {
         if (editingKey) {
           onBlur?.(dataSource);
         }
-        setTimeout(() => {
-          setEditingKey('');
-          // editingKey.current = ''
-        });
-        setEndCell(undefined);
-        setStartCell(undefined);
-        setRangeState(undefined);
-        setFocusedCell(undefined);
+        if (editingKey) {
+          setTimeout(() => {
+            setEditingKey('');
+          });
+        }
+        if (endCell) {
+          setEndCell(undefined);
+        }
+        if (startCell) {
+          setStartCell(undefined);
+        }
+        if (rangeState) {
+          setRangeState(undefined);
+        }
+        if (focusedCell) {
+          setFocusedCell(undefined);
+        }
       }
     };
-
-    // 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)
     };
-  }, [dataSource, editingKey, id, onBlur]);
+  }, [dataSource, editingKey, endCell, focusedCell, id, onBlur, rangeState, startCell]);
   const columnSizingState = table.getState().columnSizing;
   _react.default.useEffect(() => {
     requestAnimationFrame(() => {

package/lib/table-component/body/TableBodyCell.js

@@ -406,7 +406,13 @@ const TableBodyCell = props => {
       if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
         setIsOpenTooltip(true);
       }
-    },
+    }
+
+    // onMouseLeave={() => {
+    //   setIsOpenTooltip(false)
+    // }}
+    ,
+
     onKeyDown: e => {
       const flatRows = table.getRowModel().flatRows;
       if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {

package/lib/table-component/hook/utils.js

@@ -2518,12 +2518,20 @@ function parseExcelClipboardText(text) {
 }
 function parseExcelClipboard(e) {
   const text = e.clipboardData?.getData('text/plain') ?? '';
-  if (!text) return [];
+  if (!text) {
+    return [];
+  }
 
   // Excel thường dùng \r\n giữa dòng, \t giữa cột
-  const rows = text.split(/\r?\n/) // tách theo dòng
-  .filter(r => r.trim() !== '') // bỏ dòng trống
-  .map(row => row.split('\t') // tách theo cột
+  const rawRows = text.split(/\r?\n/); // tách theo dòng
+
+  // Loại bỏ chỉ các dòng trống ở cuối (trailing empty rows), giữ nguyên dòng trống ở giữa
+  let lastNonEmpty = rawRows.length - 1;
+  while (lastNonEmpty >= 0 && rawRows[lastNonEmpty].trim() === '') {
+    lastNonEmpty--;
+  }
+  const trimmedRows = lastNonEmpty >= 0 ? rawRows.slice(0, lastNonEmpty + 1) : [];
+  const rows = trimmedRows.map(row => row.split('\t') // tách theo cột
   .map(cell => cell.replace(/\r/g, '').replace(/\n/g, '\n')) // giữ xuống dòng trong ô
   );
   return rows;

package/lib/table-component/table/TableWrapper.js

@@ -253,6 +253,7 @@ const TableWrapper = props => {
       content,
       activeAnchor
     }) => activeAnchor?.getAttribute('data-tooltip-sort') || content
+    // float
   }), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
     id: `${id}-tooltip-error`,
     style: {

package/package.json

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