refactor data table a bit

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>

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>
+  );
+}