콘텐츠로 이동
Data TableAPI Reference

헤더 메뉴 옵션·이벤트

comins-table@0.2.2React

type: "menu"는 헤더 전용입니다. 0.2.0 배포 구현은 트리거 하위에 fixed 위치 메뉴를 표시하며, 메뉴 열림은 내부 상태입니다. onOpenChange는 상태 입력 prop이 아닌 변경 알림입니다.

변경 요청 → onBeforeChange → 내부 상태 변경 → onOpenChange 순서입니다. onBeforeChange에서 false를 반환하면 열기뿐 아니라 닫기도 거절합니다. Promise 기반 비동기 허용 검사는 지원하지 않습니다. Escape/외부 pointer/항목 선택에 따른 닫힘도 고려하여 닫기를 계속 차단하지 않도록 구성하십시오. onSelect는 항목 선택을 알리며 데이터 변경은 애플리케이션이 수행합니다.

메뉴 실행 예제에서 ID 헤더의 메뉴를 열고 항목을 선택하십시오. 헤더 정렬과 일반 셀/행 이벤트가 발생하지 않습니다.

type: "menu";

필수 menu입니다. 셀에서는 허용하지 않습니다.

items: CominsTableMenuItems<TPayload>;

필수. 메뉴 항목 배열 또는 헤더 payload를 받는 함수입니다.

props?: CominsTableComponentProps<TPayload, React.ButtonHTMLAttributes<HTMLButtonElement>>;

트리거 button 속성입니다. children/aria-label로 용도를 표시합니다. 기본 HTML type은 button입니다.

onBeforeChange?: (payload: TPayload & {
event?: Event | React.SyntheticEvent;
open: boolean;
}) => boolean | void;

기본 제한 없음. next open과 선택적 event를 받아 false로 변경을 거절합니다.

onOpenChange?: (payload: TPayload & {
event?: Event | React.SyntheticEvent;
open: boolean;
}) => void;

허용된 열림 변경 뒤 호출합니다. open은 다음 상태이며 event는 없을 수 있습니다.

onSelect?: (payload: TPayload & {
event: React.MouseEvent<HTMLButtonElement>;
item: Extract<CominsTableMenuItem, {
value: CominsComponentPrimitiveValue;
}>;
value: CominsComponentPrimitiveValue;
}) => void;

선택 가능한 항목에 대해 item/value/MouseEvent와 헤더 payload를 전달합니다. label/divider는 선택 이벤트가 없습니다.

export type CominsTableMenuItem = {
disabled?: boolean;
label: React.ReactNode;
type?: "item";
value: CominsComponentPrimitiveValue;
} | {
label: React.ReactNode;
type: "label";
} | {
type: "divider";
};

일반 항목은 label/value가 필수이고 type은 생략 또는 item입니다. disabled 기본값은 false입니다. type: label은 label만, divider는 type만 받습니다. 각 variant의 필드를 섞지 않습니다.

export type CominsTableMenuItems<TPayload> = CominsTableMenuItem[] | ((payload: TPayload) => CominsTableMenuItem[]);

배열 또는 현재 헤더 payload로 항목을 계산하는 함수입니다.