📊 Phase 19: Column Group (다단계 헤더)

RealGrid 스타일의 setColumnLayout() API로 컬럼을 그룹화하여 다단계 헤더를 표현합니다.

1. 기본 2단 헤더

컬럼을 그룹으로 묶어 2단계 헤더를 생성합니다.

레이아웃 구조

인적정보: 이름, 이메일, 전화번호
업무정보: 부서, 직급, 급여

grid.setColumnLayout([
  { name: 'personal', header: '인적정보', items: ['name', 'email', 'phone'] },
  { name: 'work', header: '업무정보', items: ['department', 'position', 'salary'] },
]);

2. 3단 중첩 그룹

그룹 안에 그룹을 중첩하여 3단계 이상의 헤더를 만들 수 있습니다.

레이아웃 구조

인적정보
- 이름 (단독)
- 연락처: 이메일, 전화번호
부서, 직급, 급여 (그룹 없이 단독)

3. hideChildHeaders (자식 헤더 숨김)

hideChildHeaders: true로 설정하면 그룹 헤더만 표시하고 자식 컬럼 헤더를 숨깁니다.

4. 동적 레이아웃 전환

버튼을 클릭하여 레이아웃을 동적으로 변경합니다. setColumnLayout()과 clearColumnLayout() API를 사용합니다.

5. Fixed Columns + Column Group

틀고정(fixedOptions)과 Column Group을 함께 사용합니다. Fixed 영역은 기존 방식, 스크롤 영역에만 그룹 헤더가 적용됩니다.