From 709ac0296d37e6e9695d146529c9e251d87baae5 Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Sun, 14 Jul 2024 13:22:10 +0200
Subject: [PATCH] refactor data table a bit

---
 frontend/src/components/db-table-view/data-table.tsx | 9 ++++++---
 frontend/src/components/db-table-view/table.tsx      | 9 +++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/db-table-view/data-table.tsx b/frontend/src/components/db-table-view/data-table.tsx
index b8b8bba..b2407d0 100644
--- a/frontend/src/components/db-table-view/data-table.tsx
+++ b/frontend/src/components/db-table-view/data-table.tsx
@@ -1,4 +1,7 @@
-import { TableView } from "@/components/db-table-view/table";
+import {
+  TableScrollContainer,
+  TableView,
+} from "@/components/db-table-view/table";
 import {
   Button,
   DataTablePagination,
@@ -230,9 +233,9 @@ export const DataTable = ({
       </div>
 
       <div className="rounded-md border min-h-0 h-full w-full min-w-0 flex flex-col">
-        <div className={"flex flex-col flex-1 overflow-auto relative"}>
+        <TableScrollContainer>
           <TableView table={table} columnLength={columns.length} />
-        </div>
+        </TableScrollContainer>
       </div>
       <DataTablePagination table={table} />
     </div>
diff --git a/frontend/src/components/db-table-view/table.tsx b/frontend/src/components/db-table-view/table.tsx
index 8951dff..2b8a99c 100644
--- a/frontend/src/components/db-table-view/table.tsx
+++ b/frontend/src/components/db-table-view/table.tsx
@@ -10,6 +10,7 @@ import {
 import { cn } from "@/lib/utils";
 import { type Table as ReactTable, flexRender } from "@tanstack/react-table";
 import { ArrowUp } from "lucide-react";
+import type { PropsWithChildren } from "react";
 
 export function TableView<T>({
   table,
@@ -108,3 +109,11 @@ export function TableView<T>({
     </Table>
   );
 }
+
+export function TableScrollContainer({ children }: PropsWithChildren) {
+  return (
+    <div className={"flex flex-col flex-1 overflow-auto relative"}>
+      {children}
+    </div>
+  );
+}