✨ Add client-side pagination to Archetypes table (#1370)

Part of #1264, see [checklist here](#1264 (comment)). Signed-off-by: Mike Turley <mike.turley@alum.cs.umass.edu>
konveyor · Sep 18, 2023 · 063e16a · 063e16a
1 parent 3feb39a
commit 063e16a
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/client/src/app/pages/archetypes/archetypes-page.tsx b/client/src/app/pages/archetypes/archetypes-page.tsx
@@ -55,6 +55,7 @@ import { ConfirmDialog } from "@app/components/ConfirmDialog";
 import { formatPath, getAxiosErrorMessage } from "@app/utils/utils";
 import { AxiosError } from "axios";
 import { Paths } from "@app/Paths";
+import { SimplePagination } from "@app/components/SimplePagination";
 
 const Archetypes: React.FC = () => {
   const { t } = useTranslation();
@@ -130,7 +131,7 @@ const Archetypes: React.FC = () => {
     }),
     initialSort: { columnKey: "name", direction: "asc" },
 
-    hasPagination: false, // TODO: Add pagination
+    hasPagination: true,
   });
   const {
     currentPageItems,
@@ -219,7 +220,13 @@ const Archetypes: React.FC = () => {
                     <CreateButton />
                   </ToolbarItem>
                 </ToolbarGroup>
-                {/* TODO: Add pagination */}
+                <ToolbarItem {...paginationToolbarItemProps}>
+                  <SimplePagination
+                    idPrefix="archetypes-table"
+                    isTop
+                    paginationProps={paginationProps}
+                  />
+                </ToolbarItem>
               </ToolbarContent>
             </Toolbar>
 
@@ -315,8 +322,11 @@ const Archetypes: React.FC = () => {
                 ))}
               </ConditionalTableBody>
             </Table>
-
-            {/* TODO: Add pagination */}
+            <SimplePagination
+              idPrefix="archetypes-table"
+              isTop={false}
+              paginationProps={paginationProps}
+            />
           </div>
         </ConditionalRender>
       </PageSection>