Atlaskit Dynamic Table - Extending the pagination component

Atlassian Developer Tools
,
1

Hello everyone,

Since I cannot submit an pull request elsewhere, I must “submit” my PR here.

Quick synopsis of my suggestion:

  • Adds a prop named “totalPaginationPages” to StatelessProps and StatefulProps.
  • The prop should indicate the number of pages the pagination component should show

The suggestion would be useful in a forum environment. For example, I want to show that there are 1000 pages in the pagination component, but don’t want to load data for the all the pages, rather only on page change.

Here’s my implementation:

Git diff patch 
diff --git a/src/components/Stateful.tsx b/src/components/Stateful.tsx
index 13d87e9..2498ce4 100644
--- a/src/components/Stateful.tsx
+++ b/src/components/Stateful.tsx
@@ -23,6 +23,7 @@ export default class DynamicTable extends React.Component<
     onSetPage: () => {},
     onSort: () => {},
     rowsPerPage: Infinity,
+    totalPaginationPages: 0
   };
 
   state = {
@@ -98,6 +99,7 @@ export default class DynamicTable extends React.Component<
       isRankable,
       isRankingDisabled,
       rowsPerPage,
+      totalPaginationPages,
       paginationi18n,
       onRankStart,
       onPageRowsUpdate,
@@ -119,6 +121,7 @@ export default class DynamicTable extends React.Component<
         page={page}
         rows={rows}
         rowsPerPage={rowsPerPage}
+        totalPaginationPages={totalPaginationPages}
         sortKey={sortKey}
         sortOrder={sortOrder}
         isRankable={isRankable}
diff --git a/src/components/Stateless.tsx b/src/components/Stateless.tsx
index 4bd53d1..8cadc40 100644
--- a/src/components/Stateless.tsx
+++ b/src/components/Stateless.tsx
@@ -59,6 +59,7 @@ class DynamicTable extends React.Component<Props, State> {
   static defaultProps = {
     isLoading: false,
     isFixedSize: false,
+    totalPaginationPages: 0,
     rowsPerPage: Infinity,
     onSetPage: () => {},
     onSort: () => {},
@@ -168,6 +169,7 @@ class DynamicTable extends React.Component<Props, State> {
       page,
       rows,
       rowsPerPage,
+      totalPaginationPages,
       sortKey,
       sortOrder,
       isLoading,
@@ -195,7 +197,8 @@ class DynamicTable extends React.Component<Props, State> {
       testId,
     };
     const totalPages =
-      rowsLength && rowsPerPage ? Math.ceil(rowsLength / rowsPerPage) : 0;
+      totalPaginationPages !== 0 ? totalPaginationPages :
+      (rowsLength && rowsPerPage ? Math.ceil(rowsLength / rowsPerPage) : 0);
     const rowsExist = !!rowsLength;
 
     const spinnerSize = this.getSpinnerSize();
diff --git a/src/types.tsx b/src/types.tsx
index 9bc164b..b5abea5 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -29,6 +29,8 @@ export interface StatelessProps extends WithAnalyticsEventsProps {
   /** Whether to show the loading state or not */
   isLoading?: boolean;
   isFixedSize?: boolean;
+  /** The total number of pages. Used in pagination. */
+  totalPaginationPages?: number;
   /** The maximum number of rows per page. No maximum by default. */
   rowsPerPage?: number;
   /** Called when the page changes. Provides an analytics event when the page change was from a click on pagination component. */
@@ -76,6 +78,7 @@ export interface StatefulProps extends WithAnalyticsEventsProps {
   loadingSpinnerSize?: LoadingSpinnerSizeType;
   isLoading?: boolean;
   isFixedSize?: boolean;
+  totalPaginationPages?: number;
   rowsPerPage?: number;
   onSetPage?: (page: number, UIAnalyticsEvent?: UIAnalyticsEvent) => void;
   onSort?: (data: any, UIAnalyticsEvent?: UIAnalyticsEvent) => void;

Thank you for time.

Best regards,
Arthur

2

Hi @ArthurLewis—the best place to submit this is on the Design System Service Desk :slight_smile:

3

Thanks for the info! In that case, I’m going to forward it there.

1 Like