데모소계·총계
행·열 소계와 고정 총계의 표시 위치·라벨·collapseSingle을 한 화면에서 확인하는 데모입니다.
주요 특징
소계는 중간 차원 그룹(채널별·연도별)의 합이고, 총계는 축 전체의 합입니다.
이 데모는 4가지 옵션을 모두 켠 상태로, 그룹 뒤 소계와 스크롤 고정 총계를 바로 볼 수 있게 구성했습니다.
| 옵션 | 설정 | 의미 |
|---|---|---|
rowTotal | position: 'end', collapseSingle: true, label: '소계' | 유입 채널 그룹 뒤에 행 소계를 표시합니다. 상품이 1개뿐이면 소계를 숨깁니다. |
columnTotal | position: 'end', collapseSingle: true, label: '소계' | 년도 그룹 뒤에 열 소계를 표시합니다. 분기가 1개뿐이면 소계를 숨깁니다. |
rowGrandTotal | position: 'end', fixed: true, label: '합계' | 맨 아래에 행 총계를 표시합니다. 세로 스크롤해도 고정됩니다. |
columnGrandTotal | position: 'end', fixed: true, label: '합계' | 맨 오른쪽에 열 총계를 표시합니다. 가로 스크롤해도 고정됩니다. |
값 필드의 totalStyle · grandStyle로 소계·총계 셀 글자색·배경을 구분해 두었습니다.
화면에서 보기
행은 유입 채널 · 상품, 열은 년도 · 분기입니다.
채널 그룹 끝의 소계, 연도 그룹 끝의 소계, 축 끝의 합계를 비교해 보면 그룹 합과 전체 합의 차이를 한눈에 읽을 수 있습니다. 표를 세로·가로로 스크롤해도 총계 행·열은 고정되어 있습니다.
| 조작 | 동작 |
|---|---|
| 필터 바 | 주문 상태 · 결제 수단 · 주문일 |
| 행 바 메뉴 → 테이블 설정 | 소계·총계 표시 여부 · 라벨 · 위치 · 고정 변경 |
| 소계·총계 헤더 메뉴 | 앞쪽/뒤쪽 표시, 숨기기, 총계 위치 고정 |
| 크로스헤어 | 행·열 교차 추적 |
collapseSingle 옵션은 테이블 설정 대화상자에서 제공되지 않으므로, 코드나 API로 변경해야 합니다.
코드로 지정하기
tables: {
// ...
rowTotal: {
visible: true,
position: 'end',
collapseSingle: true,
label: '소계',
},
columnTotal: {
visible: true,
position: 'end',
collapseSingle: true,
label: '소계',
},
rowGrandTotal: {
visible: true,
position: 'end',
fixed: true,
label: '합계',
},
columnGrandTotal: {
visible: true,
position: 'end',
fixed: true,
label: '합계',
},
fields: {
values: [
{
name: '주문 금액',
numberFormat: '"$",#,##0',
totalStyle: { color: '#1d4ed8', bold: true },
grandStyle: { color: '#0f172a', backgroundColor: '#e2e8f0', bold: true },
},
],
},
}자세한 옵션·런타임 API는 소계·총계 가이드를 참고하세요.
플레이그라운드를 불러오는 중…