ToolbarGrid

import { ToolbarGrid, TableColumn } from "@vortex/ui-cals"
 
<ToolbarGrid
  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="가격" />
</ToolbarGrid>

<ToolbarGrid
  title="검색 + 그리드"
  actions={
    <>
      <button>검색</button>
      <button>초기화</button>
    </>
  }
  searchContent={
    <>
      <ToolbarGrid.Col span={8}>
        <Input label="상품명" />
      </ToolbarGrid.Col>
      <ToolbarGrid.Col span={8}>
        <Select label="카테고리" />
      </ToolbarGrid.Col>
    </>
  }
  getRowId={(row) => row.id}
  data={data}
  pageSize={10}
>
  <TableColumn field="id" title="ID" />
  <TableColumn field="name" title="상품명" />
</ToolbarGrid>

<ToolbarGrid title="접기 잠금" collapseDisabled getRowId={...} data={data}>
  ...
</ToolbarGrid>

<ToolbarGrid
  title="건수 표시"
  showPageTotal
  rowCount={350}
  pageSize={20}
  ...
/>

const [keyword, setKeyword] = useState("")
const [category, setCategory] = useState("")
const [data, setData] = useState([])
const [pageIndex, setPageIndex] = useState(1)
 
const handleSearch = useCallback(() => {
  fetchProducts({ keyword, category, page: 1 }).then((res) => {
    setData(res.data)
    setPageIndex(1)
  })
}, [keyword, category])
 
<ToolbarGrid
  title="상품 관리"
  actions={
    <div className="flex gap-1">
      <button onClick={handleSearch}>조회</button>
      <button onClick={() => { setKeyword(""); setCategory(""); }}>초기화</button>
    </div>
  }
  searchContent={
    <>
      <ToolbarGrid.Col span={8}>
        <label>상품명
          <input value={keyword} onChange={(e) => setKeyword(e.target.value)} />
        </label>
      </ToolbarGrid.Col>
      <ToolbarGrid.Col span={8}>
        <label>카테고리
          <select value={category} onChange={(e) => setCategory(e.target.value)}>
            <option value="">전체</option>
            <option value="전자기기">전자기기</option>
          </select>
        </label>
      </ToolbarGrid.Col>
    </>
  }
  getRowId={(row) => row.id}
  data={data}
  manualPagination
  pageIndex={pageIndex}
  pageSize={10}
  rowCount={totalCount}
  onPageChange={(p) => {
    fetchProducts({ keyword, category, page: p }).then((res) => {
      setData(res.data)
      setPageIndex(p)
    })
  }}
>
  <TableColumn field="id" title="ID" sortable />
  <TableColumn field="name" title="상품명" sortable />
  <TableColumn field="category" title="카테고리" />
  <TableColumn field="price" title="가격" formatter={{ thousandSeparator: true }} />
</ToolbarGrid>