ToolbarList

import { ToolbarList, TableColumn } from "@vortex/ui-cals"
 
function ProductList() {
  return (
    <ToolbarList
      title="상품 목록"
      actions={<button>조회</button>}
      getRowId={(row) => row.id}
      data={data}
      pageSize={10}
      manualPagination={false}
    >
      <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={() => setAddMode(true)}
  onEdit={() => setEditMode(true)}
  onDeleteMode={() => setDeleteMode(true)}
  onCancel={handleCancel}
  onSave={handleSave}
  onDelete={handleDelete}
  getRowId={(row) => row.id}
  data={data}
>
  <TableColumn field="id" title="ID" />
  <TableColumn field="name" title="상품명" />
</ToolbarList>

<ToolbarList
  title="무한 스크롤"
  infiniteScroll
  height={400}
  onLoadMore={loadNextPage}
  getRowId={(row) => row.id}
  data={data}
>
  ...
</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>