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}
/>

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

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}
  maxHeight={200}
/>

const CATEGORY_OPTIONS = [
  { label: "Electronics", value: "Electronics" },
  { label: "Clothing", value: "Clothing" },
]
 
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: CATEGORY_OPTIONS,
      editType: "lookup",      // 검색 가능한 Combobox
      editOptions: CATEGORY_OPTIONS,
      editPlaceholder: "카테고리 검색...",
    },
  },
  {
    id: "price",
    header: "Price",
    accessorKey: "price",
    size: 100,
    cell: ({ getValue }) => `₩${(getValue() as number).toLocaleString()}`,
    meta: { editable: false },
  },
]

const DEPARTMENT_OPTIONS = [
  { label: "Engineering", value: "engineering" },
  { label: "Design", value: "design" },
  { label: "Marketing", value: "marketing" },
  { label: "Product", value: "product" },
]
 
const columns: DataTableColumnDef<Employee>[] = [
  {
    id: "name",
    header: "이름",
    accessorKey: "name",
    // editType 미지정 → 기본값 "text"
  },
  {
    id: "department",
    header: "부서",
    accessorKey: "department",
    meta: {
      editType: "lookup",          // 검색 가능한 Combobox
      editOptions: DEPARTMENT_OPTIONS,
      editPlaceholder: "부서 검색...",
    },
  },
  {
    id: "status",
    header: "상태",
    accessorKey: "status",
    meta: {
      editType: "select",          // 드롭다운 Select
      editOptions: [
        { label: "활성", value: "active" },
        { label: "비활성", value: "inactive" },
      ],
    },
  },
  {
    id: "agreed",
    header: "동의",
    accessorKey: "agreed",
    meta: {
      editType: "switch",          // 토글 Switch
    },
  },
]

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" },
      ],
    },
  },
]
 
const data = [
  { id: "1", name: "노트북", category: "Electronics", status: "active", price: 1200000 },
  { id: "2", name: "키보드", category: "Electronics", status: "active", price: 89000 },
  { id: "3", name: "티셔츠", category: "Clothing", status: "inactive", price: 35000 },
  { id: "4", name: "모니터", category: "Electronics", status: "active", price: 450000 },
  { id: "5", name: "후드집업", category: "Clothing", status: "active", price: 65000 },
]
 
// 필터 순서: Category → Status → Name (컬럼 순서와 무관)
// 컬럼 선택기 숨김, Reset 버튼은 필터가 있을 때만 노출
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  columnFilters={columnFilters}
  onColumnFiltersChange={setColumnFilters}
  showColumnSelector={false}
/>

const columns: DataTableColumnDef<Employee>[] = [
  {
    id: "id",
    header: "ID",
    accessorKey: "id",
    size: 60,
    meta: { pinned: "left" },
  },
  { id: "name", header: "이름", accessorKey: "name", size: 150 },
  { id: "email", header: "이메일", accessorKey: "email", size: 200 },
  { id: "department", header: "부서", accessorKey: "department", size: 120 },
  { id: "role", header: "역할", accessorKey: "role", size: 120 },
  {
    id: "status",
    header: "상태",
    accessorKey: "status",
    size: 80,
    meta: { pinned: "right" },
  },
]
 
const data = [
  { id: "1", name: "홍길동", email: "hong@example.com", department: "마케팅", role: "매니저", status: "활성" },
  { id: "2", name: "김철수", email: "kim@example.com", department: "개발", role: "시니어", status: "활성" },
  { id: "3", name: "이영희", email: "lee@example.com", department: "디자인", role: "주니어", status: "비활성" },
  { id: "4", name: "박지민", email: "park@example.com", department: "마케팅", role: "시니어", status: "활성" },
  { id: "5", name: "최수진", email: "choi@example.com", department: "개발", role: "주니어", status: "활성" },
]
 
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  enableRowPinning
  rowPinning={{ top: ["1", "2"], bottom: [] }}
  maxHeight={300}
/>

<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, type DataTableColumnDef } from "@vortex/ui-icignal"
 
const columns: DataTableColumnDef<Product>[] = [
  { id: "name", header: "상품명", accessorKey: "name", size: 150 },
  {
    id: "price",
    header: "가격",
    accessorKey: "price",
    size: 120,
    cell: ({ getValue }) => `₩${(getValue() as number).toLocaleString()}`,
  },
  {
    id: "status",
    header: "상태",
    accessorKey: "status",
    size: 100,
    cell: ({ getValue }) => {
      const status = getValue() as string
      return (
        <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${
          status === "active"
            ? "bg-green-100 text-green-700"
            : "bg-gray-100 text-gray-600"
        }`}>
          {status === "active" ? "판매중" : "품절"}
        </span>
      )
    },
  },
  {
    id: "stock",
    header: "재고",
    accessorKey: "stock",
    size: 80,
    cell: ({ getValue }) => {
      const stock = getValue() as number
      return (
        <span className={stock < 10 ? "text-red-500 font-medium" : ""}>
          {stock}
        </span>
      )
    },
  },
]
 
const data = [
  { id: "1", name: "무선 키보드", price: 89000, status: "active", stock: 45 },
  { id: "2", name: "게이밍 마우스", price: 65000, status: "active", stock: 8 },
  { id: "3", name: "USB-C 허브", price: 42000, status: "inactive", stock: 0 },
  { id: "4", name: "모니터 암", price: 55000, status: "active", stock: 23 },
  { id: "5", name: "웹캠 HD", price: 78000, status: "inactive", stock: 3 },
]
 
<DataTable columns={columns} data={data} getRowId={(row) => row.id} />