From 7c11dafd4c41a71c38df78d6286e27c8ffa36bc3 Mon Sep 17 00:00:00 2001
From: Mason Hu <mason.hu@canonical.com>
Date: Wed, 10 Jan 2024 13:36:20 +0200
Subject: [PATCH] feat: generalise Pagination component for tables

Signed-off-by: Mason Hu <mason.hu@canonical.com>
---
 src/components/ConfigurationTable.tsx         |   6 +-
 src/components/Pagination.tsx                 | 147 ------------------
 src/components/ScrollableTable.tsx            |   4 +-
 src/components/SelectableMainTable.tsx        |  14 +-
 .../forms/ScrollableConfigurationTable.tsx    |   7 +-
 src/pages/cluster/ClusterList.tsx             |  43 +++--
 src/pages/images/ImageList.tsx                |  43 +++--
 src/pages/images/ImageSelector.tsx            |   6 +-
 src/pages/instances/InstanceList.tsx          | 113 +++++++-------
 src/pages/instances/InstanceSnapshots.tsx     |  83 +++++-----
 src/pages/profiles/ProfileList.tsx            |  51 +++---
 src/pages/settings/Settings.tsx               |   6 +-
 src/pages/storage/CustomIsoList.tsx           |  43 +++--
 src/pages/storage/CustomVolumeSelectModal.tsx |   2 +
 src/pages/storage/StoragePools.tsx            |   3 +-
 src/pages/storage/StorageVolumeSnapshots.tsx  |  87 ++++++-----
 src/pages/storage/StorageVolumes.tsx          |  45 +++---
 src/sass/_pagination.scss                     |  37 -----
 src/sass/styles.scss                          |   1 -
 src/util/pagination.tsx                       |  80 ----------
 src/util/useSortTableData.tsx                 |  45 ++++++
 21 files changed, 330 insertions(+), 536 deletions(-)
 delete mode 100644 src/components/Pagination.tsx
 delete mode 100644 src/sass/_pagination.scss
 delete mode 100644 src/util/pagination.tsx
 create mode 100644 src/util/useSortTableData.tsx

diff --git a/src/components/ConfigurationTable.tsx b/src/components/ConfigurationTable.tsx
index a1216e2821..3a7b53e63e 100644
--- a/src/components/ConfigurationTable.tsx
+++ b/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}
     />
   );
 };
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
deleted file mode 100644
index 40c25990bc..0000000000
--- a/src/components/Pagination.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { Button, Icon, Input, Select } from "@canonical/react-components";
-import React, {
-  FC,
-  HTMLAttributes,
-  ReactNode,
-  useEffect,
-  useState,
-} from "react";
-import { paginationOptions } from "util/pagination";
-import useEventListener from "@use-it/event-listener";
-import { MainTableRow } from "@canonical/react-components/dist/components/MainTable/MainTable";
-import classnames from "classnames";
-
-const figureSmallScreen = () => {
-  const descriptionElement = document.getElementById("pagination-description");
-  if (!descriptionElement) {
-    return true;
-  }
-  return descriptionElement.getBoundingClientRect().width < 230;
-};
-
-type Props = {
-  className?: string;
-  pageSize: number;
-  setPageSize: (val: number) => void;
-  currentPage: number;
-  paginate: (val: number) => void;
-  visibleCount: number;
-  totalCount: number;
-  totalPages: number;
-  keyword: string;
-  pageData?: MainTableRow[];
-  itemsPerPage?: number;
-  totalItems?: number;
-  updateSort?: (sort?: string | null) => void;
-  selectedNotification?: ReactNode;
-} & HTMLAttributes<HTMLDivElement>;
-
-const Pagination: FC<Props> = ({
-  className,
-  pageSize,
-  setPageSize,
-  currentPage,
-  paginate,
-  visibleCount,
-  totalCount,
-  totalPages,
-  keyword,
-  pageData: _pageData,
-  itemsPerPage: _itemsPerPage,
-  totalItems: _totalItems,
-  updateSort: _updateSort,
-  selectedNotification,
-  ...divProps
-}) => {
-  const [isSmallScreen, setSmallScreen] = useState(figureSmallScreen());
-
-  const resize = () => {
-    setSmallScreen(figureSmallScreen());
-  };
-  useEventListener("resize", resize);
-  useEffect(resize, []);
-
-  const getVisibleCount = () => {
-    if (selectedNotification) {
-      return selectedNotification;
-    }
-
-    if (isSmallScreen) {
-      return `${visibleCount} out of ${totalCount}`;
-    }
-
-    if (visibleCount === totalCount && visibleCount > 1) {
-      return `Showing all ${totalCount} ${keyword}s`;
-    }
-
-    return `Showing ${visibleCount} out of ${totalCount} ${keyword}${
-      totalCount !== 1 ? "s" : ""
-    }`;
-  };
-
-  return (
-    <div className={classnames("pagination", className)} {...divProps}>
-      <div className="description" id="pagination-description">
-        {getVisibleCount()}
-      </div>
-      <Button
-        aria-label="Previous page"
-        className="back"
-        appearance="base"
-        hasIcon
-        disabled={currentPage === 1}
-        onClick={() => {
-          if (currentPage > 1) {
-            paginate(currentPage - 1);
-          }
-        }}
-      >
-        <Icon name="chevron-down" />
-      </Button>
-      <Input
-        id="paginationPageInput"
-        label="Page number"
-        labelClassName="u-off-screen"
-        className="u-no-margin--bottom"
-        onChange={(e) => {
-          const newPage = Math.min(
-            totalPages,
-            Math.max(1, parseInt(e.target.value)),
-          );
-
-          paginate(newPage);
-        }}
-        value={currentPage}
-        type="number"
-      />{" "}
-      of&nbsp;{totalPages}
-      <Button
-        aria-label="Next page"
-        className="next"
-        appearance="base"
-        hasIcon
-        disabled={currentPage === totalPages}
-        onClick={() => {
-          if (currentPage < totalPages) {
-            paginate(currentPage + 1);
-          }
-        }}
-      >
-        <Icon name="chevron-down" />
-      </Button>
-      <Select
-        className="items-per-page"
-        label="Items per page"
-        labelClassName="u-off-screen"
-        id="itemsPerPage"
-        options={paginationOptions}
-        onChange={(e) => {
-          setPageSize(parseInt(e.target.value));
-        }}
-        value={pageSize}
-      />
-    </div>
-  );
-};
-
-export default Pagination;
diff --git a/src/components/ScrollableTable.tsx b/src/components/ScrollableTable.tsx
index e2a6c285c0..8dd98b395c 100644
--- a/src/components/ScrollableTable.tsx
+++ b/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;
     }
