콘텐츠로 이동
comins.DOCS
Data TableAPI Reference

내장 컴포넌트 구성·payload

comins-table@0.2.2React

columns[].cell.components와 columns[].header.components는 comins-table에서 가져오는 타입으로 구성합니다. 임의의 컴포넌트 이름 대신 아래 지원 type을 사용하고, 사용자 React 컴포넌트는 renderer에 넣습니다.

지원 위치와 표시 순서

섹션 제목: “지원 위치와 표시 순서”
type 셀 헤더 사전
input / checkbox / radio / select / toggle 지원 지원 입력 컴포넌트
button / progress 지원 지원 버튼·진행률
menu 미지원 지원 헤더 메뉴
virtual-list 지원 미지원 셀 가상 목록

셀은 renderer가 format과 components보다 우선합니다. components가 있으면 기본 값/format 대신 컴포넌트를 표시합니다. 셀 input/select는 해당 행 하나만 선택했을 때 나타나며, 다른 상태에서는 기본 값 표시를 사용합니다. 헤더 renderer는 label과 components를 대체합니다. 그룹 부모 헤더에는 컴포넌트 슬롯이 없습니다.

컴포넌트의 props는 객체 또는 현재 payload를 받는 함수입니다. 이벤트 처리 시 부모 data를 새 배열/객체로 갱신하십시오. 내장 컴포넌트의 click·pointer·keyboard는 셀/행 선택 및 헤더 정렬·이동과 격리됩니다. 사용자 renderer의 이벤트 격리는 직접 처리합니다.

CominsComponentPlacement

섹션 제목: “CominsComponentPlacement”

align

섹션 제목: “align”
align?: CominsComponentAlign;

기본값 center. start/center/end로 슬롯 안 정렬을 지정합니다.

direction

섹션 제목: “direction”
direction?: CominsComponentDirection;

기본 left. left/right로 값 또는 헤더 라벨의 어느 쪽에 배치할지 정합니다. 같은 쪽은 배열 순서를 따릅니다.

id

섹션 제목: “id”
id?: string;

생략 시 type과 배열 인덱스로 슬롯 키를 만듭니다. 항목을 동적으로 추가·재배치하면 안정적인 고유 ID를 지정하십시오.

CominsComponentColumnPayload

섹션 제목: “CominsComponentColumnPayload”

definition

섹션 제목: “definition”
definition: CominsTableRuntimeColumn<TData, TValue>;

정규화된 런타임 컬럼 정의입니다. 읽기 용도로 사용합니다.

field

섹션 제목: “field”
field: string;

원본 행에서 읽는 데이터 경로입니다.

id

섹션 제목: “id”
id: string;

정렬·필터·레이아웃에 쓰는 컬럼 ID입니다.

index

섹션 제목: “index”
index: number;

현재 표시 컬럼 인덱스입니다. 원본 columns 순번과 다를 수 있습니다.

label

섹션 제목: “label”
label: React.ReactNode;

컬럼에 지정한 ReactNode 라벨입니다.

CominsComponentRowPayload

섹션 제목: “CominsComponentRowPayload”

data

섹션 제목: “data”
data: TData;

부모가 소유한 원본 행입니다. 직접 수정하지 마십시오.

dataIndex

섹션 제목: “dataIndex”
dataIndex: number;

원본 데이터 인덱스입니다. Viewport에서는 절대 인덱스입니다.

disabled

섹션 제목: “disabled”
disabled: boolean;

현재 행의 해석된 비활성 상태입니다.

id

섹션 제목: “id”
id: CominsRowId;

안정적인 업무 행 ID입니다.

index

섹션 제목: “index”
index: number;

현재 표시 행 인덱스입니다.

selected

섹션 제목: “selected”
selected: boolean;

현재 행이 선택됐는지 나타냅니다.

CominsCellComponentPayload

섹션 제목: “CominsCellComponentPayload”

column

섹션 제목: “column”
column: CominsComponentColumnPayload<TData, TValue>;

위의 컬럼 payload입니다.

row

섹션 제목: “row”
row: CominsComponentRowPayload<TData>;

위의 행 payload입니다.

selection

섹션 제목: “selection”
selection: {
        selectedRowCount: number;
    };

selectedRowCount는 선택된 행 수입니다. input/select와 검색 표시 조건에 사용됩니다.

value

섹션 제목: “value”
value: TValue;

format/renderer 적용 전의 원본 셀 값입니다.

CominsHeaderComponentPayload

섹션 제목: “CominsHeaderComponentPayload”

column

섹션 제목: “column”
column: CominsComponentColumnPayload<TData, TValue>;

헤더가 속한 컬럼 payload입니다. row는 없습니다.

layout

섹션 제목: “layout”
layout: {
        hidden: boolean;
        width?: number;
    };

hidden은 해석된 숨김 상태, width는 현재 폭이며 미지정일 수 있습니다.

sort

섹션 제목: “sort”
sort: {
        count: number;
        direction: CominsSortDirection | null;
        enabled: boolean;
        priority: number | null;
    };

count는 전체 정렬 규칙 수, direction은 이 열 방향 또는 null, enabled는 정렬 가능 여부, priority는 이 열의 1부터 시작하는 순위 또는 null입니다.

CominsCellComponent

섹션 제목: “CominsCellComponent”
export type CominsCellComponent<TData, TValue = unknown> = CominsComponentPlacement & CominsCellComponentConfig<TData, TValue>;

배치 속성과 셀의 type별 설정을 결합합니다.

CominsHeaderComponent

섹션 제목: “CominsHeaderComponent”
export type CominsHeaderComponent<TData, TValue = unknown> = CominsComponentPlacement & CominsHeaderComponentConfig<TData, TValue>;

배치 속성과 헤더의 type별 설정을 결합합니다.

CominsTableComponentProps

섹션 제목: “CominsTableComponentProps”
export type CominsTableComponentProps<TPayload, TProps> = TProps | ((payload: TPayload) => TProps);

props resolver는 현재 위치의 payload를 받고 React 속성 객체를 반환합니다.

CominsTableOptions

섹션 제목: “CominsTableOptions”
export type CominsTableOptions<TPayload> = CominsTableComponentOption[] | ((payload: TPayload) => CominsTableComponentOption[]);

선택지 배열 또는 현재 payload로 선택지를 계산하는 함수입니다.

관련 API

섹션 제목: “관련 API”