데모값 필드 설정스타일
값 셀·소계·총계에 인라인 스타일과 CSS 클래스를 나눠 적용하는 데모입니다.

주요 특징

값 필드의 색·굵기·정렬은 인라인 스타일과 CSS 클래스 두 가지로 지정합니다. 이 데모는 둘을 나란히 사용합니다.

값 필드방식일반 셀소계 셀총계 셀
매출인라인styletotalStylegrandStyle
수량CSS 클래스classNametotalClassgrandTotalClass
상품 내 비중인라인style——

코드로 지정하기

table.fields.values의 각 항목에 지정합니다. style 속성은 PivotCellStyle 객체이고, className 속성은 CSS 클래스 이름입니다.

values: [
  {
    name: '매출',
    measure: '주문금액',
    numberFormat: '"$",#,##0',
    style: { color: '#2563eb', align: 'right' },
    totalStyle: { bold: true, backgroundColor: 'rgba(37, 99, 235, 0.10)' },
    grandStyle: { bold: true, italic: true, backgroundColor: 'rgba(37, 99, 235, 0.20)' },
  },
  {
    name: '수량',
    measure: '주문수량',
    numberFormat: '#,##0',
    className: 'qty',
    totalClass: 'qty-total',
    grandTotalClass: 'qty-grand',
  },
]

클래스 규칙은 아래 에디터의 style.css 탭에 있습니다.

.qty {
  color: #0f766e;
  font-variant-numeric: tabular-nums;
}
.qty-total {
  font-weight: 600;
  background-color: rgba(13, 148, 136, 0.1);
}
 
/* 다크 테마에서만 덮어쓰기 */
.rpivot-root[data-theme='dark'] .qty {
  color: #5eead4;
}

지정할 수 있는 값

PivotCellStyle의 주요 속성입니다.

속성의미
color · backgroundColor글자색 · 배경색
bold · italic · underline글꼴 장식
align정렬 ('left' · 'center' · 'right')
icon · iconSet · iconIndex · iconPlacement셀 아이콘

어느 방식을 쓸지는 다음을 기준으로 정합니다.

상황권장
색·굵기·정렬 몇 가지인라인 style
폰트·간격 등 CSS 전반, 여러 필드 공유className 계열
라이트/다크에서 다른 색className + .rpivot-root[data-theme='dark'] 선택자

더 자세한 내용은 테마·스타일 가이드에서 확인할 수 있습니다.

플레이그라운드를 불러오는 중…

표시 서식필터