diff --git a/src/components/SelectableMainTable.tsx b/src/components/SelectableMainTable.tsx
index a24f964ad4..92a5d88ab0 100644
--- a/src/components/SelectableMainTable.tsx
+++ b/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 (
diff --git a/src/components/forms/ScrollableConfigurationTable.tsx b/src/components/forms/ScrollableConfigurationTable.tsx
index d5fbd082ca..b96b1b56da 100644
--- a/src/components/forms/ScrollableConfigurationTable.tsx
+++ b/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}
diff --git a/src/pages/cluster/ClusterList.tsx b/src/pages/cluster/ClusterList.tsx
index 288d6494f5..a54b25a893 100644
--- a/src/pages/cluster/ClusterList.tsx
+++ b/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 &&
diff --git a/src/pages/images/ImageList.tsx b/src/pages/images/ImageList.tsx
index 4b65405be5..6f11734fdd 100644
--- a/src/pages/images/ImageList.tsx
+++ b/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>
   );
diff --git a/src/pages/images/ImageSelector.tsx b/src/pages/images/ImageSelector.tsx
index b7d0a7c3fe..f026ec3354 100644
--- a/src/pages/images/ImageSelector.tsx
+++ b/src/pages/images/ImageSelector.tsx
@@ -406,8 +406,12 @@ const ImageSelector: FC<Props> = ({ onSelect, onClose }) => {
             </div>
           </div>
           <div className="image-list">
-            <ScrollableTable dependencies={[images]}>
+            <ScrollableTable
+              dependencies={[images]}
+              tableId="image-selector-table"
+            >
               <MainTable
+                id="image-selector-table"
                 className="table-image-select"
                 emptyStateMsg={
                   isLoading ? (
diff --git a/src/pages/instances/InstanceList.tsx b/src/pages/instances/InstanceList.tsx
index 45de88fcb7..a2954f5691 100644
--- a/src/pages/instances/InstanceList.tsx
+++ b/src/pages/instances/InstanceList.tsx
@@ -6,6 +6,7 @@ import {
   Icon,
   Row,
   Spinner,
+  TablePagination,
   useNotify,
 } from "@canonical/react-components";
 import { fetchInstances } from "api/instances";
@@ -22,8 +23,6 @@ import classnames from "classnames";
 import InstanceStateActions from "pages/instances/actions/InstanceStateActions";
 import { useInstanceLoading } from "context/instanceLoading";
 import InstanceLink from "pages/instances/InstanceLink";
-import Pagination from "components/Pagination";
-import { usePagination } from "util/pagination";
 import SelectableMainTable from "components/SelectableMainTable";
 import InstanceBulkActions from "pages/instances/actions/InstanceBulkActions";
 import { getIpAddresses } from "util/networks";
@@ -55,6 +54,7 @@ import CustomLayout from "components/CustomLayout";
 import HelpLink from "components/HelpLink";
 import { useDocs } from "context/useDocs";
 import { LxdInstanceStatus } from "types/instance";
+import useSortTableData from "util/useSortTableData";
 
 const loadHidden = () => {
   const saved = localStorage.getItem("instanceListHiddenColumns");
@@ -432,7 +432,9 @@ const InstanceList: FC = () => {
     return creationRows.concat(instanceRows);
   };
 
-  const pagination = usePagination(getRows(userHidden.concat(sizeHidden)));
+  const { rows: sortedRows, updateSort } = useSortTableData({
+    rows: getRows(userHidden.concat(sizeHidden)),
+  });
 
   const figureSizeHidden = () => {
     const wrapper = document.getElementById("instance-table-measure");
@@ -540,65 +542,62 @@ const InstanceList: FC = () => {
         <Col size={12}>
           {hasInstances && (
             <>
-              <Pagination
-                {...pagination}
-                id="pagination"
-                className="u-no-margin--top"
-                totalCount={totalInstanceCount}
-                selectedNotification={
-                  selectedNames.length > 0 && (
-                    <SelectedTableNotification
-                      totalCount={totalInstanceCount}
-                      itemName="instance"
-                      parentName={`project: ${project}`}
-                      selectedNames={selectedNames}
-                      setSelectedNames={setSelectedNames}
-                      filteredNames={filteredInstances.map(
-                        (instance) => instance.name,
-                      )}
-                    />
-                  )
-                }
-                visibleCount={
-                  filteredInstances.length === instances.length
-                    ? pagination.pageData.length
-                    : filteredInstances.length + creationOperations.length
-                }
-                keyword="instance"
-              />
-              <TableColumnsSelect
-                columns={[TYPE, DESCRIPTION, IPV4, IPV6, SNAPSHOTS]}
-                hidden={userHidden}
-                sizeHidden={sizeHidden}
-                setHidden={setHidden}
-                className={classnames({
-                  "u-hide": panelParams.instance,
-                })}
-              />
               <ScrollableTable
                 dependencies={[filteredInstances, notify.notification]}
+                tableId="instances-table"
               >
-                <SelectableMainTable
-                  headers={getHeaders(userHidden.concat(sizeHidden))}
-                  rows={pagination.pageData}
-                  sortable
-                  emptyStateMsg={
-                    isLoading ? (
-                      <Loader text="Loading instances..." />
-                    ) : (
-                      <>No instance found matching this search</>
+                <TablePagination
+                  data={sortedRows}
+                  id="pagination"
+                  itemName="instance"
+                  className="u-no-margin--top"
+                  description={
+                    selectedNames.length > 0 && (
+                      <SelectedTableNotification
+                        totalCount={totalInstanceCount}
+                        itemName="instance"
+                        parentName={`project: ${project}`}
+                        selectedNames={selectedNames}
+                        setSelectedNames={setSelectedNames}
+                        filteredNames={filteredInstances.map(
+                          (instance) => instance.name,
+                        )}
+                      />
                     )
                   }
-                  itemName="instance"
-                  parentName="project"
-                  selectedNames={selectedNames}
-                  setSelectedNames={setSelectedNames}
-                  processingNames={processingNames}
-                  filteredNames={filteredInstances.map(
-                    (instance) => instance.name,
-                  )}
-                  onUpdateSort={pagination.updateSort}
-                />
+                >
+                  <TableColumnsSelect
+                    columns={[TYPE, DESCRIPTION, IPV4, IPV6, SNAPSHOTS]}
+                    hidden={userHidden}
+                    sizeHidden={sizeHidden}
+                    setHidden={setHidden}
+                    className={classnames({
+                      "u-hide": panelParams.instance,
+                    })}
+                  />
+                  <SelectableMainTable
+                    id="instances-table"
+                    headers={getHeaders(userHidden.concat(sizeHidden))}
+                    rows={sortedRows}
+                    sortable
+                    emptyStateMsg={
+                      isLoading ? (
+                        <Loader text="Loading instances..." />
+                      ) : (
+                        <>No instance found matching this search</>
+                      )
+                    }
+                    itemName="instance"
+                    parentName="project"
+                    selectedNames={selectedNames}
+                    setSelectedNames={setSelectedNames}
+                    processingNames={processingNames}
+                    filteredNames={filteredInstances.map(
+                      (instance) => instance.name,
+                    )}
+                    onUpdateSort={updateSort}
+                  />
+                </TablePagination>
               </ScrollableTable>
               <div id="instance-table-measure">
                 <SelectableMainTable
diff --git a/src/pages/instances/InstanceSnapshots.tsx b/src/pages/instances/InstanceSnapshots.tsx
index 7afad758fe..2f3c67a9c1 100644
--- a/src/pages/instances/InstanceSnapshots.tsx
+++ b/src/pages/instances/InstanceSnapshots.tsx
@@ -4,6 +4,7 @@ import {
   Icon,
   NotificationType,
   SearchBox,
+  TablePagination,
   failure,
   success,
 } from "@canonical/react-components";
@@ -12,8 +13,6 @@ import { LxdInstance } from "types/instance";
 import NotificationRowLegacy from "components/NotificationRowLegacy";
 import InstanceSnapshotActions from "./actions/snapshots/InstanceSnapshotActions";
 import useEventListener from "@use-it/event-listener";
-import Pagination from "components/Pagination";
-import { usePagination } from "util/pagination";
 import ItemName from "components/ItemName";
 import SelectableMainTable from "components/SelectableMainTable";
 import InstanceSnapshotBulkDelete from "pages/instances/actions/snapshots/InstanceSnapshotBulkDelete";
@@ -25,6 +24,7 @@ import { useDocs } from "context/useDocs";
 import InstanceConfigureSnapshotsBtn from "./actions/snapshots/InstanceConfigureSnapshotsBtn";
 import InstanceAddSnapshotBtn from "./actions/snapshots/InstanceAddSnapshotBtn";
 import { isSnapshotsDisabled } from "util/snapshots";
+import useSortTableData from "util/useSortTableData";
 
 const collapsedViewMaxWidth = 1250;
 export const figureCollapsedScreen = (): boolean =>
@@ -181,7 +181,11 @@ const InstanceSnapshots = (props: Props) => {
     };
   });
 
-  const pagination = usePagination(rows, "created_at", "descending");
+  const { rows: sortedRows, updateSort } = useSortTableData({
+    rows,
+    defaultSort: "created_at",
+    defaultSortDirection: "descending",
+  });
 
   const resize = () => {
     setSmallScreen(figureCollapsedScreen());
@@ -243,47 +247,46 @@ const InstanceSnapshots = (props: Props) => {
       />
       {hasSnapshots ? (
         <>
-          <Pagination
-            {...pagination}
-            id="pagination"
-            totalCount={instance.snapshots?.length ?? 0}
-            visibleCount={
-              filteredSnapshots.length === instance.snapshots?.length
-                ? pagination.pageData.length
-                : filteredSnapshots.length
-            }
-            selectedNotification={
-              selectedNames.length > 0 && (
-                <SelectedTableNotification
-                  totalCount={instance.snapshots?.length ?? 0}
-                  itemName="snapshot"
-                  parentName="instance"
-                  selectedNames={selectedNames}
-                  setSelectedNames={setSelectedNames}
-                  filteredNames={filteredSnapshots.map((item) => item.name)}
-                />
-              )
-            }
-            keyword="snapshot"
-          />
           <ScrollableTable
             dependencies={[filteredSnapshots, inTabNotification]}
+            tableId="instance-snapshot-table"
           >
-            <SelectableMainTable
-              headers={headers}
-              rows={pagination.pageData}
-              sortable
-              emptyStateMsg="No snapshot found matching this search"
+            <TablePagination
+              data={sortedRows}
+              id="pagination"
               itemName="snapshot"
-              parentName="instance"
-              selectedNames={selectedNames}
-              setSelectedNames={setSelectedNames}
-              processingNames={processingNames}
-              filteredNames={filteredSnapshots.map((snapshot) => snapshot.name)}
-              onUpdateSort={pagination.updateSort}
-              defaultSort="created_at"
-              defaultSortDirection="descending"
-            />
+              description={
+                selectedNames.length > 0 && (
+                  <SelectedTableNotification
+                    totalCount={instance.snapshots?.length ?? 0}
+                    itemName="snapshot"
+                    parentName="instance"
+                    selectedNames={selectedNames}
+                    setSelectedNames={setSelectedNames}
+                    filteredNames={filteredSnapshots.map((item) => item.name)}
+                  />
+                )
+              }
+            >
+              <SelectableMainTable
+                id="instance-snapshot-table"
+                headers={headers}
+                rows={sortedRows}
+                sortable
+                emptyStateMsg="No snapshot found matching this search"
+                itemName="snapshot"
+                parentName="instance"
+                selectedNames={selectedNames}
+                setSelectedNames={setSelectedNames}
+                processingNames={processingNames}
+                filteredNames={filteredSnapshots.map(
+                  (snapshot) => snapshot.name,
+                )}
+                onUpdateSort={updateSort}
+                defaultSort="created_at"
+                defaultSortDirection="descending"
+              />
+            </TablePagination>
           </ScrollableTable>
         </>
       ) : (
diff --git a/src/pages/profiles/ProfileList.tsx b/src/pages/profiles/ProfileList.tsx
index c72aa870c1..66deacd82a 100644
--- a/src/pages/profiles/ProfileList.tsx
+++ b/src/pages/profiles/ProfileList.tsx
@@ -6,6 +6,7 @@ import {
   Notification,
   Row,
   SearchBox,
+  TablePagination,
   useNotify,
 } from "@canonical/react-components";
 import { fetchProfiles } from "api/profiles";
@@ -15,8 +16,6 @@ import Loader from "components/Loader";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import { getProfileInstances } from "util/usedBy";
 import usePanelParams from "util/usePanelParams";
-import { usePagination } from "util/pagination";
-import Pagination from "components/Pagination";
 import { defaultFirst } from "util/helpers";
 import ProfileLink from "./ProfileLink";
 import { isProjectWithProfiles } from "util/projects";
@@ -26,6 +25,7 @@ import NotificationRow from "components/NotificationRow";
 import CustomLayout from "components/CustomLayout";
 import HelpLink from "components/HelpLink";
 import { useDocs } from "context/useDocs";
+import useSortTableData from "util/useSortTableData";
 
 const ProfileList: FC = () => {
   const docBaseLink = useDocs();
@@ -159,7 +159,7 @@ const ProfileList: FC = () => {
     };
   });
 
-  const pagination = usePagination(rows);
+  const { rows: sortedRows, updateSort } = useSortTableData({ rows });
 
   return (
     <CustomLayout
@@ -215,32 +215,29 @@ const ProfileList: FC = () => {
           <ScrollableTable
             dependencies={[filteredProfiles, notify.notification]}
             belowId="pagination"
+            tableId="profile-table"
           >
-            <MainTable
-              headers={headers}
-              rows={pagination.pageData}
-              sortable
-              emptyStateMsg={
-                isLoading ? (
-                  <Loader text="Loading profiles..." />
-                ) : (
-                  <>No profile found matching this search</>
-                )
-              }
-              onUpdateSort={pagination.updateSort}
-            />
+            <TablePagination
+              data={sortedRows}
+              id="pagination"
+              itemName="profile"
+              position="below"
+            >
+              <MainTable
+                id="profile-table"
+                headers={headers}
+                sortable
+                emptyStateMsg={
+                  isLoading ? (
+                    <Loader text="Loading profiles..." />
+                  ) : (
+                    <>No profile found matching this search</>
+                  )
+                }
+                onUpdateSort={updateSort}
+              />
+            </TablePagination>
           </ScrollableTable>
-          <Pagination
-            {...pagination}
-            id="pagination"
-            totalCount={profiles.length}
-            visibleCount={
-              filteredProfiles.length === profiles.length
-                ? pagination.pageData.length
-                : filteredProfiles.length
-            }
-            keyword="profile"
-          />
         </Col>
       </Row>
     </CustomLayout>
diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx
index 148b29e4c8..c28f11faa4 100644
--- a/src/pages/settings/Settings.tsx
+++ b/src/pages/settings/Settings.tsx
@@ -161,8 +161,12 @@ const Settings: FC = () => {
           </Col>
         </Row>
         <Row>
-          <ScrollableTable dependencies={[notify.notification, rows]}>
+          <ScrollableTable
+            dependencies={[notify.notification, rows]}
+            tableId="settings-table"
+          >
             <MainTable
+              id="settings-table"
               headers={headers}
               rows={rows}
               emptyStateMsg="No data to display"
diff --git a/src/pages/storage/CustomIsoList.tsx b/src/pages/storage/CustomIsoList.tsx
index 338f454774..8da8b748a4 100644
--- a/src/pages/storage/CustomIsoList.tsx
+++ b/src/pages/storage/CustomIsoList.tsx
@@ -5,6 +5,7 @@ import {
   List,
   MainTable,
   SearchBox,
+  TablePagination,
   useNotify,
 } from "@canonical/react-components";
 import { humanFileSize, isoTimeToString } from "util/helpers";
@@ -16,10 +17,9 @@ import Loader from "components/Loader";
 import CreateInstanceFromImageBtn from "pages/images/actions/CreateInstanceFromImageBtn";
 import UploadCustomIsoBtn from "pages/images/actions/UploadCustomIsoBtn";
 import ScrollableTable from "components/ScrollableTable";
-import { usePagination } from "util/pagination";
-import Pagination from "components/Pagination";
 import { Link } from "react-router-dom";
 import { useDocs } from "context/useDocs";
+import useSortTableData from "util/useSortTableData";
 
 interface Props {
   project: string;
@@ -132,7 +132,7 @@ const CustomIsoList: FC<Props> = ({ project }) => {
     };
   });
 
-  const pagination = usePagination(rows);
+  const { rows: sortedRows, updateSort } = useSortTableData({ rows });
 
   if (isLoading) {
     return <Loader text="Loading custom ISOs..." />;
@@ -175,27 +175,22 @@ const CustomIsoList: FC<Props> = ({ project }) => {
         </div>
         <UploadCustomIsoBtn />
       </div>
-      <Pagination
-        {...pagination}
-        id="pagination"
-        className="u-no-margin--top"
-        totalCount={images.length}
-        visibleCount={
-          filteredImages.length === images.length
-            ? pagination.pageData.length
-            : filteredImages.length
-        }
-        keyword="custom ISO"
-      />
-      <ScrollableTable dependencies={[images]}>
-        <MainTable
-          headers={headers}
-          rows={pagination.pageData}
-          sortable
-          className="custom-iso-table"
-          onUpdateSort={pagination.updateSort}
-          emptyStateMsg="No custom ISOs found matching this search"
-        />
+      <ScrollableTable dependencies={[images]} tableId="custom-iso-table">
+        <TablePagination
+          data={sortedRows}
+          id="pagination"
+          className="u-no-margin--top"
+          itemName="custom ISO"
+        >
+          <MainTable
+            id="custom-iso-table"
+            headers={headers}
+            sortable
+            className="custom-iso-table"
+            onUpdateSort={updateSort}
+            emptyStateMsg="No custom ISOs found matching this search"
+          />
+        </TablePagination>
       </ScrollableTable>
     </div>
   );
diff --git a/src/pages/storage/CustomVolumeSelectModal.tsx b/src/pages/storage/CustomVolumeSelectModal.tsx
index adc0e740f7..f43c0513c4 100644
--- a/src/pages/storage/CustomVolumeSelectModal.tsx
+++ b/src/pages/storage/CustomVolumeSelectModal.tsx
@@ -116,8 +116,10 @@ const CustomVolumeSelectModal: FC<Props> = ({
       <ScrollableTable
         dependencies={[volumes, rows, notify.notification]}
         belowId="modal-footer"
+        tableId="volume-select-table"
       >
         <MainTable
+          id="volume-select-table"
           headers={headers}
           rows={rows}
           paginate={30}
diff --git a/src/pages/storage/StoragePools.tsx b/src/pages/storage/StoragePools.tsx
index bb56bb945d..b535d6b4f8 100644
--- a/src/pages/storage/StoragePools.tsx
+++ b/src/pages/storage/StoragePools.tsx
@@ -162,8 +162,9 @@ const StoragePools: FC = () => {
       <div className="upper-controls-bar">
         <CreateStoragePoolBtn project={project} />
       </div>
-      <ScrollableTable dependencies={[pools]}>
+      <ScrollableTable dependencies={[pools]} tableId="storage-pool-table">
         <MainTable
+          id="storage-pool-table"
           headers={headers}
           rows={rows}
           sortable
diff --git a/src/pages/storage/StorageVolumeSnapshots.tsx b/src/pages/storage/StorageVolumeSnapshots.tsx
index 2af0d86c40..ba8fe5c9bc 100644
--- a/src/pages/storage/StorageVolumeSnapshots.tsx
+++ b/src/pages/storage/StorageVolumeSnapshots.tsx
@@ -3,13 +3,12 @@ import {
   EmptyState,
   Icon,
   SearchBox,
+  TablePagination,
   useNotify,
 } from "@canonical/react-components";
 import { isoTimeToString } from "util/helpers";
 import VolumeSnapshotActions from "./actions/snapshots/VolumeSnapshotActions";
 import useEventListener from "@use-it/event-listener";
-import Pagination from "components/Pagination";
-import { usePagination } from "util/pagination";
 import ItemName from "components/ItemName";
 import SelectableMainTable from "components/SelectableMainTable";
 import Loader from "components/Loader";
@@ -26,6 +25,7 @@ import { useQuery } from "@tanstack/react-query";
 import { queryKeys } from "util/queryKeys";
 import { isSnapshotsDisabled } from "util/snapshots";
 import { figureCollapsedScreen } from "util/storageVolume";
+import useSortTableData from "util/useSortTableData";
 
 interface Props {
   volume: LxdStorageVolume;
@@ -176,7 +176,11 @@ const StorageVolumeSnapshots: FC<Props> = ({ volume }) => {
     };
   });
 
-  const pagination = usePagination(rows, "created_at", "descending");
+  const { rows: sortedRows, updateSort } = useSortTableData({
+    rows,
+    defaultSort: "created_at",
+    defaultSortDirection: "descending",
+  });
 
   const resize = () => {
     setSmallScreen(figureCollapsedScreen());
@@ -237,45 +241,46 @@ const StorageVolumeSnapshots: FC<Props> = ({ volume }) => {
 
       {hasSnapshots ? (
         <>
-          <Pagination
-            {...pagination}
-            id="pagination"
-            totalCount={volumeSnapshots.length ?? 0}
-            visibleCount={
-              filteredSnapshots.length === volumeSnapshots.length
-                ? pagination.pageData.length
-                : filteredSnapshots.length
-            }
-            selectedNotification={
-              selectedNames.length > 0 && (
-                <SelectedTableNotification
-                  totalCount={volumeSnapshots.length ?? 0}
-                  itemName="snapshot"
-                  parentName="volume"
-                  selectedNames={selectedNames}
-                  setSelectedNames={setSelectedNames}
-                  filteredNames={filteredSnapshots.map((item) => item.name)}
-                />
-              )
-            }
-            keyword="snapshot"
-          />
-          <ScrollableTable dependencies={[filteredSnapshots]}>
-            <SelectableMainTable
-              headers={headers}
-              rows={pagination.pageData}
-              sortable
-              emptyStateMsg="No snapshot found matching this search"
+          <ScrollableTable
+            dependencies={[filteredSnapshots]}
+            tableId="volume-snapshot-table"
+          >
+            <TablePagination
+              data={sortedRows}
+              id="pagination"
               itemName="snapshot"
-              parentName="instance"
-              selectedNames={selectedNames}
-              setSelectedNames={setSelectedNames}
-              processingNames={processingNames}
-              filteredNames={filteredSnapshots.map((snapshot) => snapshot.name)}
-              onUpdateSort={pagination.updateSort}
-              defaultSort="created_at"
-              defaultSortDirection="descending"
-            />
+              description={
+                selectedNames.length > 0 && (
+                  <SelectedTableNotification
+                    totalCount={volumeSnapshots.length ?? 0}
+                    itemName="snapshot"
+                    parentName="volume"
+                    selectedNames={selectedNames}
+                    setSelectedNames={setSelectedNames}
+                    filteredNames={filteredSnapshots.map((item) => item.name)}
+                  />
+                )
+              }
+            >
+              <SelectableMainTable
+                id="volume-snapshot-table"
+                headers={headers}
+                rows={sortedRows}
+                sortable
+                emptyStateMsg="No snapshot found matching this search"
+                itemName="snapshot"
+                parentName="instance"
+                selectedNames={selectedNames}
+                setSelectedNames={setSelectedNames}
+                processingNames={processingNames}
+                filteredNames={filteredSnapshots.map(
+                  (snapshot) => snapshot.name,
+                )}
+                onUpdateSort={updateSort}
+                defaultSort="created_at"
+                defaultSortDirection="descending"
+              />
+            </TablePagination>
           </ScrollableTable>
         </>
       ) : (
diff --git a/src/pages/storage/StorageVolumes.tsx b/src/pages/storage/StorageVolumes.tsx
index 8729ffd682..35afef1ea1 100644
--- a/src/pages/storage/StorageVolumes.tsx
+++ b/src/pages/storage/StorageVolumes.tsx
@@ -6,14 +6,13 @@ import {
   EmptyState,
   Icon,
   MainTable,
+  TablePagination,
   useNotify,
 } from "@canonical/react-components";
 import Loader from "components/Loader";
 import { isoTimeToString } from "util/helpers";
 import { loadVolumes } from "context/loadIsoVolumes";
 import ScrollableTable from "components/ScrollableTable";
-import { usePagination } from "util/pagination";
-import Pagination from "components/Pagination";
 import CreateVolumeBtn from "pages/storage/actions/CreateVolumeBtn";
 import StorageVolumesFilter, {
   CONTENT_TYPE,
@@ -49,6 +48,7 @@ import classnames from "classnames";
 import useEventListener from "@use-it/event-listener";
 import { useProject } from "context/project";
 import { isSnapshotsDisabled } from "util/snapshots";
+import useSortTableData from "util/useSortTableData";
 
 const StorageVolumes: FC = () => {
   const docBaseLink = useDocs();
@@ -360,7 +360,9 @@ const StorageVolumes: FC = () => {
     };
   });
 
-  const pagination = usePagination(rows);
+  const { rows: sortedRows, updateSort } = useSortTableData({
+    rows,
+  });
 
   if (isLoading || isProjectLoading) {
     return <Loader text="Loading storage volumes..." />;
@@ -401,27 +403,22 @@ const StorageVolumes: FC = () => {
           />
         </div>
       </div>
-      <Pagination
-        {...pagination}
-        id="pagination"
-        className="u-no-margin--top"
-        totalCount={volumes.length}
-        visibleCount={
-          filteredVolumes.length === volumes.length
-            ? pagination.pageData.length
-            : filteredVolumes.length
-        }
-        keyword="volume"
-      />
-      <ScrollableTable dependencies={[volumes]}>
-        <MainTable
-          headers={headers}
-          rows={pagination.pageData}
-          sortable
-          emptyStateMsg="No volumes found matching this search"
-          className="storage-volume-table"
-          onUpdateSort={pagination.updateSort}
-        />
+      <ScrollableTable dependencies={[volumes]} tableId="volume-table">
+        <TablePagination
+          data={sortedRows}
+          id="pagination"
+          itemName="volume"
+          className="u-no-margin--top"
+        >
+          <MainTable
+            id="volume-table"
+            headers={headers}
+            sortable
+            emptyStateMsg="No volumes found matching this search"
+            className="storage-volume-table"
+            onUpdateSort={updateSort}
+          />
+        </TablePagination>
       </ScrollableTable>
     </div>
   );
diff --git a/src/sass/_pagination.scss b/src/sass/_pagination.scss
deleted file mode 100644
index 5da37ff087..0000000000
--- a/src/sass/_pagination.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.pagination {
-  align-items: baseline;
-  display: flex;
-  margin-top: 1.2rem;
-
-  .description {
-    flex-grow: 1;
-  }
-
-  .back {
-    margin: 0 $spv--large;
-
-    i {
-      rotate: 90deg;
-    }
-  }
-
-  .next {
-    margin: 0 $spv--large;
-
-    i {
-      rotate: 270deg;
-    }
-  }
-
-  input {
-    margin-right: $spv--small;
-    min-width: 0;
-    width: 3rem;
-  }
-
-  select {
-    margin-left: $spv--x-large;
-    min-width: 0;
-    width: 7rem;
-  }
-}
diff --git a/src/sass/styles.scss b/src/sass/styles.scss
index fa558c6a94..71a09e76aa 100644
--- a/src/sass/styles.scss
+++ b/src/sass/styles.scss
@@ -72,7 +72,6 @@ $border-thin: 1px solid $color-mid-light !default;
 @import "network_map";
 @import "no_match";
 @import "operation_list";
-@import "pagination";
 @import "pattern_navigation";
 @import "pattern_terminal";
 @import "profile_detail_overview";
diff --git a/src/util/pagination.tsx b/src/util/pagination.tsx
deleted file mode 100644
index 684498a44b..0000000000
--- a/src/util/pagination.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { useState } from "react";
-import { usePagination as _usePagination } from "@canonical/react-components";
-import { MainTableRow } from "@canonical/react-components/dist/components/MainTable/MainTable";
-import { SortDirection } from "@canonical/react-components/dist/types";
-
-export const paginationOptions = [
-  {
-    label: "50/page",
-    value: 50,
-  },
-  {
-    label: "100/page",
-    value: 100,
-  },
-  {
-    label: "200/page",
-    value: 200,
-  },
-];
-
-export interface Pagination {
-  pageData: MainTableRow[];
-  currentPage: number;
-  paginate: (pageNumber: number) => void;
-  pageSize: number;
-  setPageSize: (newSize: number) => void;
-  totalPages: number;
-  updateSort: (sort?: string | null) => void;
-}
-
-export const usePagination = (
-  data: MainTableRow[],
-  defaultSort?: string,
-  defaultSortDirection: SortDirection = "ascending",
-): Pagination => {
-  const [_pageSize, _setPageSize] = useState(paginationOptions[0].value);
-  const [sort, setSort] = useState<string | null | undefined>(defaultSort);
-  const [sortDirection, setSortDirection] = useState(defaultSortDirection);
-
-  if (sort) {
-    data.sort((a, b) => {
-      const aVal = a.sortData ? (a.sortData[sort] as string) : "";
-      const bVal = b.sortData ? (b.sortData[sort] as string) : "";
-      if (aVal > bVal) {
-        return sortDirection === "ascending" ? 1 : -1;
-      }
-      if (aVal < bVal) {
-        return sortDirection === "ascending" ? -1 : 1;
-      }
-      return 0;
-    });
-  }
-
-  const updateSort = (newSort?: string | null) => {
-    if (newSort === sort) {
-      setSortDirection("descending");
-    } else {
-      setSortDirection("ascending");
-    }
-    setSort(newSort);
-  };
-
-  const usePagination = _usePagination(data, {
-    itemsPerPage: _pageSize,
-    autoResetPage: true,
-  });
-
-  const setPageSize = (val: number) => {
-    usePagination.paginate(1);
-    _setPageSize(val);
-  };
-
-  return {
-    ...usePagination,
-    pageSize: _pageSize,
-    setPageSize,
-    totalPages: Math.ceil(data.length / _pageSize),
-    updateSort,
-  };
-};
diff --git a/src/util/useSortTableData.tsx b/src/util/useSortTableData.tsx
new file mode 100644
index 0000000000..d41071071b
--- /dev/null
+++ b/src/util/useSortTableData.tsx
@@ -0,0 +1,45 @@
+import { SortDirection } from "@canonical/react-components";
+import { useState } from "react";
+import { MainTableRow } from "@canonical/react-components/dist/components/MainTable/MainTable";
+
+type Props = {
+  rows: MainTableRow[];
+  defaultSort?: string;
+  defaultSortDirection?: SortDirection;
+};
+
+const useSortTableData = (props: Props) => {
+  const { defaultSort, defaultSortDirection = "ascending", rows } = props;
+  const [sort, setSort] = useState<string | null | undefined>(defaultSort);
+  const [sortDirection, setSortDirection] = useState(defaultSortDirection);
+
+  if (sort) {
+    rows.sort((a, b) => {
+      const aVal = a.sortData ? (a.sortData[sort] as string) : "";
+      const bVal = b.sortData ? (b.sortData[sort] as string) : "";
+      if (aVal > bVal) {
+        return sortDirection === "ascending" ? 1 : -1;
+      }
+      if (aVal < bVal) {
+        return sortDirection === "ascending" ? -1 : 1;
+      }
+      return 0;
+    });
+  }
+
+  const updateSort = (newSort?: string | null) => {
+    if (newSort === sort) {
+      setSortDirection("descending");
+    } else {
+      setSortDirection("ascending");
+    }
+    setSort(newSort);
+  };
+
+  return {
+    rows,
+    updateSort,
+  };
+};
+
+export default useSortTableData;