From 5442ed1cf213a7a2fe24b437544ea72303b436bd Mon Sep 17 00:00:00 2001
From: Leonardo <leomilho@gmail.com>
Date: Fri, 19 Jul 2024 16:47:03 +0200
Subject: [PATCH] feat(table): anchor pagination to the bottom
---
libs/shared/lib/components/pagination/index.tsx | 4 +++-
.../lib/vis/visualizations/tablevis/components/Table.tsx | 5 +++--
2 files changed, 6 insertions(+), 3 deletions(-)
diff --git a/libs/shared/lib/components/pagination/index.tsx b/libs/shared/lib/components/pagination/index.tsx
index b130b6a1a..4a0cf94aa 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 1a423108e..83442da2a 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>
)}
</>
);
--
GitLab