Table

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@msub-core/ui/components/table"

function MyTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>이름</TableHead>
          <TableHead>이메일</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>김철수</TableCell>
          <TableCell>[email protected]</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

import { DataTable, type ColumnDef } from "@msub-core/ui/components/table"

const columns: ColumnDef<User>[] = [
  { id: "name", header: "이름", accessorKey: "name", sortable: true },
  { id: "email", header: "이메일", accessorKey: "email" },
  { id: "role", header: "역할", cell: (row) => <Badge>{row.role}</Badge> },
]

function MyDataTable() {
  const [selectedIds, setSelectedIds] = useState([])
  const [page, setPage] = useState(1)

  return (
    <DataTable
      columns={columns}
      data={users}
      selectable
      selectedIds={selectedIds}
      onSelectionChange={setSelectedIds}
      pagination
      page={page}
      pageSize={10}
      totalItems={users.length}
      onPageChange={setPage}
    />
  )
}