MMT-3561: Adding Pagination to Table Component

package.json

@@ -31,6 +31,7 @@
  "bootstrap": "^5.3.2",
  "classnames": "^2.3.2",
  "commafy": "^0.0.6",
+ "commafy-anything": "^3.0.4",
  "compact-object-deep": "^1.0.0",
  "esbuild": "^0.19.5",
  "graphql": "^16.8.1",

static.config.json

@@ -3,7 +3,8 @@
  "apiHost": "http://localhost:4001/dev",
  "graphQlHost": "http://localhost:3013/dev/api",
  "cmrHost": "http://localhost:4000",
- "version": "development"
+ "version": "development",
+ "defaultPageSize": 20
  },
  "ummVersions": {
  "ummC": "1.17.3",

static/src/css/vendor/bootstrap/index.scss

@@ -47,7 +47,7 @@
 // @import "bootstrap/scss/card";
 @import "bootstrap/scss/breadcrumb";
 @import "bootstrap/scss/accordion";
-// @import "bootstrap/scss/pagination";
+@import "bootstrap/scss/pagination";
 @import "bootstrap/scss/badge";
 @import "bootstrap/scss/alert";
 // @import "bootstrap/scss/progress";

static/src/js/components/DraftList/DraftList.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import { Link, useParams } from 'react-router-dom'
 import { useLazyQuery } from '@apollo/client'
 import { FaFileDownload } from 'react-icons/fa'
-import pluralize from 'pluralize'
 import Col from 'react-bootstrap/Col'
 import Placeholder from 'react-bootstrap/Placeholder'
 import Row from 'react-bootstrap/Row'
@@ -135,33 +134,21 @@ const DraftList = ({ draftType }) => {
  <>
  {
  loading
- ? (
+ && (
  <span className="d-block mb-3">
  <Placeholder as="span" animation="glow">
  <Placeholder xs={2} />
  </Placeholder>
  </span>
  )
- : (
- <span className="d-block mb-3">
- Showing
- {' '}
- {count > 0 && 'all'}
- {' '}
- {count}
- {' '}
- {draftType}
- {' '}
- {pluralize('Draft', count)}
- </span>
- )
  }
  <Table
  headers={['Short Name', 'Entry Title', 'Last Modified', 'Actions']}
  classNames={['col-md-4', 'col-md-4', 'col-auto', 'col-auto']}
  loading={loading}
  data={data}
  error={noDraftsError}
+ count={count}
  />
  </>
  )

static/src/js/components/Table/Table.jsx

@@ -1,10 +1,17 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import BootstrapTable from 'react-bootstrap/Table'
+import Pagination from 'react-bootstrap/Pagination'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+import Container from 'react-bootstrap/Container'
 import Placeholder from 'react-bootstrap/Placeholder'
+import config from '../../../../../static.config.json'
 
 import For from '../For/For'
 
+const { application } = config
+const { defaultPageSize } = application
 /**
  * Table
  * @typedef {Object} Table
@@ -15,12 +22,139 @@ import For from '../For/For'
  */
 
 const Table = ({
- headers, classNames, loading, data, error
+ headers, classNames, loading, data, error, count
 }) => {
+ const [rowCount, setRowCount] = useState(0)
+ const [pageNum, setPageNum] = useState(1)
+ const [currentCount, setCurrentCount] = useState(defaultPageSize)
+
+ // Start and end index of the current page of rows
+ const startIndex = (pageNum - 1) * defaultPageSize
+ const endIndex = Math.min(startIndex + defaultPageSize, rowCount)
+
+ // Current page of rows
+ const pagedRows = data ? data.slice(startIndex, endIndex) : []
+
+ const lastPageNum = parseInt(Math.ceil(rowCount / defaultPageSize), 10)
+
+ // // Does this provider have enough Rows to page? We hide the pagination buttons if not
+ const hasPages = rowCount > defaultPageSize
+
+ const defaultPaginationStyles = {
+ minWidth: '2.5rem',
+ textAlign: 'center'
+ }
+
+ useEffect(() => {
+ if (!loading) {
+ setRowCount(data.length)
+ }
+ }, [loading, data])
+
  const renderHeaders = headers.map((header) => (
  <th key={header}>{header}</th>
  ))
 
+ const handleItemClick = (currentPage) => {
+ setPageNum(currentPage)
+ setCurrentCount(currentPage * defaultPageSize)
+ }
+
+ const generatePaginationItems = () => {
+ // Only show 3 pages, the current page and one before or after (within the valid range of pages)
+ const pages = [pageNum - 1, pageNum, pageNum + 1]
+ .filter((page) => page >= 1 && page <= lastPageNum)
+
+ const returnItems = []
+
+ // If the first page is not 1, add the pagination item for page 1
+ if (pages[0] !== 1) {
+ returnItems.push(
+ <Pagination.Item
+ key="page-1"
+ onClick={() => handleItemClick(1)}
+ active={pageNum === 1}
+ style={defaultPaginationStyles}
+ >
+ {1}
+ </Pagination.Item>
+ )
+
+ // And if the first page is not 2, add an ellipsis
+ if (pages[0] !== 2) {
+ returnItems.push(
+ <Pagination.Ellipsis
+ key="page-ellipsis-1"
+ disabled
+ />
+ )
+ }
+ }
+
+ pages.forEach((page) => {
+ returnItems.push(
+ <Pagination.Item
+ key={`page-${page}`}
+ onClick={() => handleItemClick(page)}
+ active={page === pageNum}
+ style={defaultPaginationStyles}
+ >
+ {page}
+ </Pagination.Item>
+ )
+ })
+
+ // If the last page is not lastPageNum, add the pagination item for the lastPageNum
+ if (pages[pages.length - 1] !== lastPageNum) {
+ // And if the last page is not lastPageNum - 1, add an ellipsis
+ if (pages[pages.length - 1] !== lastPageNum - 1) {
+ returnItems.push(
+ <Pagination.Ellipsis
+ key="page-ellipsis-2"
+ disabled
+ />
+ )
+ }
+
+ returnItems.push(
+ <Pagination.Item
+ key={`page-${lastPageNum}`}
+ onClick={() => handleItemClick(lastPageNum)}
+ active={pageNum === lastPageNum}
+ style={defaultPaginationStyles}
+ >
+ {lastPageNum}
+ </Pagination.Item>
+ )
+ }
+
+ return returnItems
+ }
+
+ const handlePageChange = (direction) => {
+ const newPageNum = pageNum + direction
+ const newCurrentCount = currentCount + direction * defaultPageSize
+
+ setPageNum(newPageNum)
+ setCurrentCount(newCurrentCount)
+ }
+
+ const pagination = (
+ <Pagination>
+ <Pagination.Prev
+ disabled={pageNum === 1}
+ onClick={() => handlePageChange(-1)}
+ />
+
+ {generatePaginationItems()}
+
+ <Pagination.Next
+ onClick={() => handlePageChange(1)}
+ disabled={pageNum >= lastPageNum}
+ />
+ </Pagination>
+ )
+
  const content = []
 
  if (loading) {
@@ -51,8 +185,8 @@ const Table = ({
  }
  </For>
  )
- } else if (data.length > 0) {
- const rowData = data.map((row) => {
+ } else if (rowCount > 0) {
+ const rowData = pagedRows.map((row) => {
  const { cells, key } = row
  const rowKey = key
 
@@ -80,23 +214,54 @@ const Table = ({
  }
 
  return (
- <BootstrapTable striped>
- <thead>
- <tr>
- {renderHeaders}
- </tr>
- </thead>
- <tbody>
- {content}
- </tbody>
- </BootstrapTable>
+ <Container>
+ <Row>
+ <Col>
+ <span className="d-block mb-3">
+ Showing
+ {' '}
+ {count > 0 && (currentCount - defaultPageSize)}
+ -
+ {currentCount}
+ {' '}
+ of
+ {' '}
+ {count}
+ {' '}
+ Results
+ </span>
+ </Col>
+ </Row>
+ <Row>
+ <Col>
+ <BootstrapTable striped>
+ <thead>
+ <tr>
+ {renderHeaders}
+ </tr>
+ </thead>
+ <tbody>
+ {content}
+ </tbody>
+ </BootstrapTable>
+ </Col>
+ </Row>
+ <Row className="mt-2 justify-content-md-center">
+ <Col xs="auto">
+ <div className="mx-auto">
+ {hasPages && pagination}
+ </div>
+ </Col>
+ </Row>
+ </Container>
  )
 }
 
 Table.defaultProps = {
  classNames: [],
  loading: null,
- error: 'No Data to Display'
+ error: 'No Data to Display',
+ count: null
 }
 
 Table.propTypes = {
@@ -107,7 +272,8 @@ Table.propTypes = {
  key: PropTypes.string,
  cells: PropTypes.arrayOf(PropTypes.shape({}))
  })).isRequired,
- error: PropTypes.string
+ error: PropTypes.string,
+ count: PropTypes.number
 }
 
 export default Table