Grid

import { Grid, TableColumn } from "@vortex/ui-cals"
 
const data = [
  { id: "1", name: "상품1", price: 1000 },
  { id: "2", name: "상품2", price: 2500 },
]
 
<Grid data={data} getRowId={(row) => row.id}>
  <TableColumn field="id" title="ID" width={80} />
  <TableColumn field="name" title="상품명" sortable />
  <TableColumn field="price" title="가격" formatter={{ thousandSeparator: true }} />
</Grid>

import { useState, type CSSProperties } from "react"
import { Grid, TableColumn } from "@vortex/ui-cals"
 
const [selectedRows, setSelectedRows] = useState<string[]>(["1"])
 
<div
  data-token="list"
  style={{
    "--list-head-background": "#ede9fe",
    "--list-cell-foreground": "#4c1d95",
    "--list-cell-padding-x": "18px",
    "--list-row-background-selected": "#dcfce7",
    "--list-footer-background": "#dbeafe",
  } as CSSProperties}
>
  <Grid
    data={basicData}
    getRowId={(row) => row.id}
    pageSize={2}
    pagination={false}
    selectable
    selectedRows={selectedRows}
    onSelectionChange={setSelectedRows}
    clientSearch
    showSummary
  >
    <TableColumn field="id" title="ID" width={100} />
    <TableColumn field="name" title="상품명" sortable searchable />
    <TableColumn field="price" title="가격" summary={{ type: "sum" }} />
  </Grid>
</div>

<Grid
  data={data}
  getRowId={(row) => row.id}
  selectable
  selectionMode="checkbox"
  onSelectionChange={(ids) => console.log(ids)}
>
  <TableColumn field="id" title="ID" />
  <TableColumn field="name" title="상품명" />
</Grid>

<Grid
  data={data}
  getRowId={(row) => row.id}
  selectable
  selectionMode="radio"
  onSelectionChange={(ids) => console.log(ids[0])}
>
  <TableColumn field="id" title="ID" />
  <TableColumn field="name" title="상품명" />
</Grid>

<Grid
  data={data}
  getRowId={(row) => row.id}
  pageSize={5}
  pageSizeOptions={[5, 10, 20]}
  useGoToPage
>
  <TableColumn field="id" title="ID" />
  <TableColumn field="name" title="이름" />
</Grid>

<TableColumn field="name" title="링크" uiType="link" onLinkClick={(row) => alert(row.name)} />
<TableColumn
  field="stock"
  title="재고율"
  uiType="range"
  rangeOption={{ type: "progress", max: 500, showText: true }}
/>
<TableColumn
  field="action"
  title="액션"
  uiType="button"
  onButtonClick={(row) => alert(row.id)}
/>

<TableColumn
  field="stock"
  title="재고"
  conditionalFormatting={[
    { field: "stock", operator: "lt", value: 100, style: { color: "red", fontWeight: "bold" } },
    { field: "stock", operator: "gte", value: 300, style: { color: "green" } },
  ]}
/>

<TableColumn
  field="price"
  title="가격"
  conditionalFormatting={[
    { field: "price", operator: "between", value: [30000, 70000], style: { color: "blue" } },
  ]}
/>
<TableColumn
  field="status"
  title="상태"
  conditionalFormatting={[
    { field: "status", operator: "in", value: ["active"], style: { color: "green" } },
  ]}
/>
<TableColumn
  field="category"
  title="카테고리"
  conditionalFormatting={[
    {
      field: "category",
      operator: "isMatch",
      value: "전자",
      style: { backgroundColor: "lightyellow" },
    },
  ]}
/>

<TableColumn
  field="stock"
  title="재고"
  conditionalFormatting={[
    {
      field: "stock",
      operator: "lt",
      value: 100,
      style: { backgroundColor: "#ffe0e0" },
      applyTo: "row",
    },
    {
      field: "stock",
      operator: "gte",
      value: 400,
      style: { backgroundColor: "#e0ffe0" },
      applyTo: "row",
    },
  ]}
/>

<Grid data={data} getRowId={(row) => row.id}>
  <TableColumn field="name" title="이름" sortable />
  <TableColumn title="주소">
    <TableColumn field="city" title="도시" />
    <TableColumn field="zip" title="우편번호" />
  </TableColumn>
  <TableColumn field="status" title="상태" />
