🎨 style: establish console design system

2026-09-13 10:49:21 +00:00 · 2026-08-13 02:19:26 +07:00
parent 5e88c660dc
commit 3a09f0b571
26 changed files with 840 additions and 269 deletions
@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+export type DataTableColumn<T> = {
+  id: string;
+  header: ReactNode;
+  cell: (item: T) => ReactNode;
+  className?: string;
+  headerClassName?: string;
+};
+
+type DataTableProps<T> = {
+  data: readonly T[];
+  columns: readonly DataTableColumn<T>[];
+  getRowKey: (item: T, index: number) => string | number;
+};
+
+export function DataTable<T>({ data, columns, getRowKey }: DataTableProps<T>) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          {columns.map((column) => (
+            <TableHead key={column.id} className={column.headerClassName}>
+              {column.header}
+            </TableHead>
+          ))}
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((item, index) => (
+          <TableRow key={getRowKey(item, index)}>
+            {columns.map((column) => (
+              <TableCell key={column.id} className={column.className}>
+                {column.cell(item)}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}