ToolbarGrid

Collapsible 헤더(제목 + 도구 모음) 와 데이터 그리드(페이지네이션 포함)를 결합한 복합 컴포넌트입니다. 선택적으로 검색 폼 영역을 그리드 상단에 배치할 수 있습니다.

기본 사용


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

검색 폼 포함

searchContent prop으로 헤더와 그리드 사이에 검색 입력 격자를 추가합니다. ToolbarGrid.Col로 격자 내 열을 배치합니다.


<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>

Props

ToolbarGrid 고유 Props

Prop	Type	Default	설명
`title`	`ReactNode`	-	헤더 제목
`actions`	`ReactNode`	-	도구 모음 버튼
`visible`	`boolean`	`true`	false이면 비렌더링
`defaultCollapsed`	`boolean`	`false`	초기 접힘 상태
`collapseDisabled`	`boolean`	`false`	접기 잠금 (항상 펼침)
`toolbarPosition`	`'top' \| 'bottom'`	`'top'`	도구 모음 위치
`showPageTotal`	`boolean`	`false`	전체 건수 표시
`searchContent`	`ReactNode`	-	검색 폼 영역 콘텐츠
`columns`	`number`	`24`	검색 폼 격자 컬럼 수
`colGap`	`number`	`15`	검색 폼 가로 간격 (px)
`rowGap`	`number`	`20`	검색 폼 세로 간격 (px)
`readOnly`	`boolean`	`false`	검색 폼 읽기 전용
`showLabel`	`boolean`	`true`	레이블 표시 여부
`labelPosition`	`LabelPosition`	`'left'`	레이블 위치
`backgroundColor`	`string`	-	wrapper + 헤더 + Grid 배경색
`color`	`string`	-	헤더 글자색
`borderWidth`	`string`	-	헤더 테두리 두께
`borderColor`	`string`	-	헤더 테두리 색상
`fullSize`	`boolean`	`false`	전체 화면 확장
`className`	`string`	-	wrapper CSS 클래스
`style`	`CSSProperties`	-	wrapper 인라인 스타일

Grid 패스스루 Props

Grid 컴포넌트의 모든 props(data, getRowId, children, loading, pagination, pageSize, selectable, virtualScroll 등)를 직접 전달합니다. 자세한 내용은 Grid 문서를 참조하세요.

ToolbarGrid.Col

검색 폼 격자 안에 컨트롤을 배치하는 열 컴포넌트입니다.

Prop	Type	Default	설명
`span`	`number`	`24`	차지할 컬럼 수
`offset`	`number`	`0`	시작 전 건너뛸 컬럼
`hidden`	`boolean`	`false`	숨김 처리

접기 / 펴기

헤더를 클릭하면 콘텐츠(검색 폼 + 그리드)가 접힙니다.
defaultCollapsed={true}: 초기 접힌 상태로 시작합니다.
collapseDisabled={true}: 항상 펼침 상태로 고정됩니다(토글 불가).


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

도구 모음 위치

toolbarPosition="bottom"으로 설정하면 actions가 콘텐츠 영역 하단에 배치됩니다.


<ToolbarGrid
  title="하단 도구모음"
  toolbarPosition="bottom"
  actions={<button>조회</button>}
  ...
/>

전체 건수 표시

showPageTotal={true}와 rowCount를 함께 전달하면 도구 모음에 “시작-끝 / 전체건수” 형식으로 표시됩니다.


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

접근성

Collapsible trigger에 aria-expanded 자동 노출
collapseDisabled 시 aria-disabled 설정
검색 폼 영역에 role="search" 적용
readOnly 시 검색 폼에 aria-readonly 설정