Merge pull request #1 from miki-tebe/main

Add DataTable component with pagination
frectonz · Jun 13, 2024 · f16a36d · f16a36d
2 parents d7b9ce5 + b3ade48
commit f16a36d
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 6 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -17,6 +17,7 @@
     "@tanstack/react-query": "^5.44.0",
     "@tanstack/react-query-devtools": "^5.44.0",
     "@tanstack/react-router": "^1.35.3",
+    "@tanstack/react-table": "^8.17.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.394.0",

diff --git a/ui/src/components/ui/data-table.tsx b/ui/src/components/ui/data-table.tsx
@@ -0,0 +1,107 @@
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { Button } from "@/components/ui/button";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
+
+  return (
+    <div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </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}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/ui/src/routes/tables.lazy.tsx b/ui/src/routes/tables.lazy.tsx
@@ -1,19 +1,18 @@
-import "react-data-grid/lib/styles.css";
-
 import {
   HardDrive,
   DatabaseZap,
   TableProperties,
   Table as TableIcon,
 } from "lucide-react";
-import DataGrid from "react-data-grid";
 import { CodeBlock } from "react-code-blocks";
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute } from "@tanstack/react-router";
+import { ColumnDef } from "@tanstack/react-table";
 
 import { fetchTable, fetchTables } from "@/api";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsList, TabsContent, TabsTrigger } from "@/components/ui/tabs";
+import { DataTable } from "@/components/ui/data-table";
 
 export const Route = createFileRoute("/tables")({
   component: Tables,
@@ -52,7 +51,13 @@ function Table({ name }: Props) {
 
   if (!data) return;
 
-  const columns = data.columns.map((col) => ({ key: col, name: col }));
+  type Column = {
+    [key: string]: string;
+  };
+  const columns: ColumnDef<Column>[] = data.columns.map((col) => ({
+    accessorKey: col.toLowerCase(),
+    header: col,
+  }));
   const rows = data.rows.map((row) =>
     row.reduce((acc, curr, i) => {
       acc[data.columns[i]] = curr;
@@ -120,8 +125,7 @@ function Table({ name }: Props) {
       <Card className="font-mono text-sm">
         <CodeBlock text={data.sql} language="sql" showLineNumbers={false} />
       </Card>
-
-      <DataGrid columns={columns} rows={rows} className="rdg-light" />
+      <DataTable columns={columns} data={rows} />
     </div>
   );
 }