[PBNTR-736] Adding React Advanced Table Pagination (#3962)

**What does this PR do?** Adding React Advanced Table pagination **Screenshots:** ![image](https://github.com/user-attachments/assets/48ef6aaa-f3d7-4e6b-8720-47e876e07830) #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review. - [ ] **TESTS** I have added test coverage to my code. --------- Co-authored-by: Nida Ghuman <[email protected]>
powerhome · Dec 3, 2024 · bcc10b3 · bcc10b3
1 parent 4b37c45
commit bcc10b3
Show file tree

Hide file tree

Showing 9 changed files with 5,780 additions and 19 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx b/playbook/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
@@ -7,6 +7,7 @@ import {
   createColumnHelper,
   getCoreRowModel,
   getExpandedRowModel,
+  getPaginationRowModel,
   getSortedRowModel,
   Row,
   useReactTable,
@@ -25,6 +26,7 @@ import { updateExpandAndCollapseState } from "./Utilities/ExpansionControlHelper
 import { CustomCell } from "./Components/CustomCell"
 import { TableHeader } from "./SubKits/TableHeader"
 import { TableBody } from "./SubKits/TableBody"
+import Pagination from "../pb_pagination/_pagination"
 
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
@@ -42,6 +44,8 @@ type AdvancedTableProps = {
   loading?: boolean | string
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
+  pagination?: boolean,
+  paginationProps?: GenericObject
   responsive?: "scroll" | "none",
   sortControl?: GenericObject
   tableData: GenericObject[]
@@ -67,6 +71,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     loading,
     onRowToggleClick,
     onToggleExpansionClick,
+    pagination = false,
+    paginationProps,
     responsive = "scroll",
     sortControl,
     tableData,
@@ -177,6 +183,17 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     }
   }
 
+  const paginationInitializer = pagination ? {
+    getPaginationRowModel: getPaginationRowModel(),
+    paginateExpandedRows: false,
+    initialState: {
+        pagination: {
+            pageIndex: paginationProps?.pageIndex ?? 0,
+            pageSize: paginationProps?.pageSize ??  20,
+        },
+    },
+} : {}
+
 //initialize table
   const table = useReactTable({
     data: loading ? Array(loadingStateRowCount).fill({}) : tableData,
@@ -189,6 +206,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     enableSortingRemoval: false,
     sortDescFirst: true,
     ...expandAndSortState(),
+    ... paginationInitializer,
     ...tableOptions,
   })
 
@@ -227,6 +245,10 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     className
   )
 
+  const onPageChange = (page: number) => {
+    table.setPageIndex(page - 1)
+  }
+
   return (
     <div {...ariaProps} 
         {...dataProps} 
@@ -250,23 +272,45 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             toggleExpansionIcon,
           }}
       >
-        <Table
-            className={`${loading ? "content-loading" : ""}`}
-            dark={dark}
-            dataTable
-            numberSpacing="tabular"
-            responsive="none"
-            {...tableProps}
-        >
-          {children ? (
-            children
-          ) : (
-            <>
-              <TableHeader />
-              <TableBody />
-            </>
-          )}
-        </Table>
+        <>
+          {pagination &&
+              <Pagination
+                  current={table.getState().pagination.pageIndex + 1}
+                  key={`pagination-top-${table.getState().pagination.pageIndex + 1}`}
+                  marginBottom="xs"
+                  onChange={onPageChange}
+                  range={paginationProps?.range ? paginationProps?.range : 5}
+                  total={table.getPageCount()}
+                  />
+          }
+          <Table
+              className={`${loading ? "content-loading" : ""}`}
+              dark={dark}
+              dataTable
+              numberSpacing="tabular"
+              responsive="none"
+              {...tableProps}
+          >
+            {children ? (
+              children
+            ) : (
+              <>
+                <TableHeader />
+                <TableBody />
+              </>
+            )}
+          </Table>
+          {pagination &&
+            <Pagination
+                current={table.getState().pagination.pageIndex + 1}
+                key={`pagination-bottom-${table.getState().pagination.pageIndex + 1}`}
+                marginTop="xs"
+                onChange={onPageChange}
+                range={paginationProps?.range ? paginationProps?.range : 5}
+                total={table.getPageCount()}
+            />
+          }
+        </>
       </AdvancedTableContext.Provider>
     </div>
   )

diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx
@@ -0,0 +1,50 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
+
+const AdvancedTablePagination = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          pagination
+          tableData={PAGINATION_MOCK_DATA}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTablePagination
diff --git a/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md b/playbook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md
@@ -0,0 +1 @@
+`pagination` is an optional prop that can be used to add pagination to the AdvancedTable. If present, it will add pagination with default values for pageSize, etc. To customize pagination, you can also use `paginationProps` shown in the next example.
diff --git a/...ook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx b/...ook/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx
@@ -0,0 +1,57 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
+
+const AdvancedTablePaginationWithProps = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  const paginationProps = {
+    pageIndex: 1,
+    pageSize: 10,
+    range: 2
+  }
+
+  return (
+    <>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          pagination
+          paginationProps={paginationProps}
+          tableData={PAGINATION_MOCK_DATA}
+          {...props}
+      />
+    </>
+  )
+}
+
+export default AdvancedTablePaginationWithProps
diff --git a/...b_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md b/...b_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md
@@ -0,0 +1,5 @@
+`paginationProps` is an optional prop that can be used to further customize pagination for the AdvancedTable. This prop is an object with 2 optional items:
+
+- `pageIndex`: An optional prop to set which page is set to open on initial load. Default is '0'
+- `pageSize`: An optional prop to set total number of rows for each page before the Table paginates. Default is '20'
+- `range`: The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop. See [here for more details](https://playbook.powerapp.cloud/kits/pagination/react#default). Default is set to '5'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		`pagination` is an optional prop that can be used to add pagination to the AdvancedTable. If present, it will add pagination with default values for pageSize, etc. To customize pagination, you can also use `paginationProps` shown in the next example.