</Grid>

<Grid data={data} getRowId={(row) => row.id} showSummary>
  <TableColumn field="id" title="ID" summary={{ label: "합계" }} />
  <TableColumn field="price" title="가격" summary={{ type: "sum" }} />
  <TableColumn field="stock" title="재고" summary={{ type: "avg" }} />
</Grid>

<TableColumn
  field="status"
  title="상태"
  renderCell={(value) => (
    <span className={value === "active" ? "text-green-600" : "text-red-600"}>
      {value === "active" ? "● 활성" : "● 비활성"}
    </span>
  )}
/>

const [data, setData] = useState([])
const [pageIndex, setPageIndex] = useState(1)
const [pageSize, setPageSize] = useState(10)
 
const handleLoad = useCallback((params) => {
  // params: { pageIndex, pageSize, sorting? }
  fetchFromAPI(params).then((res) => {
    setData(res.data)
    setPageIndex(params.pageIndex)
  })
}, [])
 
<Grid
  data={data}
  getRowId={(row) => row.id}
  manualPagination          // 서버 페이징 활성화
  manualSorting             // 서버 정렬 활성화
  pageIndex={pageIndex}     // controlled 페이지
  pageSize={pageSize}
  rowCount={totalCount}     // 전체 행 수 (서버에서 받은 값)
  useGoToPage               // 페이지 직접 이동
  onLoad={handleLoad}       // 마운트 시 최초 호출
  onPageChange={(p) => handleLoad({ pageIndex: p, pageSize })}
  onPageSizeChange={(s) => handleLoad({ pageIndex: 1, pageSize: s })}
  onSortChange={(sorting) => handleLoad({ pageIndex, pageSize, sorting })}
>
  <TableColumn field="id" title="ID" sortable />
  <TableColumn field="name" title="상품명" sortable />
</Grid>

{/* 클라이언트 사이드 — Grid가 직접 필터링 */}
<Grid data={data} getRowId={(row) => row.id} clientSearch>
  <TableColumn field="name" title="이름" searchable searchType="text" />
  <TableColumn field="dept" title="부서" searchable searchType="select"
    searchOptions={[...]} />
  <TableColumn field="joinDate" title="입사일" searchable searchType="date"
    maxRangeDays={365} />
</Grid>
 
{/* 서버 사이드 — 콜백으로 조건 전달 후 API 재호출 */}
<Grid
  data={data}
  getRowId={(row) => row.id}
  columnSearch={searchState}    // controlled 검색 상태
  onColumnSearch={(field, value, allSearch) => {
    setSearchState(allSearch)
    refetch(allSearch)           // 서버 재조회
  }}
>
  ...
</Grid>

const [mode, setMode] = useState<"none" | "edit">("none")
 
<Grid
  data={data}
  getRowId={(row) => row.id}
  inlineEditMode={mode}
>
  <TableColumn field="id" title="ID" />
  <TableColumn field="name" title="이름" editable editType="text" />
  <TableColumn field="role" title="역할" editable editType="select"
    editOptions={[{ label: "관리자", value: "admin" }, ...]} />
  <TableColumn field="active" title="활성" editable editType="switch" />
</Grid>

<Grid
  data={bigData} // 10,000건
  pageSize={bigData.length}
  getRowId={(row) => row.id}
  virtualScroll // 가상 스크롤 활성화
  height={400} // 고정 높이 필수
  rowHeight={35} // 행 높이 (기본 35px)
  pagination={false} // 일반적으로 페이지네이션 비활성화
>
  <TableColumn field="id" title="ID" width={80} />
  <TableColumn field="name" title="항목명" />
</Grid>

<Grid
  data={data}
  getRowId={(row) => row.id}
  overlay={[
    {
      key: "lock",
      visible: isLocked, // true일 때 오버레이 표시
      message: "권한이 없습니다",
      iconType: "lock", // "lock" | "info" | "warning"
    },
  ]}
>
  ...
</Grid>

<Grid
  data={data}
  getRowId={(row) => row.id}
  enableDragCopy // 텍스트 드래그 선택 활성화
>
  <TableColumn field="name" title="상품명" />
  <TableColumn field="code" title="코드" />
</Grid>