diff --git a/libs/shared/lib/components/pagination/index.tsx b/libs/shared/lib/components/pagination/index.tsx index b130b6a1a2e5f9fe43642ddf1d95e58f68856fad..4a0cf94aac30be636b5a45e16fedd85c8c25065a 100644 --- a/libs/shared/lib/components/pagination/index.tsx +++ b/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} diff --git a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx b/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx index 1a423108ea8abbb4c157d62d45e41244a495623e..83442da2a2155ed5fe48977f71f0b250278c2ccd 100644 --- a/libs/shared/lib/vis/visualizations/tablevis/components/Table.tsx +++ b/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> )} </> );