List

import { List, TableColumn } from "@vortex/ui-cals"
 
<List data={data} getRowId={(row) => row.id}>
  <TableColumn field="id" title="ID" width={80} />
  <TableColumn field="name" title="상품명" sortable />
  <TableColumn field="category" title="카테고리" sortable />
  <TableColumn field="price" title="가격" sortable />
</List>

import { useState, type CSSProperties } from "react"
import { List, TableColumn } from "@vortex/ui-cals"
 
const [selectedRows, setSelectedRows] = useState<string[]>(["P001"])
 
<List
  data={sampleData.slice(0, 5)}
  getRowId={(row) => row.id}
  pageSize={5}
  pagination={false}
  selectable
  selectedRows={selectedRows}
  onSelectionChange={setSelectedRows}
  clientSearch
  showSummary
  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}
>
  <TableColumn field="id" title="ID" width={100} />
  <TableColumn field="name" title="상품명" sortable searchable />
  <TableColumn field="price" title="가격" summary={{ type: "sum" }} />
</List>

<List
  data={data}
  getRowId={(row) => row.id}
  selectable
  selectionMode="checkbox"
  onSelectionChange={(ids) => setSelected(ids)}
>
  <TableColumn field="id" title="ID" width={80} />
  <TableColumn field="name" title="상품명" />
</List>

<List
  data={data}
  getRowId={(row) => row.id}
  inlineEdit
  showAdd
  showEdit
  showDelete
  showSave
  addMode={addMode}
  editMode={editMode}
  deleteMode={deleteMode}
  onAdd={() => setAddMode(true)}
  onEdit={() => setEditMode(true)}
  onSave={() => {
    setAddMode(false);
    setEditMode(false);
  }}
  onCancel={() => {
    setAddMode(false);
    setEditMode(false);
    setDeleteMode(false);
  }}
>
  ...
</List>

<List data={data} getRowId={(row) => row.id} striped showRowNumber>
  ...
</List>

<List
  data={data}
  getRowId={(row) => row.id}
  inlineEdit
  showAdd
  showEdit
  showDelete
  showSave
  readOnly // 모든 편집 버튼 비활성화
>
  ...
</List>

const [data, setData] = useState([])
const [pageIndex, setPageIndex] = useState(1)
 
<List
  data={data}
  getRowId={(row) => row.id}
  manualPagination
  pageIndex={pageIndex}
  pageSize={10}
  rowCount={totalCount}       // 전체 행 수
  onPageChange={(p) => {
    fetchPage(p).then((res) => {
      setData(res.data)
      setPageIndex(p)
    })
  }}
>
  ...
</List>

<style>{`[data-testid="list-scrollbar-tokens"] [data-token="scroll-area"] {
  --scroll-area-scrollbar-width-vertical: 12px;
  --scroll-area-scrollbar-height-horizontal: 12px;
  --scroll-area-thumb-background: #7c3aed;
}`}</style>
<div data-testid="list-scrollbar-tokens">
  <List data={sampleData} getRowId={(row) => row.id} height={220} pagination={false}>
    <TableColumn field="id" title="ID" width={80} />
    <TableColumn field="name" title="상품명" />
    <TableColumn field="category" title="카테고리" />
  </List>
</div>

const [data, setData] = useState(initialData)
 
<List
  data={data}
  getRowId={(row) => row.id}
  infiniteScroll
  manualPagination
  height={300}                   // 고정 높이 권장
  infiniteScrollDisabled={noMore} // 더 이상 데이터 없음
  onLoadMore={() => {
    fetchNextPage().then((res) => {
      setData((prev) => [...prev, ...res.data])
    })
  }}
>
  ...
</List>

<List data={data} getRowId={(row) => row.id} showSummary>
  <TableColumn field="id" title="ID" summary={{ label: "합계" }} />
  <TableColumn field="name" title="상품명" />
  <TableColumn
    field="price"
    title="가격"
    formatter={{ thousandSeparator: true }}
    summary={{ type: "sum" }}
  />
</List>