DataTable

import { DataTable, type DataTableColumnDef } from "@vortex/ui-icignal"
 
const columns: DataTableColumnDef<User>[] = [
  { id: "name", header: "이름", accessorKey: "name", size: 150 },
  { id: "email", header: "이메일", accessorKey: "email", size: 200 },
  { id: "role", header: "역할", accessorKey: "role", size: 120 },
]
 
const data = [
  { id: "1", name: "홍길동", email: "hong@example.com", role: "관리자" },
  { id: "2", name: "김철수", email: "kim@example.com", role: "분석가" },
  { id: "3", name: "이영희", email: "lee@example.com", role: "뷰어" },
]
 
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
/>

// 다중 선택
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  selectable
  enableMultiRowSelection
  onRowSelectionChange={(selectedRows) => {
    console.log("선택된 행:", selectedRows)
  }}
/>
 
// 단일 선택 (기본)
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  selectable
/>

<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  maxHeight={200}
/>

const columns: DataTableColumnDef<Product>[] = [
  {
    id: "name",
    header: "Name",
    accessorKey: "name",
    size: 180,
    meta: {
      filterVariant: "text",
      filterPlaceholder: "이름 검색...",
      filterAlwaysShow: true,
    },
  },
  {
    id: "category",
    header: "Category",
    accessorKey: "category",
    size: 130,
    meta: {
      filterVariant: "select",
      filterPlaceholder: "카테고리",
      filterAlwaysShow: true,
      filterOptions: [
        { label: "Electronics", value: "Electronics" },
        { label: "Clothing", value: "Clothing" },
      ],
    },
  },
  {
    id: "price",
    header: "Price",
    accessorKey: "price",
    size: 100,
    cell: ({ getValue }) => `$${(getValue() as number).toFixed(2)}`,
    meta: { editable: false },
  },
]
 
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  editable
  columnFilters={columnFilters}
  onColumnFiltersChange={setColumnFilters}
  onCellUpdate={(rowIndex, columnId, value) =>
    console.log({ rowIndex, columnId, value })
  }
/>

const columns: DataTableColumnDef<Product>[] = [
  {
    id: "name",
    header: "Name",
    accessorKey: "name",
    meta: {
      filterVariant: "text",
      filterAlwaysShow: true,
      filterOrder: 2, // 세 번째로 표시
    },
  },
  {
    id: "category",
    header: "Category",
    accessorKey: "category",
    meta: {
      filterVariant: "select",
      filterAlwaysShow: true,
      filterOrder: 0, // 첫 번째로 표시
      filterOptions: [
        { label: "Electronics", value: "Electronics" },
        { label: "Clothing", value: "Clothing" },
      ],
    },
  },
  {
    id: "status",
    header: "Status",
    accessorKey: "status",
    meta: {
      filterVariant: "select",
      filterAlwaysShow: true,
      filterOrder: 1, // 두 번째로 표시
      filterOptions: [
        { label: "Active", value: "active" },
        { label: "Inactive", value: "inactive" },
      ],
    },
  },
]
 
// 필터 순서: Category → Status → Name (컬럼 순서와 무관)
// 컬럼 선택기 숨김, Reset 버튼은 필터가 있을 때만 노출
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  columnFilters={columnFilters}
  onColumnFiltersChange={setColumnFilters}
  showColumnSelector={false}
/>

const columns: DataTableColumnDef<Product>[] = [
  {
    id: "id",
    header: "ID",
    accessorKey: "id",
    size: 80,
    meta: { pinned: "left" },
  },
  { id: "name", header: "Name", accessorKey: "name", size: 200 },
  {
    id: "actions",
    header: "Actions",
    size: 100,
    meta: { pinned: "right" },
    cell: () => <Button variant="ghost" size="sm">Detail</Button>,
  },
]
 
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  enableRowPinning
  rowPinning={{ top: ["1", "2"], bottom: ["50"] }}
  maxHeight="300px"
  tableLayout="fixed"
/>

<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  manualPagination
  pageCount={totalPages}
  pageSizeOptions={[10, 20, 50]}
  onPaginationChange={({ pageIndex, pageSize }) => {
    fetchData(pageIndex, pageSize)
  }}
/>

const columns: DataTableColumnDef<Metric>[] = [
  { id: "metric", header: "지표", accessorKey: "metric", size: 150 },
  { id: "current", header: "현재 값", accessorKey: "current", size: 120 },
  { id: "previous", header: "이전 값", accessorKey: "previous", size: 120 },
  { id: "change", header: "변화율", accessorKey: "change", size: 100 },
]
 
const data = [
  { id: "1", metric: "페이지뷰", current: "125,430", previous: "118,200", change: "+6.1%" },
  { id: "2", metric: "세션", current: "45,200", previous: "42,800", change: "+5.6%" },
  { id: "3", metric: "순 방문자", current: "32,100", previous: "30,500", change: "+5.2%" },
  { id: "4", metric: "이탈률", current: "42.3%", previous: "44.1%", change: "-4.1%" },
  { id: "5", metric: "평균 체류시간", current: "3m 24s", previous: "3m 10s", change: "+7.4%" },
]
 
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
/>

import { DataTable, Badge, type DataTableColumnDef } from "@vortex/ui-icignal"
 
const columns: DataTableColumnDef<Product>[] = [
  { id: "name", header: "Name", accessorKey: "name", size: 150 },
  {
    id: "price",
    header: "Price",
    accessorKey: "price",
    size: 100,
    cell: ({ getValue }) => `$${(getValue() as number).toFixed(2)}`,
  },
  {
    id: "status",
    header: "Status",
    accessorKey: "status",
    size: 100,
    cell: ({ getValue }) => {
      const status = getValue() as string
      return (
        <Badge variant={status === "active" ? "default" : "secondary"}>
          {status}
        </Badge>
      )
    },
  },
]