데모피벗 북레이아웃
행 헤더를 그리드와 트리 두 방식으로 표현해, 같은 데이터가 어떻게 달리 보이는지 비교하는 데모입니다.
주요 특징
행 헤더는 계층을 두 가지 방식으로 표현합니다. 이 데모의 두 탭은 행·열·값 구성이 완전히 같고 rowHeader.layout만 다릅니다.
| 탭 | layout | 행 헤더 표현 |
|---|---|---|
| 그리드 | 'grid' (기본값) | 차원마다 컬럼을 두고, 같은 값은 세로로 병합 |
| 트리 | 'tree' | 단일 컬럼에 인덴트로 계층을 표현 |
행 축이 결제 수단 → 상품 2단계라서 계층이 생깁니다. 트리 탭에서는 결제 수단 앞의 확장/축소 아이콘으로 하위 상품을 접었다 펼 수 있고, 접으면 그룹 행이 소계를 대신 보여 줍니다.
코드로 지정하기
테이블의 rowHeader에서 지정합니다.
{
name: '트리',
cube: 'ordersPivot',
fields: { rows: ['결제 수단', '상품'], columns: ['년도'], values: ['주문 금액'] },
rowHeader: { layout: 'tree', indent: 20 },
}지정할 수 있는 값
rowHeader 옵션으로 계층 표현을 조절합니다.
| 속성 | 의미 | 기본값 |
|---|---|---|
layout | 'grid' · 'tree' | 'grid' |
indent | 'tree'의 계층 인덴트 (px) | 20 |
expanderVisible | 확장/축소 아이콘 표시 | true |
initCollapsed | 초기 축소. true(최상위) · 'all'(전체) | false |
dimensionClickAction | 헤더 셀 클릭 동작. 'select' · 'expand' · 'selectAndExpand' · 'none' | 'select' |
더 자세한 내용은 피벗 북(Book) 가이드에서 확인할 수 있습니다.
북 공통 옵션과 tableDefaults로 속성을 공유하고 테이블마다 일부 속성만 덮어쓰는 예는 공통 옵션에서 볼 수 있습니다.
플레이그라운드를 불러오는 중…