SYIDAX / DATA GRID

다단 헤더

관련 열을 하나의 상위 헤더로 묶습니다.

다단 헤더샘플 주문 데이터

120 rows

Grid를 불러오는 중입니다…

최근 결과

예를 들어 제품과 수량을 주문 정보라는 제목 아래 묶습니다. 현재 미리보기는 단일 헤더이므로 그룹 구성은 앱의 열 정의에 추가합니다.

코드 보기

현재 미리보기

사용 가이드

배송지의 국가·도시·주소처럼 관련 있는 여러 열에 공통 제목을 붙일 때 사용합니다. 상위 제목과 개별 열 제목이 두 줄 이상으로 표시됩니다.

묶을 열 정하기
예를 들어 제품과 수량을 주문 정보라는 제목 아래 묶습니다. 현재 미리보기는 단일 헤더이므로 그룹 구성은 앱의 열 정의에 추가합니다.
상위 제목 만들기
columnDefs에 headerName이 주문 정보인 항목을 만들고, 그 안의 children 배열에 제품 열과 수량 열을 넣으세요.
펼친 결과 확인
Grid에 새 columnDefs 배열을 전달하세요. 상위 헤더 아래에 제품·수량 헤더가 나타나고 각 열의 정렬·너비 조절을 사용할 수 있습니다.

확인할 결과

관련 열을 한눈에 구분할 수 있는 다단 헤더가 만들어집니다. 실제 행 데이터의 모양은 바꿀 필요가 없습니다.

상위 그룹의 이름과 실제 데이터를 읽는 열의 이름을 구분하세요. 제품 열의 field는 계속 product입니다.

등록된 Grid 요소를 grid로 참조하는 앱 코드입니다.

grid.columnDefs = [{ headerName: '주문', groupId: 'order', children: [
  {field:'product', headerName:'제품'},
  {field:'quantity', headerName:'수량'}
]}];

이벤트1

이벤트	detail 타입	설명
	`{ groupId: string; open: boolean }`	fires when a header group expands or collapses.

메서드1

메서드 / 인수	반환 타입	설명
groupId: string, open: boolean	`Promise<void>`	expand/collapse a header group by id (`groupId` or its declaration path). No-ops when the state already matches.

ColumnDef1

ColumnDef	타입 / 필수 여부	설명
	`'open' \| 'closed'`선택	visibility rule relative to the parent header group's open/closed state (AG `columnGroupShow`): `'open'` shows only while the group is expanded, `'closed'` only while collapsed, omitted always. Any child declaring this gives the group its expand/collapse toggle.