added pagination

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import { useQuery, gql, DocumentNode } from "@apollo/client";
 import React from "react";
-import { Table, theme } from "@diamondlightsource/ui-components"
+import { Pagination, Table, theme } from "@diamondlightsource/ui-components"
 import { ChakraProvider } from "@chakra-ui/react";
 
 const GET_INFO: DocumentNode = gql`
@@ -20,22 +20,28 @@ function DisplayPinInfo(): React.JSX.Element {
   if (error) return <p>Error : {error.message} {error.extraInfo}</p>;
 
   return (
-    <Table
+    <><Table
       headers={[
-      {
-        key: 'barcode',
-        label: 'Barcode'
-      },
-      {
-        key: 'loopSize',
-        label: 'Loop Size'
-      },
-      {
-        key: 'status',
-        label: 'Status'
-      }
-    ]}
-    data={data.libraryPins}/>
+        {
+          key: 'barcode',
+          label: 'Barcode'
+        },
+        {
+          key: 'loopSize',
+          label: 'Loop Size'
+        },
+        {
+          key: 'status',
+          label: 'Status'
+        }
+      ]}
+      data={data.libraryPins} />
+      <Pagination
+        total={6} onPageChange={(page) => {
+          console.log(`On page: ${page}`)
+        }}
+      />
+    </>
   );
 }