feat: components 패키지에 Table, DataTable 컴포넌트 추가

2025-02-27 18:39:18 +09:00
parent 87a4866a5b
commit d77f46d121
15 changed files with 416 additions and 2104 deletions
@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { createColumnHelper } from "@tanstack/react-table";
+import { DataTable } from ".";
+
+const meta: Meta<typeof DataTable> = {
+  title: "Elements/DataTable",
+  component: DataTable,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+- [Docs](https://tanstack.com/table/v8/docs/introduction)
+`,
+      },
+      source: {
+        code: `
+import { createColumnHelper } from "@tanstack/react-table";
+
+type Person = {
+  firstName: string;
+  lastName: string;
+  age: number;
+  visits: number;
+  status: string;
+  progress: number;
+};
+
+const defaultData: Person[] = [
+  {
+    firstName: "tanner",
+    lastName: "linsley",
+    age: 24,
+    visits: 100,
+    status: "In Relationship",
+    progress: 50,
+  },
+  {
+    firstName: "tandy",
+    lastName: "miller",
+    age: 40,
+    visits: 40,
+    status: "Single",
+    progress: 80,
+  },
+  {
+    firstName: "joe",
+    lastName: "dirte",
+    age: 45,
+    visits: 20,
+    status: "Complicated",
+    progress: 10,
+  },
+];
+
+const columnHelper = createColumnHelper<Person>();
+
+const columns = [
+  columnHelper.accessor("firstName", {
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor((row) => row.lastName, {
+    id: "lastName",
+    cell: (info) => <i>{info.getValue()}</i>,
+    header: () => <span>Last Name</span>,
+  }),
+  columnHelper.accessor("age", {
+    header: () => "Age",
+    cell: (info) => info.renderValue(),
+  }),
+  columnHelper.accessor("visits", {
+    header: () => <span>Visits</span>,
+  }),
+  columnHelper.accessor("status", {
+    header: "Status",
+  }),
+  columnHelper.accessor("progress", {
+    header: "Profile Progress",
+  }),
+];
+
+return <Table data={defaultData} columns={columns} />;
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DataTable>;
+
+export const Default: Story = {
+  render: () => {
+    type Person = {
+      firstName: string;
+      lastName: string;
+      age: number;
+      visits: number;
+      status: string;
+      progress: number;
+    };
+
+    const defaultData: Person[] = [
+      {
+        firstName: "tanner",
+        lastName: "linsley",
+        age: 24,
+        visits: 100,
+        status: "In Relationship",
+        progress: 50,
+      },
+      {
+        firstName: "tandy",
+        lastName: "miller",
+        age: 40,
+        visits: 40,
+        status: "Single",
+        progress: 80,
+      },
+      {
+        firstName: "joe",
+        lastName: "dirte",
+        age: 45,
+        visits: 20,
+        status: "Complicated",
+        progress: 10,
+      },
+    ];
+
+    const columnHelper = createColumnHelper<Person>();
+
+    const columns = [
+      columnHelper.accessor("firstName", {
+        cell: (info) => info.getValue(),
+      }),
+      columnHelper.accessor((row) => row.lastName, {
+        id: "lastName",
+        cell: (info) => <i>{info.getValue()}</i>,
+        header: () => <span>Last Name</span>,
+      }),
+      columnHelper.accessor("age", {
+        header: () => "Age",
+        cell: (info) => info.renderValue(),
+      }),
+      columnHelper.accessor("visits", {
+        header: () => <span>Visits</span>,
+      }),
+      columnHelper.accessor("status", {
+        header: "Status",
+      }),
+      columnHelper.accessor("progress", {
+        header: "Profile Progress",
+      }),
+    ];
+
+    return <DataTable data={defaultData} columns={columns} />;
+  },
+};
@@ -0,0 +1,76 @@
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  type ColumnDef,
+  type RowData,
+  type Table as TableType,
+} from "@tanstack/react-table";
+import { Table, TableCell, TableHead, TableHeader, TableRow } from "../table";
+
+declare module "@tanstack/react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    align: "left" | "center" | "right";
+  }
+}
+
+function THead<T>({ table }: { table: TableType<T> }) {
+  return (
+    <TableHeader>
+      {table.getHeaderGroups().map((headerGroup) => (
+        <TableRow key={headerGroup.id}>
+          {headerGroup.headers.map((header) => {
+            const { meta } = header.column.columnDef;
+            return (
+              <TableHead key={header.id} className="sticky top-0" {...meta}>
+                {header.isPlaceholder
+                  ? null
+                  : flexRender(
+                      header.column.columnDef.header,
+                      header.getContext(),
+                    )}
+              </TableHead>
+            );
+          })}
+        </TableRow>
+      ))}
+    </TableHeader>
+  );
+}
+
+interface TableProps<T> {
+  data: T[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  columns: ColumnDef<T, any>[];
+}
+
+function DataTable<T>({ data, columns }: TableProps<T>) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <Table className="w-full">
+      <THead table={table} />
+      <tbody>
+        {table.getRowModel().rows.map((row) => (
+          <TableRow key={row.id}>
+            {row.getVisibleCells().map((cell) => {
+              const { meta } = cell.column.columnDef;
+              return (
+                <TableCell key={cell.id} align="center" {...meta}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              );
+            })}
+          </TableRow>
+        ))}
+      </tbody>
+    </Table>
+  );
+}
+
+export { DataTable };