콘텐츠로 이동
Data TableAPI Reference

Core 컬럼·헤더 배치

comins-table@0.2.2React

0.2.0: 이 페이지의 타입과 helper는 루트 comins-table의 React 상태 계약입니다. 중립 /core는 별도 타입 계약을 사용합니다. 마이그레이션 가이드에서 import 경로와 셀 정책 차이를 확인합니다.

컬럼 정의와 런타임 배치 상태를 구분합니다. 너비·숨김·순서·고정 정보를 저장할 때는 serializeCominsColumnLayout의 결과를 사용합니다.

긴 구조적 반환 선언은 동일한 CominsTableState<TData>로 표기합니다. 배포 선언과의 양방향 타입 호환성을 검사합니다.

export declare function setCominsColumnWidth<TData>(state: CominsTableState<TData>, columnId: string, width: number): CominsTableState<TData>;

columnState[columnId].width를 설정합니다. 이 Core setter는 너비 제한을 검사하지 않으므로 직접 유효한 너비를 전달합니다.

export declare function setCominsColumnHidden<TData>(state: CominsTableState<TData>, columnId: string, hidden: boolean): CominsTableState<TData>;

컬럼의 런타임 hidden을 변경합니다. 그룹이 숨겨져 있으면 개별 컬럼을 표시로 바꿔도 그룹 표시가 우선합니다.

export declare function setCominsColumnGroupHidden<TData>(state: CominsTableState<TData>, groupId: string, hidden: boolean): CominsTableState<TData>;

그룹 숨김을 변경합니다. 존재하지 않는 그룹이면 원래 상태입니다. 자식별 숨김 설정은 보존합니다.

export declare function setCominsColumnGroupWidth<TData>(state: CominsTableState<TData>, groupId: string, width: number): CominsTableState<TData>;

표시 중인 자식 컬럼에 그룹 총 너비를 분배하며 각 minWidth/maxWidth를 반영합니다. 없는 그룹·숨긴 그룹·표시 자식이 없는 그룹은 변경하지 않습니다.

export declare function moveCominsColumn<TData>(state: CominsTableState<TData>, columnId: string, targetIndex: number): CominsTableState<TData>;

이동 컬럼을 제거한 전체 columnOrder의 targetIndex에 삽입합니다. 그룹 자식은 같은 그룹 안에서만 이동하며 lockPosition 또는 고정 블록의 위치를 바꾸는 이동은 거절합니다.

export declare function moveCominsColumnGroup<TData>(state: CominsTableState<TData>, groupId: string, targetIndex: number): CominsTableState<TData>;

그룹 자식을 하나의 블록으로 제거한 뒤 targetIndex에 삽입합니다. 위치 잠금·고정 그룹과 잠금 위치를 변경하는 이동은 거절합니다.

export declare function serializeCominsColumnLayout<TData>(state: CominsTableState<TData>): CominsColumnLayout;

order와 columns, 그룹이 있으면 groups를 반환합니다. 함수·React 노드를 저장하는 API가 아닙니다. 중첩 참조의 완전한 깊은 복사는 아니므로 결과를 직접 변경하지 마십시오.

export declare function applyCominsColumnLayout<TData>(state: CominsTableState<TData>, layout: CominsColumnLayout): CominsTableState<TData>;

저장된 배치를 현재 컬럼/그룹 정의에 맞추어 정규화합니다. 알려진 ID와 그룹 연속성을 기준으로 순서·상태를 다시 만듭니다.

export declare function getCominsVisibleColumns<TData>(state: CominsTableState<TData>): CominsTableRuntimeColumn<TData, unknown>[];

숨긴 컬럼·그룹을 제외하고 그룹 자식을 묶어 왼쪽 고정 → 일반 → 오른쪽 고정 순서로 반환합니다. 너비는 columnState에서 별도로 읽습니다.

export declare function getCominsHeaderRows<TData>(state: CominsTableState<TData>): Array<Array<CominsHeaderCell<TData>>>;

그룹이 없으면 1행, 있으면 부모/자식 2행의 헤더 셀 모델을 반환합니다. 그룹 밖 컬럼은 rowSpan 2, 그룹은 표시 자식 수만큼 colSpan을 갖습니다.

export type CominsColumnRuntimeState = {
hidden?: boolean;
pinned?: CominsColumnPinned;
width?: number;
};
속성 동작·기본값
hidden 컬럼 숨김 상태.
pinned left/right 고정 상태.
width 런타임 너비(px).
export type CominsColumnGroupRuntimeState = {
hidden?: boolean;
pinned?: CominsColumnPinned;
};
속성 동작·기본값
hidden 그룹 전체 숨김 상태.
pinned 그룹 블록의 left/right 고정 상태.
export type CominsColumnLayout = {
columns: Record<string, CominsColumnRuntimeState>;
groups?: Record<string, CominsColumnGroupRuntimeState>;
order: string[];
};
속성 동작·기본값
columns 컬럼 ID별 상태.
groups 선택. 그룹 ID별 상태.
order 컬럼 ID 순서 배열.
export type CominsTableRuntimeColumn<TData, TValue = unknown> = Omit<CominsTableColumn<TData, TValue>, "id"> & {
id: string;
};

CominsTableColumn에서 선택적 id를 필수 string id로 확정한 타입입니다.

export type CominsTableRuntimeColumnGroup = Omit<CominsTableColumnGroup, "children"> & {
children: string[];
};

정규화된 그룹 정의입니다. children은 유효한 컬럼 ID 배열입니다.

export type CominsHeaderColumnCell<TData> = {
colSpan: 1;
column: CominsTableRuntimeColumn<TData>;
columnId: string;
groupId?: string;
kind: "column";
rowSpan: 1 | 2;
};
속성 동작·기본값
colSpan 항상 1.
column 렌더링할 런타임 컬럼 정의.
columnId 컬럼 ID.
groupId 그룹 소속이면 해당 ID.
kind column 판별자.
rowSpan 일반 1, 그룹 밖 부모 셀은 2.
export type CominsHeaderGroupCell = {
colSpan: number;
group: CominsTableRuntimeColumnGroup;
groupId: string;
kind: "group";
rowSpan: 1;
};
속성 동작·기본값
colSpan 현재 표시 자식 수.
group 그룹 정의.
groupId 그룹 ID.
kind group 판별자.
rowSpan 항상 1.
export type CominsHeaderCell<TData> = CominsHeaderColumnCell<TData> | CominsHeaderGroupCell;

kind로 column/group을 판별하는 union입니다.