정렬 - RealPivot2

데모정렬

라벨 정렬·값 기준 정렬·fallback 정렬을 테이블 3개로 나눠, 상품 차원에만 적용한 데모입니다.

주요 특징

정렬은 크게 3가지입니다. 이 데모는 종류마다 페이지(테이블)를 하나씩 두고, 상품 차원에만 정렬을 걸었습니다.

종류	설정	어디서 켜지나
라벨 정렬	필드 `sort.type: 'label'`	상품 필드에 명시 설정 (또는 필드 메뉴)
값 기준 정렬	필드 `sort.type: 'value'`	상품 필드에 명시 설정 (또는 필드 메뉴)
Fallback 정렬	`rowFallbackSort` + `measureClickAction: 'sort'`	측정값 헤더 클릭으로 토글

값 기준 정렬과 fallback은 둘 다 측정값으로 순서를 매기지만 걸림 위치가 다릅니다.

	값 기준 정렬	Fallback 정렬
설정	상품 필드의 `sort: { type: 'value', … }`	필드 `sort` 없음 + `rowFallbackSort`
기준 열	2023 · Q1 주문 금액	2023 · Q1 주문 금액 (`target`)
UI	상품 필드/헤더에 정렬 표시	해당 열의 측정값 헤더에 정렬 표시
조작	필드 메뉴에서 변경	측정값 헤더 클릭 (`asc` → `desc` → `none`)

이전에 두 테이블이 비슷해 보였던 이유는, fallback 쪽도 처음부터 direction: 'desc'로 켜 두어 값 기준 정렬과 같은 “이미 정렬된 표”처럼 보였기 때문입니다.
지금은 Fallback 테이블을 direction: 'none'으로 시작해, 헤더를 클릭하기 전·후가 달라지도록 구성했습니다.

테이블	초기 상품 순서	확인 포인트
라벨 정렬	이름순 (노트북 → 모니터 → 의자 …)	상품 필드 정렬
값 기준 정렬	2023·Q1 주문 금액 내림차순	상품 필드에 value 정렬이 이미 적용됨
Fallback 정렬	정렬 꺼짐 (`none`)	2023 · Q1의 주문 금액 헤더를 클릭하면 정렬이 켜짐

화면에서 보기

세 테이블 모두 행은 유입 채널 · 상품, 열은 년도 · 분기입니다.

라벨 / 값 기준 탭 — 상품 순서만 비교합니다. 값 기준은 2023년 1분기 열 값으로 정렬됩니다.
Fallback 탭 — 상품 필드에는 sort가 없습니다. 측정값 헤더(2023 · Q1 · 주문 금액 등)를 클릭하면 행 fallback 정렬이 토글됩니다 (asc → desc → none).

조작	동작
페이지 탭	라벨 / 값 기준 / Fallback 전환
필터 바	주문 상태 · 결제 수단 · 주문일
상품 필드 메뉴	라벨·값 기준 정렬 변경 (라벨·값 기준 테이블)
열·행 헤더의 측정값 클릭 (Fallback만)	행 fallback 정렬 순환 (클릭한 열이 target)
크로스헤어	행·열 교차 추적

코드로 지정하기

라벨 정렬

rows: [
  { name: '유입 채널' },
  { name: '상품', sort: { type: 'label', direction: 'asc' } },
],

값 기준 정렬

상품 필드에 type: 'value'를 직접 지정합니다. target으로 2023 · Q1 열을 지정합니다.

rows: [
  { name: '유입 채널' },
  {
    name: '상품',
    sort: {
      type: 'value',
      direction: 'desc',
      measure: '주문 금액',
      target: ['2023', 'Q1'],
    },
  },
],

Fallback 정렬

상품 필드에는 sort를 두지 않습니다. rowFallbackSort와 측정값 헤더 클릭으로 정렬합니다.

fields: {
  rows: [
    { name: '유입 채널', sort: { type: 'label', direction: 'none' } },
    { name: '상품' }, // sort 없음 → fallback 대상
  ],
  values: [{ name: '주문 금액', aggregate: 'sum' }],
},
rowFallbackSort: {
  direction: 'none', // 초기 꺼짐. 헤더 클릭으로 켜짐
  measure: '주문 금액',
  target: ['2023', 'Q1'],
},
rowHeader: {
  measureClickAction: 'sort',
},
columnHeader: {
  measureClickAction: 'sort',
},

자세한 옵션은 정렬 가이드를 참고하세요.

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

필터 소계·총계