feat(table): anchor pagination to the bottom

libs/shared/lib/components/pagination/index.tsx

@@ -9,6 +9,7 @@ export type PaginationProps = {
   numItemsArrayReal: number;
   totalItems: number;
   arrangement?: 'vertical' | 'horizontal';
+  className?: string;
 };
 
 export const Pagination: React.FC<PaginationProps> = ({
@@ -19,6 +20,7 @@ export const Pagination: React.FC<PaginationProps> = ({
   numItemsArrayReal,
   totalItems,
   arrangement = 'horizontal',
+  className = '',
 }) => {
   const firstItem = (currentPage - 1) * itemsPerPageInput + 1;
 
@@ -39,7 +41,7 @@ export const Pagination: React.FC<PaginationProps> = ({
 
   return (
     <div
-      className={`self-center table-pagination flex flex-col items-center py-2 gap-1.5 ${arrangement === 'vertical' ? 'flex-col' : 'flex-row'}`}
+      className={`self-center table-pagination flex flex-col items-center py-2 gap-1.5 ${arrangement === 'vertical' ? 'flex-col' : 'flex-row'} ${className}`}
     >
       <div className="inline-block text-sm">
         <span className="font-semibold">{`${firstItem} - ${numItemsArrayReal}`}</span> of {totalItems}

libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx

@@ -245,7 +245,7 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
   return (
     <>
       {currentPage && currentPage?.currentData?.length > 0 && data2Render?.length > 0 && (
-        <>
+        <div className="h-full flex flex-col">
           <div className={styles['table-container']}>
             <table className={`${styles.table} bg-secondary-100`}>
               <thead className="thead">
@@ -355,8 +355,9 @@ export const Table = ({ data, itemsPerPage, showBarPlot, showAttributes, selecte
             itemsPerPageInput={itemsPerPage}
             numItemsArrayReal={currentPage.startIndex + currentPage.currentData.length}
             totalItems={sortedData.length}
+            className="mt-auto"
           />
-        </>
+        </div>
       )}
     </>
   );