LVRS Storyboard Frame

components/control/TableHeader.svx

Path: components/control/TableHeader.svx

Last modified:

TableHeader

위치: qml/components/control/display/TableHeader.qml

TableHeader는 Table의 머리글 행을 렌더링합니다.

목적

  • 열 레이블을 균일한 너비 분포로 렌더링합니다.
  • 행 본문과 별개로 구분 기호 스타일을 제공합니다.

API

  • cellItems(선호됨, TableCellItem와 유사한 항목의 배열/목록 모델)
  • columns
  • rowHeight
  • cellHorizontalPadding
  • textColor
  • separatorHeight
  • separatorColor

도우미 방법:

  • columnAt(index)
  • columnText(index)
  • columnPadding(index)

계산됨:

  • resolvedColumnSource
  • resolvedColumnCount

사용법

import LVRS 1.0 as LV

LV.TableHeader {
    cellItems: [
        { label: "Column" },
        { label: "Column" },
        { label: "Column" }
    ]
}

동작 원리

  • cellItems가 기본 계약입니다. 레거시 columns는 대체 경로로 유지됩니다.
  • 열 텍스트는 기본 항목 또는 개체 항목(label/text/title 대체 경로)을 허용합니다.
  • 선택적 열별 contentSpacing/horizontalPadding 재정의가 지원됩니다.
  • 리피터 위임자는 균등한 분배를 위해 Layout.fillWidth를 사용합니다.
  • 하단 구분 기호는 전용 직사각형으로 렌더링됩니다(panelBackground10 기본값).

실용적인 팁

조밀한 12px 세미 볼드 텍스트는 컴팩트 메타데이터에 최적화되어 있으므로 헤더 레이블을 짧고 의미 있는 방식(필드 유형/범주)으로 유지하세요.

확장된 예: 객체 기반 헤더 정의

import LVRS 1.0 as LV

LV.TableHeader {
    cellItems: [
        { label: "Service" },
        { text: "State", contentSpacing: LV.Theme.gap8 },
        { title: "Latency" }
    ]
}

FAQ

Q. TableHeader에서 열별 정렬을 직접 정의할 수 있나요? A. 현재 계약은 균일한 왼쪽 정렬 헤더 텍스트를 유지합니다. 열별 레이아웃에는 사용자 정의 파생 구성 요소가 필요합니다.

검증 체크리스트

  • 헤더 개수가 예상 열 개수와 일치합니다.
  • 분리막 두께/색상은 테마 계약을 준수하며,
  • 객체 기반 열 레이블은 대체 경로 키를 통해 확인됩니다.