From 8c968c1a87712f0310a4afa4a48d2c9dee3a16d1 Mon Sep 17 00:00:00 2001
From: Syngnat <92659908+Syngnat@users.noreply.github.com>
Date: Tue, 7 Jul 2026 17:31:53 +0800
Subject: [PATCH] feat(data-grid): expose total count action in pagination

---
 .../src/components/DataGridPaginationBar.tsx  | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/DataGridPaginationBar.tsx b/frontend/src/components/DataGridPaginationBar.tsx
index 0edcd786..5db3fc2c 100644
--- a/frontend/src/components/DataGridPaginationBar.tsx
+++ b/frontend/src/components/DataGridPaginationBar.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, InputNumber, Pagination, Select } from 'antd';
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { CloseOutlined, LeftOutlined, RightOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons';
 import { t as defaultTranslate, type I18nParams } from '../i18n';
 
 interface DataGridPaginationState {
@@ -26,9 +26,12 @@ export interface DataGridPaginationBarProps {
   paginationPageText: string;
   paginationPageSizeOptions: string[];
   showKnownPageCount: boolean;
+  manualTotalCountAvailable?: boolean;
+  totalCountLoading?: boolean;
   onPageChange?: (page: number, size: number) => void;
   onPageSizeChange: (value: string) => void;
   onV2PageStep: (direction: 'previous' | 'next') => void;
+  onToggleTotalCount?: () => void;
   translate?: DataGridPaginationTranslate;
 }
 
@@ -42,9 +45,12 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
   paginationPageText,
   paginationPageSizeOptions,
   showKnownPageCount,
+  manualTotalCountAvailable = false,
+  totalCountLoading = false,
   onPageChange,
   onPageSizeChange,
   onV2PageStep,
+  onToggleTotalCount,
   translate = defaultTranslate,
 }) => {
   const [jumpPage, setJumpPage] = React.useState<number | null>(pagination?.current ?? null);
@@ -58,6 +64,17 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
     return null;
   }
 
+  const totalCountButton = manualTotalCountAvailable && onToggleTotalCount ? (
+    <Button
+      data-grid-pagination-total-count="true"
+      size="small"
+      icon={totalCountLoading ? <CloseOutlined /> : <VerticalAlignBottomOutlined />}
+      onClick={onToggleTotalCount}
+    >
+      {totalCountLoading ? translate('data_grid.toolbar.cancel_count') : translate('data_grid.toolbar.count_total')}
+    </Button>
+  ) : null;
+
   const maxJumpPage = showKnownPageCount ? Math.max(1, paginationTotalPages) : null;
   const normalizedJumpPage = Number.isFinite(Number(jumpPage)) && Number(jumpPage) > 0
     ? (maxJumpPage !== null
@@ -132,6 +149,7 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
           <div className="data-grid-pagination-summary" aria-live="polite">
             <span className="data-grid-pagination-summary-value">{paginationV2SummaryText}</span>
           </div>
+          {totalCountButton}
           <Button
             data-grid-v2-pagination-prev="true"
             size="small"
@@ -174,6 +192,7 @@ const DataGridPaginationBar: React.FC<DataGridPaginationBarProps> = ({
             <span className="data-grid-pagination-kicker">{translate('data_grid.pagination.result_set')}</span>
             <span className="data-grid-pagination-summary-value">{paginationSummaryText}</span>
           </div>
+          {totalCountButton}
           {showSequentialPagination ? sequentialPaginationControl : (
             <Pagination
               current={pagination.current}