Core 상태 모델

comins-table@0.2.2React

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

Core 함수는 CominsTableState를 입력받아 계산 결과나 다음 상태를 반환합니다. React Table의 props와는 별도 모델입니다. 상태 전체를 CominsTable에 펼치지 말고 React 연동에는 문서화된 props와 ref를 사용하십시오.

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

이 페이지는 React 상태를 사용하는 루트 comins-table 계약을 설명합니다. 중립 상태는 comins-table/core에서 가져옵니다.

import { createCominsTableState, updateCominsRows } from "comins-table";

createCominsTableState

export declare function createCominsTableState<TData>(input: CominsTableStateInput<TData>): CominsTableState<TData>;

columns와 rows로 상태를 만듭니다. 컬럼 id 생략 시 field를 사용하며 getRowId 기본값은 행 인덱스입니다. 행 추가·삭제·정렬이 있다면 고유한 업무 ID를 직접 지정하십시오. rows 배열은 깊은 복제 없이 참조를 공유하므로 외부에서 변경하지 않습니다. sortModel이 제공되면 sort보다 우선하고 selection은 빈 상태로 시작합니다.

setCominsTableTheme

export declare function setCominsTableTheme<TData>(state: CominsTableState<TData>, theme: CominsTableTheme): CominsTableState<TData>;

theme을 기존 theme에 얕게 병합합니다. style 객체의 내부 속성까지 병합하지는 않습니다.

setCominsHeaderVisible

export declare function setCominsHeaderVisible<TData>(state: CominsTableState<TData>, showHeader: boolean): CominsTableState<TData>;

showHeader 상태만 변경합니다. 헤더 행 모델 생성 함수는 이 플래그를 검사하지 않으므로 사용자 렌더러가 표시 여부를 판단합니다.

CominsTableStateInput

export type CominsTableStateInput<TData> = {
    columnLayout?: Partial<CominsColumnLayout>;
    columnGroups?: ReadonlyArray<CominsTableColumnGroup>;
    columns: ReadonlyArray<CominsTableColumn<TData>>;
    getRowId?: (row: TData, index: number) => CominsRowId;
    pagination?: Partial<CominsPaginationState>;
    rows: readonly TData[];
    showHeader?: boolean;
    sort?: CominsSortState | null;
    sortModel?: CominsSortModel;
    theme?: CominsTableTheme;
};

속성	동작·기본값
`columnLayout`	선택. 저장된 컬럼 순서·너비·숨김·고정 상태를 초기화에 사용합니다.
`columnGroups`	선택. 그룹 ID와 자식 컬럼 ID 구성. 기본 빈 배열입니다.
`columns`	필수 컬럼 정의.
`getRowId`	선택. (row, index) → string/number. 기본 index입니다.
`pagination`	기본 pageIndex 0, pageSize max(rows.length, 1).
`rows`	필수 행 배열. 외부에서 변경하지 않습니다.
`showHeader`	기본 true.
`sort`	선택 단일 정렬. 기본 null이며 sortModel이 우선합니다.
`sortModel`	우선순위대로 배열인 다중 정렬. 정렬 가능한 컬럼만 남깁니다.
`theme`	선택 테마. 기본 빈 객체입니다.

CominsTableState

export type CominsTableState<TData> = {
    columnOrder: string[];
    columnGroups: CominsTableRuntimeColumnGroup[];
    columnGroupState: Record<string, CominsColumnGroupRuntimeState>;
    columns: Array<CominsTableRuntimeColumn<TData>>;
    columnState: Record<string, CominsColumnRuntimeState>;
    getRowId: (row: TData, index: number) => CominsRowId;
    pagination: CominsPaginationState;
    rowIds: CominsRowId[];
    rows: TData[];
    selection: CominsSelectionState;
    showHeader: boolean;
    sort: CominsSortState | null;
    sortModel: CominsSortModel;
    theme: CominsTableTheme;
};

속성	동작·기본값
`columnOrder`	전체 컬럼 ID 순서. 표시 순서는 고정·그룹 처리를 추가 적용합니다.
`columnGroups`	정규화된 컬럼 그룹 정의.
`columnGroupState`	그룹별 숨김·고정 상태.
`columns`	id가 확정된 런타임 컬럼 정의.
`columnState`	컬럼별 너비·숨김·고정 상태.
`getRowId`	행 ID 계산 함수.
`pagination`	현재 pageIndex/pageSize.
`rowIds`	rows와 같은 순서의 행 ID.
`rows`	기준 행 배열. 정렬 모델만 변경하면 배열 순서는 유지됩니다.
`selection`	행·셀·범위 선택 상태.
`showHeader`	헤더 표시 플래그.
`sort`	sortModel의 첫 규칙 또는 null.
`sortModel`	정규화된 정렬 규칙 배열.
`theme`	현재 테마 객체.

CominsRowId

export type CominsRowId = string | number;

행 식별자는 string 또는 number입니다. 숫자 1과 문자열 “1”은 다른 ID입니다.

CominsTableDensity

export type CominsTableDensity = "comfortable" | "compact" | "spacious";

comfortable, compact, spacious 세 가지 밀도 토큰입니다.