es-grid-template 1.9.90 → 1.9.91

package/es/grid-component/GridRefreshButton.css

@@ -0,0 +1,9 @@
+.ui-rc-grid-refresh-spin {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: ui-rc-grid-refresh-spin 0.8s linear infinite;
+}
+
+@keyframes ui-rc-grid-refresh-spin {
+  to { transform: rotate(360deg); }
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './GridRefreshButton.css';
+import type { TableProps } from './type';
+type Props = Pick<TableProps<object>, 'onRefresh' | 't'> & {
+    id: string;
+};
+declare const GridRefreshButton: ({ id, onRefresh, t }: Props) => JSX.Element;
+export default GridRefreshButton;

package/es/grid-component/GridRefreshButton.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import cn from 'classnames';
+import { RefreshCw } from 'becoxy-icons';
+import "./GridRefreshButton.css";
+const GridRefreshButton = ({
+  id,
+  onRefresh,
+  t
+}) => {
+  const [isRefreshing, setIsRefreshing] = React.useState(false);
+  const refreshPendingRef = React.useRef(false);
+  if (!onRefresh) {
+    return null;
+  }
+  const handleRefresh = async () => {
+    if (refreshPendingRef.current) {
+      return;
+    }
+    refreshPendingRef.current = true;
+    setIsRefreshing(true);
+    try {
+      await onRefresh();
+    } catch (error) {
+      console.error('Grid refresh failed:', error);
+    } finally {
+      refreshPendingRef.current = false;
+      setIsRefreshing(false);
+    }
+  };
+  const label = String(t?.('RefreshData') ?? 'Refresh');
+  return /*#__PURE__*/React.createElement(RefreshCw, {
+    className: cn('toolbar-icon', {
+      'ui-rc-grid-refresh-spin': isRefreshing
+    }),
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": label,
+    color: isRefreshing ? '#9B9B9B' : '#555555',
+    fontSize: 21,
+    style: {
+      cursor: isRefreshing ? 'default' : 'pointer'
+    },
+    onClick: () => {
+      void handleRefresh();
+    }
+  });
+};
+export default GridRefreshButton;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import type { TableProps } from "../grid-component";
+import type { TableProps } from '../grid-component';
 declare const TempTable: <RecordType extends object>(props: TableProps<RecordType>) => JSX.Element;
 export default TempTable;

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

@@ -380,6 +380,18 @@ export type TableProps<RecordType = AnyObject> = {
     infiniteScroll?: boolean;
     /** Hàm gọi khi cuộn đến cuối */
     next?: () => void;
+    /**
+     * Thông báo khi phạm vi dòng đang render thay đổi (cuộn, mở/đóng cây hoặc cập nhật dữ liệu).
+     * - `rowIds`: ID dòng TanStack sau khi expand/collapse, gồm cả vùng đệm (overscan).
+     * - `startIndex` / `endIndex`: vị trí đầu/cuối trong danh sách dòng đang hiển thị (bao gồm hai đầu).
+     * Dùng để xác định dòng cần tải dữ liệu; callback không tự gọi API.
+     * Chỉ hỗ trợ khi `groupAble=true` và `editAble=false`. Không truyền thì giữ hành vi cũ.
+     */
+    onVisibleRowsChange?: (range: {
+        rowIds: string[];
+        startIndex: number;
+        endIndex: number;
+    }) => void;
     /** Ngưỡng trigger load thêm dữ liệu */
     onEndReachedThreshold?: number;
     /** Cho phép group dữ liệu */
@@ -388,6 +400,12 @@ export type TableProps<RecordType = AnyObject> = {
     groupColumns?: string[];
     /** Cấu hình group */
     groupSetting?: IGroupSetting;
+    /**
+     * Hiện nút làm mới trên toolbar khi truyền callback.
+     * Grid không tự gọi API: consumer quyết định dữ liệu cần tải lại.
+     * Hỗ trợ Promise (ví dụ refetch() của TanStack Query) để tự khóa nút khi đang tải.
+     */
+    onRefresh?: () => void | Promise<unknown>;
     /** Hiển thị toolbar */
     showToolbar?: boolean;
     /** Các action trên toolbar
@@ -550,6 +568,14 @@ export type ExpandableConfig<RecordType> = {
     onExpand?: (expanded: boolean, rowData: RecordType) => void;
     onExpandedRowsChange?: (expandedKeys: readonly Key[]) => void;
     defaultExpandAllRows?: boolean;
+    /**
+     * Giữ trạng thái mở/đóng cây do người dùng thao tác khi `dataSource` cập nhật.
+     * Khi `true`, chỉ áp dụng `defaultExpandAllRows` / `defaultExpandedRowKeys` một lần
+     * sau khi có dữ liệu; không tự mở lại những nhánh đã đóng khi tải thêm dòng.
+     * Mặc định `false`: dữ liệu thay đổi vẫn áp dụng lại trạng thái mở rộng mặc định như trước.
+     * Chỉ hỗ trợ Grid nhóm không chỉnh sửa (`groupAble=true`, `editAble=false`).
+     */
+    preserveExpandedOnDataChange?: boolean;
     expandIconColumnIndex?: number;
     showExpandAll?: boolean;
     showExpandColumn?: boolean;

package/es/group-component/TableContainer.js

@@ -5,6 +5,7 @@ import { TableContext } from "./useContext";
 import Pagination from 'rc-master-ui/es/pagination';
 import { Toolbar } from 'rc-master-ui';
 import { Collapse2, Expand2, Maximize, Minimize } from 'becoxy-icons';
+import GridRefreshButton from "../grid-component/GridRefreshButton";
 // import { ColumnsChoose } from './ColumnsChoose'
 import { numericFormatter } from 'react-numeric-component';
 import TableWrapper from "./table/TableWrapper";
@@ -42,6 +43,7 @@ const TableContainer = props => {
     showToolbar,
     toolbarItems,
     actionTemplate,
+    onRefresh,
     pagination,
     fullScreen,
     showColumnChoose,
@@ -232,7 +234,7 @@ const TableContainer = props => {
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     id: id
-  }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/React.createElement("div", {
+  }, (showToolbar !== false || fullScreen !== false || title || onRefresh) && /*#__PURE__*/React.createElement("div", {
     ref: topToolbarRef,
     className: classNames(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/React.createElement("div", {
@@ -269,7 +271,11 @@ const TableContainer = props => {
     showTotal: (totalItems, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, /*#__PURE__*/React.createElement(GridRefreshButton, {
+    id: id,
+    onRefresh: onRefresh,
+    t: t
+  }), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

package/es/group-component/TableContainerEdit.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment } from "react";
+import GridRefreshButton from "../grid-component/GridRefreshButton";
 import { useCopyToClipboard } from 'usehooks-ts';
 import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDefaultValue, getFormat, getRowIdsBetween, getSelectedCellMatrix, getTableHeight, isEditable, isFormattedNumber, newGuid, sumSize,
 // sumSize,
@@ -102,6 +103,7 @@ const TableContainerEdit = props => {
     pagination,
     showToolbar,
     actionTemplate,
+    onRefresh,
     showColumnChoose,
     height,
     minHeight,
@@ -2112,7 +2114,7 @@ const TableContainerEdit = props => {
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     id: id
-  }, (showToolbar !== false || fullScreen !== false || showColumnChoose || title) && /*#__PURE__*/React.createElement("div", {
+  }, (showToolbar !== false || fullScreen !== false || showColumnChoose || title || onRefresh) && /*#__PURE__*/React.createElement("div", {
     ref: topToolbarRef,
     className: classNames(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/React.createElement("div", {
@@ -2157,7 +2159,11 @@ const TableContainerEdit = props => {
   }, /*#__PURE__*/React.createElement(Toolbar, {
     items: toolbarItemTopRight,
     mode: 'responsive'
-  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+  })), /*#__PURE__*/React.createElement(GridRefreshButton, {
+    id: id,
+    onRefresh: onRefresh,
+    t: t
+  }), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

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

@@ -196,10 +196,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, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     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

@@ -5,6 +5,7 @@ import { TableContext } from "./useContext";
 import Pagination from 'rc-master-ui/es/pagination';
 import { Toolbar } from 'rc-master-ui';
 import { Maximize, Minimize } from 'becoxy-icons';
+import GridRefreshButton from "../grid-component/GridRefreshButton";
 import { numericFormatter } from 'react-numeric-component';
 import TableWrapper from "./table/TableWrapper";
 import { getTableHeight, sumSize, updateColumnWidthsRecursive } from "./hook/utils";
@@ -43,6 +44,7 @@ const TableContainer = props => {
     toolbarItems,
     toolbarMode,
     actionTemplate,
+    onRefresh,
     pagination,
     fullScreen,
     showColumnChoose,
@@ -232,7 +234,7 @@ const TableContainer = props => {
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     id: id
-  }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/React.createElement("div", {
+  }, (showToolbar !== false || fullScreen !== false || title || onRefresh) && /*#__PURE__*/React.createElement("div", {
     ref: topToolbarRef,
     className: classNames(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/React.createElement("div", {
@@ -275,7 +277,11 @@ const TableContainer = props => {
   }, /*#__PURE__*/React.createElement(Toolbar, {
     items: toolbarItemTopRight,
     mode: toolbarMode
-  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+  })), /*#__PURE__*/React.createElement(GridRefreshButton, {
+    id: id,
+    onRefresh: onRefresh,
+    t: t
+  }), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

package/es/table-virtuoso/InternalTable.js

@@ -105,6 +105,8 @@ const InternalTable = props => {
   const [columns, setColumns] = React.useState([]);
   const [tableData, setTableData] = React.useState([]);
   const [expanded, setExpanded] = React.useState({});
+  // Đánh dấu đã áp dụng expansion mặc định, tránh mở lại nhánh người dùng đóng khi task cập nhật.
+  const initializedExpansionRef = React.useRef(false);
 
   // const [visible, setVisible] = React.useState({visible: false, column: ''})
 
@@ -209,7 +211,7 @@ const InternalTable = props => {
       expanded,
       columnPinning,
       columnVisibility: columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility,
-      pagination: pagination && !infiniteScroll ? paginationState : undefined,
+      pagination: paginationState,
       // grouping,
       columnSizing,
       // columnOrder,
@@ -266,7 +268,8 @@ const InternalTable = props => {
     getGroupedRowModel: getGroupedRowModel(),
     // onExpandedChange: setExpanded,
     getExpandedRowModel: getExpandedRowModel(),
-    manualPagination: isServerPagination,
+    // Khi không bật phân trang client, giữ nguyên toàn bộ dữ liệu BE/viewport và tránh row model phân trang cũ được dùng lại.
+    manualPagination: !shouldUseClientPagination,
     // Chỉ để TanStack tự phân trang khi có pagination, không dùng infinite scroll và đang ở chế độ client.
     // Với server pagination, dữ liệu đã được BE phân trang nên không chạy getPaginationRowModel() để tránh phân trang lần 2.
     getPaginationRowModel: shouldUseClientPagination ? getPaginationRowModel() : undefined,
@@ -277,6 +280,13 @@ const InternalTable = props => {
     // debugTable: true
   });
   React.useEffect(() => {
+    if (expandable?.preserveExpandedOnDataChange) {
+      // Chờ cây có dữ liệu mới khởi tạo; những lần thay đổi tableData sau đó không reset expanded.
+      if (initializedExpansionRef.current || tableData.length === 0) {
+        return;
+      }
+      initializedExpansionRef.current = true;
+    }
     if (defaultExpandAllRows) {
       const allKeys = findAllChildrenKeys2(tableData, rowKey, 'children');
       setExpanded(convertToObjTrue(allKeys));
@@ -285,7 +295,7 @@ const InternalTable = props => {
         setExpanded(convertToObjTrue(defaultExpandedRowKeys ?? []));
       }
     }
-  }, [defaultExpandAllRows, defaultExpandedRowKeys, tableData]);
+  }, [defaultExpandAllRows, defaultExpandedRowKeys, tableData, expandable?.preserveExpandedOnDataChange]);
   const triggerGroupColumns = groupedColumns => {
     // const abc = updateColumnsByGroup(columns, groupedColumns)
 

package/es/table-virtuoso/table/TableContainer.js

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import Pagination from 'rc-master-ui/es/pagination';
 import { Toolbar } from 'rc-master-ui';
 import { Collapse2, Expand2, Maximize, Minimize } from 'becoxy-icons';
+import GridRefreshButton from "../../grid-component/GridRefreshButton";
 import { numericFormatter } from 'react-numeric-component';
 import TableWrapper from "./TableWrapper";
 import { ColumnsChoose } from "../../table-component/ColumnsChoose";
@@ -42,6 +43,7 @@ const TableContainer = props => {
     showToolbar,
     toolbarItems,
     actionTemplate,
+    onRefresh,
     pagination,
     fullScreen,
     showColumnChoose,
@@ -184,7 +186,7 @@ const TableContainer = props => {
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     id: id
-  }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/React.createElement("div", {
+  }, (showToolbar !== false || fullScreen !== false || title || onRefresh) && /*#__PURE__*/React.createElement("div", {
     ref: topToolbarRef,
     className: classNames(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/React.createElement("div", {
@@ -228,7 +230,11 @@ const TableContainer = props => {
   }, /*#__PURE__*/React.createElement(Toolbar, {
     items: toolbarItemTopRight,
     mode: toolbarMode
-  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+  })), /*#__PURE__*/React.createElement(GridRefreshButton, {
+    id: id,
+    onRefresh: onRefresh,
+    t: t
+  }), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

package/es/table-virtuoso/table/TableWrapper.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ColumnDef, Table } from "@tanstack/react-table";
-import type { CommandClick, ContextInfo, ContextMenuItem, PaginationConfig } from '../../grid-component/type';
+import type { CommandClick, ContextInfo, ContextMenuItem, PaginationConfig, TableProps } from '../../grid-component/type';
 type Props<T> = {
     tableContainerRef: React.RefObject<HTMLDivElement>;
     table: Table<T>;
@@ -22,6 +22,7 @@ type Props<T> = {
     next?: () => void;
     pagination?: false | PaginationConfig;
     infiniteScroll?: boolean;
+    onVisibleRowsChange?: TableProps<T>['onVisibleRowsChange'];
 };
 declare const TableWrapper: <RecordType extends object>(props: Props<RecordType>) => JSX.Element;
 export default TableWrapper;

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

@@ -21,6 +21,7 @@ const TableWrapper = props => {
     contextMenuHidden,
     contextMenuClick,
     contextMenuOpen,
+    onVisibleRowsChange,
     summary
   } = props;
   const menuRef = React.useRef(null);
@@ -124,11 +125,24 @@ const TableWrapper = props => {
       height,
       position: "relative"
     }
-  }, /*#__PURE__*/React.createElement(TableVirtuoso, {
+  }, /*#__PURE__*/React.createElement(TableVirtuoso, _extends({
     data: table.getRowModel().rows,
     totalCount: rows.length
+  }, onVisibleRowsChange ? {
+    computeItemKey: (_index, row) => row.id,
+    rangeChanged: ({
+      startIndex,
+      endIndex
+    }) => {
+      // Dùng row ID sau expand/collapse của TanStack; index không phải vị trí trong cây dữ liệu gốc.
+      onVisibleRowsChange({
+        rowIds: rows.slice(startIndex, endIndex + 1).map(row => row.id),
+        startIndex,
+        endIndex
+      });
+    }
+  } : {}, {
     // isScrolling={}
-    ,
     components: {
       Table: ({
         style,
@@ -242,7 +256,7 @@ const TableWrapper = props => {
         });
       }));
     } : undefined
-  })), /*#__PURE__*/React.createElement(Tooltip, {
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
     id: `${id}-tooltip-content`,
     style: {
       zIndex: 1999,

package/lib/grid-component/GridRefreshButton.css

@@ -0,0 +1,9 @@
+.ui-rc-grid-refresh-spin {
+  transform-origin: center;
+  transform-box: fill-box;
+  animation: ui-rc-grid-refresh-spin 0.8s linear infinite;
+}
+
+@keyframes ui-rc-grid-refresh-spin {
+  to { transform: rotate(360deg); }
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './GridRefreshButton.css';
+import type { TableProps } from './type';
+type Props = Pick<TableProps<object>, 'onRefresh' | 't'> & {
+    id: string;
+};
+declare const GridRefreshButton: ({ id, onRefresh, t }: Props) => JSX.Element;
+export default GridRefreshButton;

package/lib/grid-component/GridRefreshButton.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _becoxyIcons = require("becoxy-icons");
+require("./GridRefreshButton.css");
+const GridRefreshButton = ({
+  id,
+  onRefresh,
+  t
+}) => {
+  const [isRefreshing, setIsRefreshing] = _react.default.useState(false);
+  const refreshPendingRef = _react.default.useRef(false);
+  if (!onRefresh) {
+    return null;
+  }
+  const handleRefresh = async () => {
+    if (refreshPendingRef.current) {
+      return;
+    }
+    refreshPendingRef.current = true;
+    setIsRefreshing(true);
+    try {
+      await onRefresh();
+    } catch (error) {
+      console.error('Grid refresh failed:', error);
+    } finally {
+      refreshPendingRef.current = false;
+      setIsRefreshing(false);
+    }
+  };
+  const label = String(t?.('RefreshData') ?? 'Refresh');
+  return /*#__PURE__*/_react.default.createElement(_becoxyIcons.RefreshCw, {
+    className: (0, _classnames.default)('toolbar-icon', {
+      'ui-rc-grid-refresh-spin': isRefreshing
+    }),
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": label,
+    color: isRefreshing ? '#9B9B9B' : '#555555',
+    fontSize: 21,
+    style: {
+      cursor: isRefreshing ? 'default' : 'pointer'
+    },
+    onClick: () => {
+      void handleRefresh();
+    }
+  });
+};
+var _default = exports.default = GridRefreshButton;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import type { TableProps } from "../grid-component";
+import type { TableProps } from '../grid-component';
 declare const TempTable: <RecordType extends object>(props: TableProps<RecordType>) => JSX.Element;
 export default TempTable;

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

@@ -380,6 +380,18 @@ export type TableProps<RecordType = AnyObject> = {
     infiniteScroll?: boolean;
     /** Hàm gọi khi cuộn đến cuối */
     next?: () => void;
+    /**
+     * Thông báo khi phạm vi dòng đang render thay đổi (cuộn, mở/đóng cây hoặc cập nhật dữ liệu).
+     * - `rowIds`: ID dòng TanStack sau khi expand/collapse, gồm cả vùng đệm (overscan).
+     * - `startIndex` / `endIndex`: vị trí đầu/cuối trong danh sách dòng đang hiển thị (bao gồm hai đầu).
+     * Dùng để xác định dòng cần tải dữ liệu; callback không tự gọi API.
+     * Chỉ hỗ trợ khi `groupAble=true` và `editAble=false`. Không truyền thì giữ hành vi cũ.
+     */
+    onVisibleRowsChange?: (range: {
+        rowIds: string[];
+        startIndex: number;
+        endIndex: number;
+    }) => void;
     /** Ngưỡng trigger load thêm dữ liệu */
     onEndReachedThreshold?: number;
     /** Cho phép group dữ liệu */
@@ -388,6 +400,12 @@ export type TableProps<RecordType = AnyObject> = {
     groupColumns?: string[];
     /** Cấu hình group */
     groupSetting?: IGroupSetting;
+    /**
+     * Hiện nút làm mới trên toolbar khi truyền callback.
+     * Grid không tự gọi API: consumer quyết định dữ liệu cần tải lại.
+     * Hỗ trợ Promise (ví dụ refetch() của TanStack Query) để tự khóa nút khi đang tải.
+     */
+    onRefresh?: () => void | Promise<unknown>;
     /** Hiển thị toolbar */
     showToolbar?: boolean;
     /** Các action trên toolbar
@@ -550,6 +568,14 @@ export type ExpandableConfig<RecordType> = {
     onExpand?: (expanded: boolean, rowData: RecordType) => void;
     onExpandedRowsChange?: (expandedKeys: readonly Key[]) => void;
     defaultExpandAllRows?: boolean;
+    /**
+     * Giữ trạng thái mở/đóng cây do người dùng thao tác khi `dataSource` cập nhật.
+     * Khi `true`, chỉ áp dụng `defaultExpandAllRows` / `defaultExpandedRowKeys` một lần
+     * sau khi có dữ liệu; không tự mở lại những nhánh đã đóng khi tải thêm dòng.
+     * Mặc định `false`: dữ liệu thay đổi vẫn áp dụng lại trạng thái mở rộng mặc định như trước.
+     * Chỉ hỗ trợ Grid nhóm không chỉnh sửa (`groupAble=true`, `editAble=false`).
+     */
+    preserveExpandedOnDataChange?: boolean;
     expandIconColumnIndex?: number;
     showExpandAll?: boolean;
     showExpandColumn?: boolean;

package/lib/group-component/TableContainer.js

@@ -12,6 +12,7 @@ var _useContext = require("./useContext");
 var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
 var _rcMasterUi = require("rc-master-ui");
 var _becoxyIcons = require("becoxy-icons");
+var _GridRefreshButton = _interopRequireDefault(require("../grid-component/GridRefreshButton"));
 var _reactNumericComponent = require("react-numeric-component");
 var _TableWrapper = _interopRequireDefault(require("./table/TableWrapper"));
 var _utils = require("./hook/utils");
@@ -50,6 +51,7 @@ const TableContainer = props => {
     showToolbar,
     toolbarItems,
     actionTemplate,
+    onRefresh,
     pagination,
     fullScreen,
     showColumnChoose,
@@ -240,7 +242,7 @@ const TableContainer = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     id: id
-  }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/_react.default.createElement("div", {
+  }, (showToolbar !== false || fullScreen !== false || title || onRefresh) && /*#__PURE__*/_react.default.createElement("div", {
     ref: topToolbarRef,
     className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -277,7 +279,11 @@ const TableContainer = props => {
     showTotal: (totalItems, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, /*#__PURE__*/_react.default.createElement(_GridRefreshButton.default, {
+    id: id,
+    onRefresh: onRefresh,
+    t: t
+  }), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

package/lib/group-component/TableContainerEdit.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
+var _GridRefreshButton = _interopRequireDefault(require("../grid-component/GridRefreshButton"));
 var _usehooksTs = require("usehooks-ts");
 var _utils = require("./hook/utils");
 var _reactVirtual = require("@tanstack/react-virtual");
@@ -110,6 +111,7 @@ const TableContainerEdit = props => {
     pagination,
     showToolbar,
     actionTemplate,
+    onRefresh,
     showColumnChoose,
     height,
     minHeight,
@@ -2120,7 +2122,7 @@ const TableContainerEdit = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     id: id
-  }, (showToolbar !== false || fullScreen !== false || showColumnChoose || title) && /*#__PURE__*/_react.default.createElement("div", {
+  }, (showToolbar !== false || fullScreen !== false || showColumnChoose || title || onRefresh) && /*#__PURE__*/_react.default.createElement("div", {
     ref: topToolbarRef,
     className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -2165,7 +2167,11 @@ const TableContainerEdit = props => {
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
     items: toolbarItemTopRight,
     mode: 'responsive'
-  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+  })), /*#__PURE__*/_react.default.createElement(_GridRefreshButton.default, {
+    id: id,
+    onRefresh: onRefresh,
+    t: t
+  }), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

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

@@ -167,7 +167,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     haveSum?: boolean;
     isSummary?: boolean;
     sumGroup?: boolean;
-    summaryTemplate?: (data: number, key: string) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    summaryTemplate?: (data: number, key: string) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
     sorter?: boolean;
     allowFiltering?: boolean;
     allowSortering?: boolean;
@@ -179,27 +179,27 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     showFilterSearch?: boolean;
     hidden?: boolean;
     visible?: boolean;
-    headerTooltip?: string | boolean | (() => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    headerTooltip?: string | boolean | (() => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     columnGroupText?: string;
     headerTextAlign?: import("./../../grid-component/type").ITextAlign;
-    headerTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((column: ColumnTable<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    headerTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((column: ColumnTable<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     fixedType?: import("./../../grid-component/type").FixedType;
     headerTextWrap?: boolean;
     ellipsis?: boolean;
     allowResizing?: boolean;
     align?: import("./../../grid-component/type").ITextAlign;
     textAlign?: import("./../../grid-component/type").ITextAlign;
-    template?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
-    linkTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    template?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    linkTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     showTooltip?: boolean;
     tooltipDescription?: string | ((args: {
         value: any;
         rowData: RecordType;
-    }) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
-    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
     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/lib/table-component/TableContainer.js

@@ -12,6 +12,7 @@ var _useContext = require("./useContext");
 var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
 var _rcMasterUi = require("rc-master-ui");
 var _becoxyIcons = require("becoxy-icons");
+var _GridRefreshButton = _interopRequireDefault(require("../grid-component/GridRefreshButton"));
 var _reactNumericComponent = require("react-numeric-component");
 var _TableWrapper = _interopRequireDefault(require("./table/TableWrapper"));
 var _utils = require("./hook/utils");
@@ -50,6 +51,7 @@ const TableContainer = props => {
     toolbarItems,
     toolbarMode,
     actionTemplate,
+    onRefresh,
     pagination,
     fullScreen,
     showColumnChoose,
@@ -239,7 +241,7 @@ const TableContainer = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     id: id
-  }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/_react.default.createElement("div", {
+  }, (showToolbar !== false || fullScreen !== false || title || onRefresh) && /*#__PURE__*/_react.default.createElement("div", {
     ref: topToolbarRef,
     className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -282,7 +284,11 @@ const TableContainer = props => {
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
     items: toolbarItemTopRight,
     mode: toolbarMode
-  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+  })), /*#__PURE__*/_react.default.createElement(_GridRefreshButton.default, {
+    id: id,
+    onRefresh: onRefresh,
+    t: t
+  }), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

package/lib/table-virtuoso/InternalTable.js

@@ -115,6 +115,8 @@ const InternalTable = props => {
   const [columns, setColumns] = _react.default.useState([]);
   const [tableData, setTableData] = _react.default.useState([]);
   const [expanded, setExpanded] = _react.default.useState({});
+  // Đánh dấu đã áp dụng expansion mặc định, tránh mở lại nhánh người dùng đóng khi task cập nhật.
+  const initializedExpansionRef = _react.default.useRef(false);
 
   // const [visible, setVisible] = React.useState({visible: false, column: ''})
 
@@ -219,7 +221,7 @@ const InternalTable = props => {
       expanded,
       columnPinning,
       columnVisibility: columnsHiddenKeys ? (0, _utils.convertToObj)(columnsHiddenKeys) : columnVisibility,
-      pagination: pagination && !infiniteScroll ? paginationState : undefined,
+      pagination: paginationState,
       // grouping,
       columnSizing,
       // columnOrder,
@@ -276,7 +278,8 @@ const InternalTable = props => {
     getGroupedRowModel: (0, _reactTable.getGroupedRowModel)(),
     // onExpandedChange: setExpanded,
     getExpandedRowModel: (0, _reactTable.getExpandedRowModel)(),
-    manualPagination: isServerPagination,
+    // Khi không bật phân trang client, giữ nguyên toàn bộ dữ liệu BE/viewport và tránh row model phân trang cũ được dùng lại.
+    manualPagination: !shouldUseClientPagination,
     // Chỉ để TanStack tự phân trang khi có pagination, không dùng infinite scroll và đang ở chế độ client.
     // Với server pagination, dữ liệu đã được BE phân trang nên không chạy getPaginationRowModel() để tránh phân trang lần 2.
     getPaginationRowModel: shouldUseClientPagination ? (0, _reactTable.getPaginationRowModel)() : undefined,
@@ -287,6 +290,13 @@ const InternalTable = props => {
     // debugTable: true
   });
   _react.default.useEffect(() => {
+    if (expandable?.preserveExpandedOnDataChange) {
+      // Chờ cây có dữ liệu mới khởi tạo; những lần thay đổi tableData sau đó không reset expanded.
+      if (initializedExpansionRef.current || tableData.length === 0) {
+        return;
+      }
+      initializedExpansionRef.current = true;
+    }
     if (defaultExpandAllRows) {
       const allKeys = (0, _utils.findAllChildrenKeys2)(tableData, rowKey, 'children');
       setExpanded((0, _utils.convertToObjTrue)(allKeys));
@@ -295,7 +305,7 @@ const InternalTable = props => {
         setExpanded((0, _utils.convertToObjTrue)(defaultExpandedRowKeys ?? []));
       }
     }
-  }, [defaultExpandAllRows, defaultExpandedRowKeys, tableData]);
+  }, [defaultExpandAllRows, defaultExpandedRowKeys, tableData, expandable?.preserveExpandedOnDataChange]);
   const triggerGroupColumns = groupedColumns => {
     // const abc = updateColumnsByGroup(columns, groupedColumns)
 

package/lib/table-virtuoso/table/TableContainer.js

@@ -11,6 +11,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
 var _rcMasterUi = require("rc-master-ui");
 var _becoxyIcons = require("becoxy-icons");
+var _GridRefreshButton = _interopRequireDefault(require("../../grid-component/GridRefreshButton"));
 var _reactNumericComponent = require("react-numeric-component");
 var _TableWrapper = _interopRequireDefault(require("./TableWrapper"));
 var _ColumnsChoose = require("../../table-component/ColumnsChoose");
@@ -50,6 +51,7 @@ const TableContainer = props => {
     showToolbar,
     toolbarItems,
     actionTemplate,
+    onRefresh,
     pagination,
     fullScreen,
     showColumnChoose,
@@ -192,7 +194,7 @@ const TableContainer = props => {
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     id: id
-  }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/_react.default.createElement("div", {
+  }, (showToolbar !== false || fullScreen !== false || title || onRefresh) && /*#__PURE__*/_react.default.createElement("div", {
     ref: topToolbarRef,
     className: (0, _classnames.default)(`${prefix}-grid-top-toolbar`, {})
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -236,7 +238,11 @@ const TableContainer = props => {
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
     items: toolbarItemTopRight,
     mode: toolbarMode
-  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+  })), /*#__PURE__*/_react.default.createElement(_GridRefreshButton.default, {
+    id: id,
+    onRefresh: onRefresh,
+    t: t
+  }), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

package/lib/table-virtuoso/table/TableWrapper.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ColumnDef, Table } from "@tanstack/react-table";
-import type { CommandClick, ContextInfo, ContextMenuItem, PaginationConfig } from '../../grid-component/type';
+import type { CommandClick, ContextInfo, ContextMenuItem, PaginationConfig, TableProps } from '../../grid-component/type';
 type Props<T> = {
     tableContainerRef: React.RefObject<HTMLDivElement>;
     table: Table<T>;
@@ -22,6 +22,7 @@ type Props<T> = {
     next?: () => void;
     pagination?: false | PaginationConfig;
     infiniteScroll?: boolean;
+    onVisibleRowsChange?: TableProps<T>['onVisibleRowsChange'];
 };
 declare const TableWrapper: <RecordType extends object>(props: Props<RecordType>) => JSX.Element;
 export default TableWrapper;

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

@@ -32,6 +32,7 @@ const TableWrapper = props => {
     contextMenuHidden,
     contextMenuClick,
     contextMenuOpen,
+    onVisibleRowsChange,
     summary
   } = props;
   const menuRef = _react.default.useRef(null);
@@ -135,11 +136,24 @@ const TableWrapper = props => {
       height,
       position: "relative"
     }
-  }, /*#__PURE__*/_react.default.createElement(_reactVirtuoso.TableVirtuoso, {
+  }, /*#__PURE__*/_react.default.createElement(_reactVirtuoso.TableVirtuoso, (0, _extends2.default)({
     data: table.getRowModel().rows,
     totalCount: rows.length
+  }, onVisibleRowsChange ? {
+    computeItemKey: (_index, row) => row.id,
+    rangeChanged: ({
+      startIndex,
+      endIndex
+    }) => {
+      // Dùng row ID sau expand/collapse của TanStack; index không phải vị trí trong cây dữ liệu gốc.
+      onVisibleRowsChange({
+        rowIds: rows.slice(startIndex, endIndex + 1).map(row => row.id),
+        startIndex,
+        endIndex
+      });
+    }
+  } : {}, {
     // isScrolling={}
-    ,
     components: {
       Table: ({
         style,
@@ -253,7 +267,7 @@ const TableWrapper = props => {
         });
       }));
     } : undefined
-  })), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
+  }))), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
     id: `${id}-tooltip-content`,
     style: {
       zIndex: 1999,

package/package.json

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