data table refactor

Author: cvs0

src/components/ui/password-table/data-table-columns.tsx

@@ -0,0 +1,65 @@
+import { Eye } from "lucide-react";
+import { Button } from "../button";
+import { DropdownActions } from "./dropdown-actions";
+import { ColumnDef, Row } from "@tanstack/react-table";
+import { PasswordItem } from "@prisma/client";
+
+type DataTableColumnsProps<TData extends PasswordItem> = {
+  toggleVisibility: (id: string) => void;
+  visibility: Record<string, boolean>;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setCurrentId: (id: string) => void;
+};
+
+export function DataTableColumns<TData extends PasswordItem>({
+  toggleVisibility,
+  visibility,
+  setOpen,
+  setCurrentId,
+}: DataTableColumnsProps<TData>): ColumnDef<TData>[] {
+  return [
+    {
+      accessorKey: "website",
+      header: "Website",
+    },
+    {
+      accessorKey: "username",
+      header: "Username",
+    },
+    {
+      accessorKey: "password",
+      header: "Password",
+      cell: ({ row }: { row: Row<TData> }) => {
+        const entry = row.original;
+        const isVisible = visibility[entry.id] || false;
+
+        return (
+          <div className="flex items-center">
+            <span>{isVisible ? entry.password : "••••••••"}</span>
+            <Button
+              variant="ghost"
+              className="ml-2 h-8 w-8 p-0"
+              onClick={() => toggleVisibility(entry.id)}
+            >
+              <Eye />
+            </Button>
+          </div>
+        );
+      },
+    },
+    {
+      header: "Created At",
+      accessorKey: "createdAt",
+      cell: ({ getValue }) => {
+        const date = new Date(getValue() as string);
+        return date.toLocaleDateString();
+      },
+    },
+    {
+      id: "actions",
+      cell: ({ row }: { row: Row<TData> }) => {
+        return <DropdownActions entry={row.original} setOpen={setOpen} setCurrentId={setCurrentId} />;
+      },
+    },
+  ];
+}

src/components/ui/password-table/data-table-table.tsx

@@ -0,0 +1,94 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  flexRender,
+  Row,
+  ColumnDef,
+  useReactTable,
+  getCoreRowModel,
+} from "@tanstack/react-table";
+import { DataTableColumns } from "./data-table-columns";
+import { useState } from "react";
+import {PasswordItem} from "@prisma/client";
+
+type DataTableTableProps<TData> = {
+  decryptedData: TData[];
+  loading: boolean;
+  setCurrentId: (id: string) => void;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+export function DataTableTable<TData>({
+  decryptedData,
+  loading,
+  setCurrentId,
+  setOpen,
+}: DataTableTableProps<PasswordItem>) {
+  const [visibility, setVisibility] = useState<Record<string, boolean>>({});
+
+  const toggleVisibility = (id: string) => {
+    setVisibility((prev) => ({ ...prev, [id]: !prev[id] }));
+    setCurrentId(id);
+  };
+
+  const columns: ColumnDef<PasswordItem>[] = DataTableColumns({
+    toggleVisibility,
+    visibility,
+    setOpen,
+    setCurrentId,
+  });
+
+  const table = useReactTable({
+    data: decryptedData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div className="rounded-md border table-fixed w-full">
+      <Table className="table-fixed w-full">
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <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: Row<PasswordItem>) => (
+              <TableRow key={row.id}>
+                {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>
+  );
+}