🔧 Library page table pagination

src/client/components/shared/MetadataPanel.tsx

@@ -77,14 +77,9 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                   </div>
                 )}
               </div>
-              
+
             </div>
-            <div className="control">
-              <div className="tags has-addons">
-                <span className="tag is-light is-success">Path</span>
-                <span className="tag is-warning is-light">{rawFileDetails.containedIn}</span>
-              </div>
-              </div>
+            
           </dd>
         </dl>
       ),
@@ -218,7 +213,7 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
                   orientation={"vertical"}
                   hasDetails={false}
                   imageStyle={props.imageStyle}
-                  // cardContainerStyle={{ maxWidth: 200 }}
+                // cardContainerStyle={{ maxWidth: 200 }}
                 />
               </div>
               <div className="column">{metadataPanel.content()}</div>

src/client/components/shared/T2Table.tsx

@@ -4,22 +4,39 @@ import {
   ColumnDef,
   flexRender,
   getCoreRowModel,
+  getFilteredRowModel,
   useReactTable,
+  PaginationState,
 } from "@tanstack/react-table";
 
 export const T2Table = (tableOptions): ReactElement => {
-  const { rowData, columns, paginationHandlers, totalPages, rowClickHandler } =
+  const { rowData, columns, paginationHandlers: { nextPage, previousPage }, totalPages, rowClickHandler } =
     tableOptions;
-  const [isPageSizeDropdownCollapsed, collapsePageSizeDropdown] =
-    useState(false);
-  const togglePageSizeDropdown = () =>
-    collapsePageSizeDropdown(!isPageSizeDropdownCollapsed);
+  
   const table = useReactTable({
     data: rowData,
     columns,
+    manualPagination: true,
     getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    pageCount: totalPages,
+    // getPaginationRowModel: getPaginationRowModel(),
   });
 
+  const [{ pageIndex, pageSize }, setPagination] =
+    React.useState<PaginationState>({
+      pageIndex: 0,
+      pageSize: 10,
+    })
+
+  const pagination = React.useMemo(
+    () => ({
+      pageIndex,
+      pageSize,
+    }),
+    [pageIndex, pageSize]
+  )
+
   return (
     <>
       <table className="table is-hoverable">
@@ -62,6 +79,12 @@ export const T2Table = (tableOptions): ReactElement => {
       </table>
 
       {/* pagination control */}
+      <nav className="pagination">
+        {table.getState().pagination.pageIndex + 1}
+        
+        <div className="button" onClick={() => table.nextPage()}> Next Page </div>
+        <div className="button" onClick={previousPage}> Previous Page</div>
+      </nav>
 
     </>
   );