From 86ce80abc32d8f7472a06037b2ade6fb2f68104f Mon Sep 17 00:00:00 2001
From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com>
Date: Wed, 6 Apr 2022 12:48:55 +0100
Subject: [PATCH] feat: add total records and pageCount to table header

---
 .../Binding/Bind_TableTextPagination_spec.js  |  5 +++++
 .../TableWidget/component/TableHeader.tsx     | 22 ++++++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_TableTextPagination_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_TableTextPagination_spec.js
index 0ad1e94dfc..e270e40b29 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_TableTextPagination_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Binding/Bind_TableTextPagination_spec.js
@@ -73,6 +73,11 @@ describe("Test Create Api and Bind to Table widget", function() {
     cy.wait(500);
     cy.wait("@postExecute");
     cy.wait(500);
+    cy.get(".show-page-items").should("contain", "20 Records");
+    cy.get(".page-item")
+      .next()
+      .should("contain", "of 2");
+
     cy.get(".t--table-widget-next-page").should("not.have.attr", "disabled");
     cy.ValidateTableData("1");
 
diff --git a/app/client/src/widgets/TableWidget/component/TableHeader.tsx b/app/client/src/widgets/TableWidget/component/TableHeader.tsx
index dbdb5c3f5a..3da5102722 100644
--- a/app/client/src/widgets/TableWidget/component/TableHeader.tsx
+++ b/app/client/src/widgets/TableWidget/component/TableHeader.tsx
@@ -165,6 +165,11 @@ function TableHeader(props: TableHeaderProps) {
 
       {props.isVisiblePagination && props.serverSidePaginationEnabled && (
         <PaginationWrapper>
+          {props.totalRecordsCount ? (
+            <RowWrapper className="show-page-items">
+              {props.totalRecordsCount} Records
+            </RowWrapper>
+          ) : null}
           <PaginationItemWrapper
             className="t--table-widget-prev-page"
             disabled={props.pageNo === 0}
@@ -174,9 +179,20 @@ function TableHeader(props: TableHeaderProps) {
           >
             <Icon color={Colors.HIT_GRAY} icon="chevron-left" iconSize={16} />
           </PaginationItemWrapper>
-          <PaginationItemWrapper className="page-item" selected>
-            {props.pageNo + 1}
-          </PaginationItemWrapper>
+          {props.totalRecordsCount ? (
+            <RowWrapper>
+              Page{" "}
+              <PaginationItemWrapper className="page-item" selected>
+                {props.pageNo + 1}
+              </PaginationItemWrapper>{" "}
+              <span>{`of ${props.pageCount}`}</span>
+            </RowWrapper>
+          ) : (
+            <PaginationItemWrapper className="page-item" selected>
+              {props.pageNo + 1}
+            </PaginationItemWrapper>
+          )}
+
           <PaginationItemWrapper
             className="t--table-widget-next-page"
             disabled={