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>

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