feat: generalise Pagination component for tables

Signed-off-by: Mason Hu <mason.hu@canonical.com>

src/components/ConfigurationTable.tsx

@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from "react";
-import { MainTable } from "@canonical/react-components";
+import { MainTable, MainTableProps } from "@canonical/react-components";
 import { MainTableRow } from "@canonical/react-components/dist/components/MainTable/MainTable";
 
 interface Props {
@@ -8,10 +8,11 @@ interface Props {
   emptyStateMsg?: string;
 }
 
-const ConfigurationTable: FC<Props> = ({
+const ConfigurationTable: FC<Props & MainTableProps> = ({
   rows,
   configurationExtra,
   emptyStateMsg,
+  ...props
 }) => {
   const headers = [
     {
@@ -28,6 +29,7 @@ const ConfigurationTable: FC<Props> = ({
       emptyStateMsg={emptyStateMsg}
       headers={headers}
       rows={rows}
+      {...props}
     />
   );
 };

src/components/ScrollableTable.tsx

@@ -6,17 +6,19 @@ interface Props {
   children: ReactNode;
   dependencies: DependencyList;
   belowId?: string;
+  tableId: string;
 }
 
 const ScrollableTable: FC<Props> = ({
   dependencies,
   children,
   belowId = "",
+  tableId,
 }) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const updateTBodyHeight = () => {
-    const table = ref.current?.children[0];
+    const table = document.getElementById(tableId);
     if (!table || table.children.length !== 2) {
       return;
     }

src/components/SelectableMainTable.tsx

@@ -101,7 +101,7 @@ const SelectableMainTable: FC<Props> = ({
       setSelectedNames(newSelection);
     };
 
-    row.columns = [
+    const columns = [
       {
         content: (
           <CheckboxInput
@@ -120,13 +120,19 @@ const SelectableMainTable: FC<Props> = ({
       ...(row.columns ?? []),
     ];
 
-    row.className = classnames(row.className, {
+    const className = classnames(row.className, {
       "selected-row": isRowSelected,
       "processing-row": isRowProcessing,
     });
-    row.key = row.name;
 
-    return row;
+    const key = row.name;
+
+    return {
+      ...row,
+      className,
+      key,
+      columns,
+    };
   });
 
   return (

src/components/forms/ScrollableConfigurationTable.tsx

@@ -18,8 +18,13 @@ const ScrollableConfigurationTable: FC<Props> = ({
   const notify = useNotify();
 
   return (
-    <ScrollableTable dependencies={[notify.notification]} belowId="form-footer">
+    <ScrollableTable
+      dependencies={[notify.notification]}
+      belowId="form-footer"
+      tableId="config-table"
+    >
       <ConfigurationTable
+        id="config-table"
         rows={rows}
         configurationExtra={configurationExtra}
         emptyStateMsg={emptyStateMsg}

src/pages/cluster/ClusterList.tsx

@@ -4,6 +4,7 @@ import {
   Icon,
   MainTable,
   Row,
+  TablePagination,
   useNotify,
 } from "@canonical/react-components";
 import { fetchClusterMembers } from "api/cluster";
@@ -15,19 +16,18 @@ import { useParams } from "react-router-dom";
 import EditClusterGroupBtn from "pages/cluster/actions/EditClusterGroupBtn";
 import DeleteClusterGroupBtn from "pages/cluster/actions/DeleteClusterGroupBtn";
 import ScrollableTable from "components/ScrollableTable";
-import { usePagination } from "util/pagination";
 import {
   allClusterGroups,
   getClusterHeaders,
   getClusterRows,
 } from "util/clusterGroups";
-import Pagination from "components/Pagination";
 import { useSettings } from "context/useSettings";
 import NotificationRow from "components/NotificationRow";
 import { isClusteredServer } from "util/settings";
 import BaseLayout from "components/BaseLayout";
 import HelpLink from "components/HelpLink";
 import { useDocs } from "context/useDocs";
+import useSortTableData from "util/useSortTableData";
 
 const ClusterList: FC = () => {
   const docBaseLink = useDocs();
@@ -56,7 +56,7 @@ const ClusterList: FC = () => {
 
   const headers = getClusterHeaders(activeGroup);
   const rows = getClusterRows(filteredMembers, activeGroup);
-  const pagination = usePagination(rows);
+  const { rows: sortedRows, updateSort } = useSortTableData({ rows });
 
   return (
     <BaseLayout
@@ -88,28 +88,25 @@ const ClusterList: FC = () => {
             <ScrollableTable
               dependencies={[filteredMembers, notify.notification]}
               belowId="pagination"
+              tableId="cluster-table"
             >
-              <MainTable
-                headers={headers}
-                rows={pagination.pageData}
-                sortable
-                onUpdateSort={pagination.updateSort}
-                emptyStateMsg={
-                  isLoading && <Loader text="Loading cluster members..." />
-                }
-              />
+              <TablePagination
+                data={sortedRows}
+                id="pagination"
+                itemName="cluster member"
+                position="below"
+              >
+                <MainTable
+                  id="cluster-table"
+                  headers={headers}
+                  sortable
+                  onUpdateSort={updateSort}
+                  emptyStateMsg={
+                    isLoading && <Loader text="Loading cluster members..." />
+                  }
+                />
+              </TablePagination>
             </ScrollableTable>
-            <Pagination
-              {...pagination}
-              id="pagination"
-              totalCount={members.length}
-              visibleCount={
-                filteredMembers.length === members.length
-                  ? pagination.pageData.length
-                  : filteredMembers.length
-              }
-              keyword="cluster member"
-            />
           </>
         )}
         {!isLoading &&

src/pages/images/ImageList.tsx

@@ -5,6 +5,7 @@ import {
   List,
   MainTable,
   SearchBox,
+  TablePagination,
   useNotify,
 } from "@canonical/react-components";
 import { humanFileSize, isoTimeToString } from "util/helpers";
@@ -17,8 +18,7 @@ import { useParams } from "react-router-dom";
 import CreateInstanceFromImageBtn from "pages/images/actions/CreateInstanceFromImageBtn";
 import { localLxdToRemoteImage } from "util/images";
 import ScrollableTable from "components/ScrollableTable";
-import { usePagination } from "util/pagination";
-import Pagination from "components/Pagination";
+import useSortTableData from "util/useSortTableData";
 
 const ImageList: FC = () => {
   const notify = useNotify();
@@ -156,7 +156,7 @@ const ImageList: FC = () => {
     };
   });
 
-  const pagination = usePagination(rows);
+  const { rows: sortedRows, updateSort } = useSortTableData({ rows });
 
   if (isLoading) {
     return <Loader text="Loading images..." />;
@@ -187,27 +187,22 @@ const ImageList: FC = () => {
           />
         </div>
       </div>
-      <Pagination
-        {...pagination}
-        id="pagination"
-        className="u-no-margin--top"
-        totalCount={images.length}
-        visibleCount={
-          filteredImages.length === images.length
-            ? pagination.pageData.length
-            : filteredImages.length
-        }
-        keyword="image"
-      />
-      <ScrollableTable dependencies={[images]}>
-        <MainTable
-          headers={headers}
-          rows={pagination.pageData}
-          sortable
-          className="image-table"
-          emptyStateMsg="No images found matching this search"
-          onUpdateSort={pagination.updateSort}
-        />
+      <ScrollableTable dependencies={[images]} tableId="image-table">
+        <TablePagination
+          data={sortedRows}
+          id="pagination"
+          className="u-no-margin--top"
+          itemName="image"
+        >
+          <MainTable
+            id="image-table"
+            headers={headers}
+            sortable
+            className="image-table"
+            emptyStateMsg="No images found matching this search"
+            onUpdateSort={updateSort}
+          />
+        </TablePagination>
       </ScrollableTable>
     </div>
   );