refactor data table a bit

frontend/src/components/db-table-view/table.tsx

@@ -0,0 +1,110 @@
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui";
+import { cn } from "@/lib/utils";
+import { type Table as ReactTable, flexRender } from "@tanstack/react-table";
+import { ArrowUp } from "lucide-react";
+
+export function TableView<T>({
+  table,
+  columnLength = 1,
+}: { table: ReactTable<T>; columnLength?: number }) {
+  return (
+    <Table
+      className={"table-fixed min-w-full"}
+      {...{
+        style: {
+          width: table.getCenterTotalSize(),
+        },
+      }}
+    >
+      <TableHeader>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <TableRow key={headerGroup.id} className={"sticky top-0"}>
+            {headerGroup.headers.map((header) => {
+              const sorted = header.column.getIsSorted();
+
+              return (
+                <TableHead
+                  className={"p-0 relative"}
+                  key={header.id}
+                  style={{
+                    width: header.getSize(),
+                  }}
+                >
+                  <Button
+                    variant="ghost"
+                    onClick={header.column.getToggleSortingHandler()}
+                    className={"select-text"}
+                    title={
+                      header.column.getNextSortingOrder() === "asc"
+                        ? "Sort ascending"
+                        : header.column.getNextSortingOrder() === "desc"
+                          ? "Sort descending"
+                          : "Clear sort"
+                    }
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                    <ArrowUp
+                      className={cn(
+                        "ml-2 size-4 opacity-0 transition-transform",
+                        sorted && "opacity-100",
+                        (sorted as string) === "desc" && "rotate-180",
+                      )}
+                    />
+                  </Button>
+                  <div
+                    {...{
+                      onDoubleClick: () => header.column.resetSize(),
+                      onMouseDown: header.getResizeHandler(),
+                      onTouchStart: header.getResizeHandler(),
+                      className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
+                    }}
+                  />
+                </TableHead>
+              );
+            })}
+          </TableRow>
+        ))}
+      </TableHeader>
+      <TableBody>
+        {table.getRowModel().rows?.length ? (
+          table.getRowModel().rows.map((row) => (
+            <TableRow
+              key={row.id}
+              data-state={row.getIsSelected() && "selected"}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <TableCell
+                  key={cell.id}
+                  style={{
+                    width: cell.column.getSize(),
+                  }}
+                >
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))
+        ) : (
+          <TableRow>
+            <TableCell colSpan={columnLength} className="h-24 text-center">
+              No results.
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}