es-grid-template 1.9.82 → 1.9.83

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

@@ -76,6 +76,8 @@ export type Locale = {
 export type PaginationConfig = Omit<TablePaginationConfig, 'locale' | 'current'> & {
     currentPage?: number;
     locale?: PagingLocale;
+    /** Chế độ phân trang. Mặc định là client để giữ tương thích với hành vi hiện tại. */
+    mode?: 'client' | 'server';
 };
 export type AnyObject = Record<PropertyKey, any>;
 export type IFormat = {

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

@@ -6,7 +6,6 @@ import moment from "moment";
 export const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
-    // const id = crypto.randomUUID()
     return uuidv4();
   }
 };

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

@@ -6,7 +6,6 @@ import { nonActionColumn } from "../../grid-component/hooks";
 export const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
-    // const id = crypto.randomUUID()
     return uuidv4();
   }
 };

package/es/table-virtuoso/InternalTable.js

@@ -89,6 +89,8 @@ const InternalTable = props => {
     pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
     pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
   });
+  const isServerPagination = Boolean(pagination && pagination.mode === 'server');
+  const shouldUseClientPagination = Boolean(pagination) && !infiniteScroll && !isServerPagination;
   const [columnSizing, setColumnSizing] = React.useState({});
   const [columnSizingInfo, setColumnSizingInfo] = React.useState({});
 
@@ -264,7 +266,10 @@ const InternalTable = props => {
     getGroupedRowModel: getGroupedRowModel(),
     // onExpandedChange: setExpanded,
     getExpandedRowModel: getExpandedRowModel(),
-    getPaginationRowModel: pagination && !infiniteScroll ? getPaginationRowModel() : undefined,
+    manualPagination: isServerPagination,
+    // 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,
     onPaginationChange: setPagination,
     onColumnVisibilityChange: setColumnVisibility
     // onColumnPinningChange,

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

@@ -79,6 +79,16 @@ const TableContainer = props => {
   } = props;
   const [paginationLocal] = useLocale('Pagination');
   const [tableLocal] = useLocale('Table');
+  const paginationProps = React.useMemo(() => {
+    if (!pagination) {
+      return undefined;
+    }
+    const paginationConfig = {
+      ...pagination
+    };
+    delete paginationConfig.mode;
+    return paginationConfig;
+  }, [pagination]);
   const tableContainerRef = React.useRef(null);
   const containerRef = React.useRef(null);
   const bottomToolbarRef = React.useRef(null);
@@ -210,7 +220,7 @@ 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, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
+  }, paginationProps)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
@@ -299,7 +309,7 @@ const TableContainer = props => {
     })} / ${numericFormatter((totalItems ?? 0).toString(), {
       thousandSeparator: '.'
     })} ${pagination?.locale?.items || paginationLocal?.items || ''}`
-  }, pagination, {
+  }, paginationProps, {
     onChange: (page, pageSize1) => {
       if (pagination.onChange) {
         pagination.onChange(page, pageSize1);

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

@@ -76,6 +76,8 @@ export type Locale = {
 export type PaginationConfig = Omit<TablePaginationConfig, 'locale' | 'current'> & {
     currentPage?: number;
     locale?: PagingLocale;
+    /** Chế độ phân trang. Mặc định là client để giữ tương thích với hành vi hiện tại. */
+    mode?: 'client' | 'server';
 };
 export type AnyObject = Record<PropertyKey, any>;
 export type IFormat = {

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

@@ -68,7 +68,6 @@ var _moment = _interopRequireDefault(require("moment"));
 const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
-    // const id = crypto.randomUUID()
     return (0, _uuid.v4)();
   }
 };

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

@@ -86,7 +86,6 @@ var _hooks = require("../../grid-component/hooks");
 const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
-    // const id = crypto.randomUUID()
     return (0, _uuid.v4)();
   }
 };

package/lib/table-virtuoso/InternalTable.js

@@ -99,6 +99,8 @@ const InternalTable = props => {
     pageIndex: pagination && pagination.currentPage ? pagination.currentPage - 1 : 0,
     pageSize: pagination && pagination.pageSize ? pagination.pageSize : 20
   });
+  const isServerPagination = Boolean(pagination && pagination.mode === 'server');
+  const shouldUseClientPagination = Boolean(pagination) && !infiniteScroll && !isServerPagination;
   const [columnSizing, setColumnSizing] = _react.default.useState({});
   const [columnSizingInfo, setColumnSizingInfo] = _react.default.useState({});
 
@@ -274,7 +276,10 @@ const InternalTable = props => {
     getGroupedRowModel: (0, _reactTable.getGroupedRowModel)(),
     // onExpandedChange: setExpanded,
     getExpandedRowModel: (0, _reactTable.getExpandedRowModel)(),
-    getPaginationRowModel: pagination && !infiniteScroll ? (0, _reactTable.getPaginationRowModel)() : undefined,
+    manualPagination: isServerPagination,
+    // 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,
     onPaginationChange: setPagination,
     onColumnVisibilityChange: setColumnVisibility
     // onColumnPinningChange,

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

@@ -87,6 +87,16 @@ const TableContainer = props => {
   } = props;
   const [paginationLocal] = (0, _locale.useLocale)('Pagination');
   const [tableLocal] = (0, _locale.useLocale)('Table');
+  const paginationProps = _react.default.useMemo(() => {
+    if (!pagination) {
+      return undefined;
+    }
+    const paginationConfig = {
+      ...pagination
+    };
+    delete paginationConfig.mode;
+    return paginationConfig;
+  }, [pagination]);
   const tableContainerRef = _react.default.useRef(null);
   const containerRef = _react.default.useRef(null);
   const bottomToolbarRef = _react.default.useRef(null);
@@ -218,7 +228,7 @@ 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, toolbarItemTopRight && /*#__PURE__*/_react.default.createElement("div", {
+  }, paginationProps)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
@@ -307,7 +317,7 @@ const TableContainer = props => {
     })} / ${(0, _reactNumericComponent.numericFormatter)((totalItems ?? 0).toString(), {
       thousandSeparator: '.'
     })} ${pagination?.locale?.items || paginationLocal?.items || ''}`
-  }, pagination, {
+  }, paginationProps, {
     onChange: (page, pageSize1) => {
       if (pagination.onChange) {
         pagination.onChange(page, pageSize1);

package/package.json

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