컬럼·헤더·셀 옵션

comins-table@0.2.2React

columns와 columnGroups의 설정 사전입니다. 컬럼 ID는 정렬·필터·고정·저장 레이아웃을 연결하는 키입니다. 명시하지 않은 렌더링 설정은 기본 렌더러를 사용합니다.

컬럼 고정 실행 예제

CominsTableColumn

field

field: string;

필수. 행 데이터의 값 경로입니다. 점 표기 nested 경로를 지원합니다.

label

label: React.ReactNode;

필수. 헤더에 표시할 ReactNode입니다.

id

id?: string;

생략하면 field를 ID로 사용합니다. 같은 field를 여러 번 표시하면 서로 다른 id를 지정합니다.

width

width?: number;

초기 컬럼 폭(px)입니다. 생략 시 기본 레이아웃 계산을 사용합니다.

minWidth

minWidth?: number;

최소 컬럼 폭(px)입니다. 생략 시 리사이즈 최소 폭은 88px입니다.

maxWidth

maxWidth?: number;

최대 컬럼 폭(px)입니다. 생략 시 사용자 상한 없음.

hidden

hidden?: boolean;

기본 false. 표시에서 숨깁니다. 저장된 런타임 레이아웃과 함께 해석합니다.

pinned

pinned?: CominsColumnPinned;

left 또는 right로 가장자리에 고정합니다. 미지정 시 고정 없음. 가용 폭이 부족하면 일부 고정 열이 일시적으로 가운데 영역으로 이동할 수 있습니다.

lockPosition

lockPosition?: boolean;

기본 false. 컬럼 이동의 위치 변경을 제한합니다. 너비 고정 옵션은 아닙니다.

sort

sort?: boolean | ((left: TValue, right: TValue, leftRow: TData, rightRow: TData) => number);

생략/false이면 정렬 비활성. true이면 기본 비교, 함수이면 원본 값과 행을 받는 비교기를 사용합니다. 음수/0/양수를 반환합니다.

filter

filter?: CominsColumnFilterConfig<TData, TValue>;

미지정 시 해당 컬럼의 필터 없음. kind와 값 추출은 필터 옵션을 참고합니다.

header

header?: CominsTableHeaderConfig<TData, TValue>;

헤더 renderer·components·HTML props입니다. 아래 타입을 참고합니다.

cell

cell?: CominsTableCellConfig<TData, TValue>;

셀 renderer·format·components·tooltip·props입니다. 아래 타입을 참고합니다.

CominsTableColumnGroup

id

id: string;

필수. 그룹 헤더의 고유 ID입니다.

label

label: React.ReactNode;

필수. 그룹 헤더에 표시할 내용입니다.

children

children: string[];

필수. 소속 컬럼 ID 목록입니다. field가 아니라 최종 column.id를 사용합니다.

hidden

hidden?: boolean;

기본 false. 그룹 헤더의 숨김 상태입니다.

lockPosition

lockPosition?: boolean;

기본 false. 그룹의 위치 이동을 제한합니다.

pinned

pinned?: CominsColumnPinned;

그룹 고정 위치 left/right. 생략 시 그룹 수준 고정 없음. 자식과의 조합은 고정 가이드를 참고합니다.

CominsTableHeaderConfig

components

components?: Array<CominsHeaderComponent<TData, TValue>>;

헤더에 배치할 내장 컴포넌트 배열입니다. 미지정 시 추가 컴포넌트 없음. 세부 타입은 헤더 가이드를 참고합니다.

props

props?: React.ThHTMLAttributes<HTMLTableCellElement>;

헤더 th의 HTML 속성입니다. React 속성 타입을 따릅니다.

renderer

renderer?: (params: CominsHeaderComponentPayload<TData, TValue>) => React.ReactNode;

기본 헤더 내용을 대신 렌더링합니다. 컬럼·레이아웃·정렬 정보를 받습니다.

CominsTableCellConfig

components

components?: Array<CominsCellComponent<TData, TValue>>;

