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

import { DataTable, type DataTableRef, type DataTableColumnDef } from "@vortex/ui-icignal"
import { useRef, useState } from "react"
 
const tableRef = useRef<DataTableRef>(null)
 
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 },
  },
]
 
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  editable
  tableRef={tableRef}
  onSaveNewRow={(newRow) => console.log(newRow)}
  actions={
    <div className="flex items-center gap-2">
      <Button onClick={() => tableRef.current?.newRow()}>New</Button>
      <Button onClick={() => tableRef.current?.cancelNewRow()}>Cancel</Button>
      <Button onClick={() => tableRef.current?.saveNewRow()}>Save</Button>
    </div>
  }
/>

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

import { DataTable, type ConfigStorage, type TableConfig } from "@vortex/ui-icignal"
import { useMemo } from "react"
 
// localStorage 기반 구현 (기본)
function useConfigStorage<T>(key: string): ConfigStorage<T> {
  return useMemo(
    () => ({
      getItem(): T | null {
        try {
          const raw = localStorage.getItem(key)
          return raw ? JSON.parse(raw) : null
        } catch {
          return null
        }
      },
      setItem(value: T): void {
        localStorage.setItem(key, JSON.stringify(value))
      },
      removeItem(): void {
        localStorage.removeItem(key)
      },
    }),
    [key],
  )
}
 
// 사용
function App() {
  const configStorage = useConfigStorage<TableConfig>("user-list")
 
  return (
    <DataTable
      columns={columns}
      data={data}
      getRowId={(row) => row.id}
      storage={configStorage}
      autoSave
    />
  )
}
 
// 커스텀 구현 (서버 API 등)
function useServerConfigStorage<T>(key: string): ConfigStorage<T> {
  return useMemo(
    () => ({
      getItem(): T | null {
        // TODO: 서버에서 가져오기
        return null
      },
      setItem(value: T): void {
        // TODO: 서버에 저장하기
      },
      removeItem(): void {
        // TODO: 서버에서 삭제하기
      },
    }),
    [key],
  )
}

<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  height={300}
/>
 
// height + maxHeight 조합도 가능
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  height={300}
  maxHeight={600}
/>

const columns: DataTableColumnDef<Product>[] = [
  { id: "name", header: "상품명", accessorKey: "name", size: 150 },
  {
    id: "category",
    header: "카테고리",
    accessorKey: "category",
    size: 120,
    meta: { align: "center" },
  },
  {
    id: "price",
    header: "가격",
    accessorKey: "price",
    size: 120,
    meta: { align: "right" },
    cell: ({ getValue }) => `₩${(getValue() as number).toLocaleString()}`,
  },
  {
    id: "stock",
    header: "재고",
    accessorKey: "stock",
    size: 80,
    meta: { align: "center" },
  },
  {
    id: "status",
    header: "상태",
    accessorKey: "status",
    size: 120,
    // headerAlign/cellAlign으로 헤더와 셀 개별 지정
    meta: { headerAlign: "center", cellAlign: "right" },
  },
]
 
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  selectable
/>

import { DataTable } from "@vortex/ui-icignal"
import type { Row } from "@tanstack/react-table"
 
interface Order {
  id: string
  customer: string
  items: { name: string; qty: number; price: number }[]
}
 
<DataTable<Order>
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  expandable
  renderExpandedRow={(row: Row<Order>) => (
    <div className="p-4">
      {row.original.items.map((item) => (
        <div key={item.name}>{item.name} x {item.qty}</div>
      ))}
    </div>
  )}
/>
 
// Sub-rows (트리 구조)
<DataTable<Department>
  columns={columns}
  data={departments}
  getRowId={(row) => row.id}
  expandable
  getSubRows={(row) => row.children}
/>

import { DataTable, type DataTableColumnDef } from "@vortex/ui-icignal"
 
const columns: DataTableColumnDef<SalesRecord>[] = [
  {
    id: "product",
    header: "상품명",
    accessorKey: "product",
    size: 160,
    footer: () => "합계",
  },
  {
    id: "category",
    header: "카테고리",
    accessorKey: "category",
    size: 100,
  },
  {
    id: "quantity",
    header: "수량",
    accessorKey: "quantity",
    size: 80,
    meta: { align: "right" },
    footer: ({ table }) => {
      const total = table
        .getFilteredRowModel()
        .rows.reduce((sum, row) => sum + row.original.quantity, 0)
      return total.toLocaleString()
    },
  },
  {
    id: "amount",
    header: "금액",
    accessorKey: "amount",
    size: 140,
    meta: { align: "right" },
    cell: ({ getValue }) => `₩${(getValue() as number).toLocaleString()}`,
    footer: ({ table }) => {
      const total = table
        .getFilteredRowModel()
        .rows.reduce((sum, row) => sum + row.original.amount, 0)
      return `₩${total.toLocaleString()}`
    },
  },
]
 
<DataTable columns={columns} data={data} getRowId={(row) => row.id} />

import { DataTable, type DataTableColumnDef } from "@vortex/ui-icignal"
 
const columns: DataTableColumnDef<User>[] = [
  {
    id: "name",
    header: "이름",
    accessorKey: "name",
    size: 180,
    enableSearch: true, // 전체 비활성이지만 이 컬럼만 검색 활성
  },
  { id: "email", header: "이메일", accessorKey: "email", size: 200 },
  {
    id: "role",
    header: "역할",
    accessorKey: "role",
    size: 120,
    enableSorting: true, // 전체 비활성이지만 이 컬럼만 정렬 활성
  },
  { id: "department", header: "부서", accessorKey: "department", size: 120 },
]
 
// 전체 검색/정렬 비활성 → 개별 컬럼만 오버라이드
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  enableSearch={false}
  enableSorting={false}
/>

import { DataTable, type DataTableColumnDef } from "@vortex/ui-icignal"
import { useState } from "react"
import type { ColumnFiltersState } from "@tanstack/react-table"
 
const columns: DataTableColumnDef<Event>[] = [
  { id: "title", header: "이벤트명", accessorKey: "title", size: 160 },
  {
    id: "startDate",
    header: "시작일",
    accessorKey: "startDate",
    size: 180,
    meta: {
      filterVariant: "date-range", // DatePicker range 모드
    },
  },
  {
    id: "endDate",
    header: "종료일",
    accessorKey: "endDate",
    size: 150,
    meta: {
      filterVariant: "date",
      filterDateFormat: "yy/MM/dd", // 커스텀 포맷
    },
  },
  { id: "status", header: "상태", accessorKey: "status", size: 100 },
]
 
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  columnFilters={columnFilters}
  onColumnFiltersChange={setColumnFilters}
/>

import { DataTable } from "@vortex/ui-icignal"
import { useState } from "react"
 
const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({
  "1": true,
  "3": true,
})
 
<DataTable
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
  selectable
  enableMultiRowSelection
  rowSelection={rowSelection}
  onRowSelectionChange={(selectedRows) => {
    const next: Record<string, boolean> = {}
    selectedRows.forEach((row) => {
      next[row.id] = true
    })
    setRowSelection(next)
  }}
/>
 
// 외부에서 선택 상태 변경
setRowSelection({ "1": true, "3": true, "5": true })
 
// 선택 초기화
setRowSelection({})

<DataTable
  variant="border"
  columns={columns}
  data={data}
  getRowId={(row) => row.id}
/>

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