ToolbarList

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

<ToolbarList
  title="상품 편집"
  inlineEdit showAdd showEdit showDelete showSave
  addMode={addMode} editMode={editMode} deleteMode={deleteMode}
  onAdd={() => { setData((prev) => [...prev, newRow]); setAddMode(true) }}
  onEdit={() => setEditMode(true)}
  onDeleteMode={() => setDeleteMode(true)}
  onSave={() => { setAddMode(false); setEditMode(false); setDeleteMode(false) }}
  onCancel={() => { setAddMode(false); setEditMode(false); setDeleteMode(false) }}
  getRowId={(row) => row.id}
  data={data}
>
  <TableColumn field="id" title="ID" width={60} />
  <TableColumn field="name" title="상품명" editable editType="text" />
  <TableColumn field="category" title="카테고리" editable editType="select"
    editOptions={[{ label: "전자기기", value: "전자기기" }, ...]} />
  <TableColumn field="price" title="가격" editable editType="number"
    formatter={{ thousandSeparator: true }} />
</ToolbarList>

<ToolbarList
  title="무한 스크롤 리스트"
  getRowId={(row) => row.id}
  data={data}
  infiniteScroll
  height={300}
  infiniteScrollDisabled={noMore}
  onLoadMore={() => {
    fetchNextPage().then((res) => {
      setData((prev) => [...prev, ...res.data])
    })
  }}
>
  <TableColumn field="id" title="ID" width={60} />
  <TableColumn field="name" title="상품명" />
  <TableColumn field="category" title="카테고리" />
  <TableColumn field="price" title="가격" formatter={{ thousandSeparator: true }} />
</ToolbarList>

<ToolbarList
  title="검색 + 리스트"
  searchContent={
    <>
      <ToolbarList.Col span={8}>
        <Input label="상품명" />
      </ToolbarList.Col>
      <ToolbarList.Col span={8}>
        <Select label="카테고리" />
      </ToolbarList.Col>
    </>
  }
  getRowId={(row) => row.id}
  data={data}
>
  ...
</ToolbarList>