데모피벗 북레이아웃
행 헤더를 그리드와 트리 두 방식으로 표현하는 데모이다.
주요 특징
행 헤더는 계층을 두 가지 방식으로 표현한다. 이 데모의 두 탭은 행·열·값 구성이 완전히 동일하고 rowHeader.layout 속성만 다르게 지정되어 있다.
| 탭 | layout | 행 헤더 표현 |
|---|---|---|
| 그리드 | 'grid' (기본값) | 차원마다 컬럼을 두고, 같은 값은 세로로 병합 |
| 트리 | 'tree' | 단일 컬럼에 인덴트로 계층을 표현 |
"그리드" 탭에서는 행 축이 결제 수단 → 상품 2레벨로 계층이 존재한다.
아래 데모에서 "트리" 탭으로 전환 시 결제 수단 앞의 확장/축소 아이콘으로 하위 상품을 접었다 펼 수 있으며, 접으면 그룹 행에는 소계만 표시된다.
코드로 지정하기
{
name: '트리',
cube: 'ordersPivot',
fields: { rows: ['결제 수단', '상품'], columns: ['년도'], values: ['주문 금액'] },
rowHeader: { layout: 'tree', indent: 20 }, // 트리 레이아웃으로 계층 표현, 인덴트 20px
}더 자세한 내용은 행 헤더를 참고한다.
플레이그라운드를 불러오는 중…