feat: components 패키지에 Table 컴포넌트 추가
This commit is contained in:
@@ -1,78 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
|
||||
import "@common/assets/styles/grid.css";
|
||||
import Grid from "@toast-ui/react-grid";
|
||||
|
||||
const meta: Meta<typeof Grid> = {
|
||||
title: "External/Grid",
|
||||
component: Grid,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `
|
||||
- [Docs](https://github.com/nhn/tui.grid/blob/master/packages/toast-ui.react-grid/README.md)
|
||||
- [API Reference](https://nhn.github.io/tui.grid/latest/Grid)
|
||||
`,
|
||||
},
|
||||
source: {
|
||||
code: `
|
||||
import "@common/assets/styles/grid.css";
|
||||
import Grid from "@toast-ui/react-grid";
|
||||
|
||||
const data = [
|
||||
{ id: 1, name: "Editor" },
|
||||
{ id: 2, name: "Grid" },
|
||||
{ id: 3, name: "Chart" },
|
||||
];
|
||||
|
||||
const columns = [
|
||||
{ name: "id", header: "ID" },
|
||||
{ name: "name", header: "Name" },
|
||||
];
|
||||
|
||||
return (
|
||||
<Grid
|
||||
data={data}
|
||||
columns={columns}
|
||||
rowHeight={25}
|
||||
bodyHeight={100}
|
||||
heightResizable={true}
|
||||
rowHeaders={["rowNum"]}
|
||||
/>
|
||||
);
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Grid>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => {
|
||||
const data = [
|
||||
{ id: 1, name: "Editor" },
|
||||
{ id: 2, name: "Grid" },
|
||||
{ id: 3, name: "Chart" },
|
||||
];
|
||||
|
||||
const columns = [
|
||||
{ name: "id", header: "ID" },
|
||||
{ name: "name", header: "Name" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-[50vw]">
|
||||
<Grid
|
||||
data={data}
|
||||
columns={columns}
|
||||
rowHeight={25}
|
||||
bodyHeight={100}
|
||||
heightResizable={true}
|
||||
rowHeaders={["rowNum"]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,74 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import "./table.css";
|
||||
|
||||
import {
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
type ColumnDef,
|
||||
} from "@tanstack/react-table";
|
||||
|
||||
interface TableProps<T> {
|
||||
data: T[];
|
||||
columns: ColumnDef<T, any>[];
|
||||
}
|
||||
|
||||
function Table<T>({ data, columns }: TableProps<T>) {
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="p-2">
|
||||
<table>
|
||||
<thead>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody>
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<tr key={row.id}>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
{/* <tfoot>
|
||||
{table.getFooterGroups().map((footerGroup) => (
|
||||
<tr key={footerGroup.id}>
|
||||
{footerGroup.headers.map((header) => (
|
||||
<th key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.footer,
|
||||
header.getContext(),
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tfoot> */}
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export { Table };
|
||||
@@ -0,0 +1,6 @@
|
||||
th {
|
||||
@apply bg-[#c6ccd1] px-4 py-[1.2rem] text-[1.3rem] font-normal text-[#fff];
|
||||
}
|
||||
td {
|
||||
@apply border-b border-b-[#e0e6ea] px-4 py-[1.2rem] text-[1.3rem] font-normal text-[#666];
|
||||
}
|
||||
@@ -0,0 +1,170 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { Table } from ".";
|
||||
import { createColumnHelper } from "@tanstack/react-table";
|
||||
|
||||
const meta: Meta<typeof Table> = {
|
||||
title: "Elements/Table",
|
||||
component: Table,
|
||||
parameters: {
|
||||
docs: {
|
||||
description: {
|
||||
component: `
|
||||
- [Docs](https://ui.shadcn.com/docs/components/switch)
|
||||
- [API Reference](https://www.radix-ui.com/primitives/docs/components/switch#api-reference)
|
||||
`,
|
||||
},
|
||||
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(),
|
||||
footer: (info) => info.column.id,
|
||||
}),
|
||||
columnHelper.accessor((row) => row.lastName, {
|
||||
id: "lastName",
|
||||
cell: (info) => <i>{info.getValue()}</i>,
|
||||
header: () => <span>Last Name</span>,
|
||||
footer: (info) => info.column.id,
|
||||
}),
|
||||
columnHelper.accessor("age", {
|
||||
header: () => "Age",
|
||||
cell: (info) => info.renderValue(),
|
||||
footer: (info) => info.column.id,
|
||||
}),
|
||||
columnHelper.accessor("visits", {
|
||||
header: () => <span>Visits</span>,
|
||||
footer: (info) => info.column.id,
|
||||
}),
|
||||
columnHelper.accessor("status", {
|
||||
header: "Status",
|
||||
footer: (info) => info.column.id,
|
||||
}),
|
||||
columnHelper.accessor("progress", {
|
||||
header: "Profile Progress",
|
||||
footer: (info) => info.column.id,
|
||||
}),
|
||||
];
|
||||
|
||||
return <Table data={defaultData} columns={columns} />;
|
||||
`,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Table>;
|
||||
|
||||
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(),
|
||||
footer: (info) => info.column.id,
|
||||
}),
|
||||
columnHelper.accessor((row) => row.lastName, {
|
||||
id: "lastName",
|
||||
cell: (info) => <i>{info.getValue()}</i>,
|
||||
header: () => <span>Last Name</span>,
|
||||
footer: (info) => info.column.id,
|
||||
}),
|
||||
columnHelper.accessor("age", {
|
||||
header: () => "Age",
|
||||
cell: (info) => info.renderValue(),
|
||||
footer: (info) => info.column.id,
|
||||
}),
|
||||
columnHelper.accessor("visits", {
|
||||
header: () => <span>Visits</span>,
|
||||
footer: (info) => info.column.id,
|
||||
}),
|
||||
columnHelper.accessor("status", {
|
||||
header: "Status",
|
||||
footer: (info) => info.column.id,
|
||||
}),
|
||||
columnHelper.accessor("progress", {
|
||||
header: "Profile Progress",
|
||||
footer: (info) => info.column.id,
|
||||
}),
|
||||
];
|
||||
|
||||
return <Table data={defaultData} columns={columns} />;
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user