셀에 배치할 내장 컴포넌트 배열입니다. 미지정 시 추가 컴포넌트 없음. 세부 타입은 셀 가이드를 참고합니다.

format

format?: (params: CominsCellComponentPayload<TData, TValue>) => React.ReactNode;

원본 값을 표시용 ReactNode로 변환합니다. 정렬·필터 값 자체를 변경하지 않습니다.

props

props?: CominsColumnProps<TData, TValue> | ((params: CominsCellComponentPayload<TData, TValue>) => CominsColumnProps<TData, TValue>);

셀 클래스·스타일·편집/복사 제한입니다. 객체 또는 셀 payload를 받는 함수로 지정합니다.

renderer

renderer?: (params: CominsCellComponentPayload<TData, TValue>) => React.ReactNode;

사용자 셀 콘텐츠를 렌더링합니다. 미지정 시 기본 표시 경로를 사용합니다.

tooltip

tooltip?: string | ((params: CominsCellComponentPayload<TData, TValue>) => React.ReactNode) | {
        /** Informational content shown on hover/focus. Interactive popovers are not supported. */
        render?: (params: CominsCellComponentPayload<TData, TValue>) => React.ReactNode;
    };

문자열 또는 셀 payload를 받아 ReactNode를 반환하는 툴팁입니다. 미지정 시 사용자 툴팁 없음.

parseClipboard

parseClipboard?: (params: CominsCellComponentPayload<TData, TValue> & {
        text: string;
    }) => TValue;

외부 TSV 문자열을 셀 값으로 변환합니다. text는 입력 문자열이며 value와 row는 변경 전 대상입니다. 기본 동작은 문자열 유지입니다. 예외를 던지면 전체 붙여넣기를 취소합니다. 동기 함수만 지원하며 입력 객체를 직접 변경하지 마십시오. Fill에는 호출되지 않습니다.

validateFill

validateFill?: (params: Omit<CominsCellComponentPayload<TData, TValue>, "value"> & {
        value: unknown;
    }) => boolean | void;

원본 타입을 유지한 후보 value와 변경 전 대상 row를 검증합니다. true 또는 undefined는 허용, false 또는 예외는 전체 Fill 취소입니다. 보호된 셀과 동일한 값은 검증하지 않습니다. 비동기 검증은 지원하지 않으며 거절 시 React 오류 콜백이 호출되고 Ref는 false를 반환합니다.

CominsColumnProps

className

className?: string | ((params: CominsCellComponentPayload<TData, TValue>) => string | undefined);

셀 클래스 문자열 또는 payload 기반 함수입니다.

copyable

copyable?: CominsClipboardGuard<TData, TValue>;

복사 허용 여부를 boolean 또는 셀별 함수로 지정합니다. 미지정 시 기본 복사 정책을 따릅니다.

disabled

disabled?: CominsClipboardGuard<TData, TValue>;

셀 비활성 여부를 boolean 또는 셀별 함수로 지정합니다. 미지정 시 false입니다.

pasteable

pasteable?: CominsClipboardGuard<TData, TValue>;

붙여넣기 허용 여부를 지정합니다. 이 옵션만으로 키보드 클립보드 기능이 켜지지는 않습니다.

style

style?: React.CSSProperties | ((params: CominsCellComponentPayload<TData, TValue>) => React.CSSProperties | undefined);

셀 인라인 스타일 또는 payload 기반 함수입니다.

관련 API

• 기본 옵션

• 이벤트

• 데이터 로딩

• 필터

• 그룹

• 행 상세

• 내장 컴포넌트 구성

• 입력·선택 컴포넌트

render

render?: (params: CominsHeaderComponentPayload<TData, TValue>) => React.ReactNode;

표준 렌더링 경로와 반환값은 0.2.2 전환 가이드를 참고하십시오.

render

render?: (params: CominsCellComponentPayload<TData, TValue>) => React.ReactNode;

표준 렌더링 경로와 반환값은 0.2.2 전환 가이드를 참고하십시오.