콘텐츠로 이동
Data TableAPI Reference

행 그룹 옵션·변경 이벤트

comins-table@0.2.2React

부모가 그룹 목록·소속·펼침 상태를 소유하는 단일 깊이 그룹입니다. Tree의 children 구조와 다릅니다. 명시적인 groups 배열 순서가 그룹 순서를 결정합니다.

그룹·선택 실행 예제

groups: readonly TGroup[];

필수. 그룹 정의 배열입니다. 빈 그룹도 표시 대상이며 정렬은 각 그룹 내부 행에 적용합니다.

getGroupId: (group: TGroup) => CominsRowId;

필수. 그룹의 안정적인 고유 ID를 반환합니다.

getRowGroupId: (row: TData, dataIndex: number) => CominsRowId;

필수. 원본 행과 dataIndex를 받아 소속 그룹 ID를 반환합니다.

getGroupLabel?: (group: TGroup) => React.ReactNode;

그룹 헤더 라벨입니다. 생략 시 그룹 ID의 문자열을 사용합니다.

expandedGroupIds?: readonly CominsRowId[];

부모가 소유한 펼친 그룹 ID입니다. 기본 빈 배열이며 onChangeExpandedGroupIds로 갱신합니다.

onChangeExpandedGroupIds?: (groupIds: CominsRowId[]) => void;

펼침/접힘 요청의 전체 다음 ID 배열을 알립니다. 값에 반영해야 화면이 바뀝니다.

aggregations?: Readonly<Partial<Record<string, CominsRowGroupAggregation>>>;

컬럼 ID별 avg/count/max/min/sum 집계입니다. 생략 시 집계 없음. 필터 조합 시 필터된 그룹 멤버만 집계합니다.

renderGroupContent?: (params: CominsRowGroupRenderParams<TData, TGroup>) => React.ReactNode;

그룹 헤더 콘텐츠를 렌더링합니다. 생략 시 기본 라벨·행 수 표시를 사용합니다.

getGroupRowProps?: (params: CominsRowGroupRenderParams<TData, TGroup>) => CominsRowGroupProps | undefined;

그룹 행의 className/style을 반환합니다. 일반 rowProps와 별개입니다.

groupDraggable?: boolean;

기본 false. 그룹 자체의 순서 변경을 활성화합니다. onChangeGroups로 부모 배열을 갱신해야 합니다.

onChangeGroups?: (groups: TGroup[], details: CominsRowGroupMoveDetails) => void;

새 그룹 배열과 이동 details를 전달합니다. 행 데이터 재정렬 알림과 별개입니다.

setRowGroupId?: (params: CominsSetRowGroupIdParams<TData>) => TData;

행의 그룹 간 이동 시 새 소속을 가진 행을 반환합니다. 원본을 직접 변경하지 마십시오. 실제 데이터 반영은 onChangeData로 처리합니다.

export type CominsRowGroupRenderParams<TData, TGroup> = {
aggregateValues: Readonly<Record<string, number | null>>;
expanded: boolean;
group: TGroup;
groupId: CominsRowId;
groupIndex: number;
isEmpty: boolean;
rowCount: number;
};

groupIndex는 groups 내 위치, rowCount와 aggregateValues는 현재 그룹 멤버 기준입니다.

export type CominsRowGroupMoveDetails = {
fromIndex: number;
groupId: CominsRowId;
reason: "move";
targetGroupId: CominsRowId;
toIndex: number;
};

그룹 순서 이동 결과입니다. fromIndex/toIndex는 그룹 배열 인덱스이며 reason은 move입니다.

export type CominsSetRowGroupIdParams<TData> = {
fromGroupId: CominsRowId;
row: TData;
rowId: CominsRowId;
toGroupId: CominsRowId;
};

fromGroupId/toGroupId로 소속 변경을 표현합니다. 반환 행에 새 그룹 필드를 반영합니다.

label?: {
render?: (group: TGroup) => React.ReactNode;
};

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

content?: {
render?: (params: CominsRowGroupRenderParams<TData, TGroup>) => React.ReactNode;
};

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