syidaxgrid
홈 가격 내 정보
SYIDAX / DATA GRID

그룹과 집계 PRO

같은 값을 가진 행을 묶고 숫자 열을 집계합니다.

시작하기
그룹과 집계샘플 주문 데이터
120 rows
Grid를 불러오는 중입니다…

옵션

아래 항목을 바꾸면 Grid와 코드에 바로 반영됩니다.

Pro 기능을 제품에 적용하려면 Pro 라이선스가 필요합니다.

최근 결과

이 메뉴는 담당 팀별 그룹이 적용된 상태로 시작합니다. Platform·Design 등의 그룹과 숫자 열의 집계를 살펴보세요.

코드 보기
현재 미리보기

사용 가이드

#

주문을 담당 팀별로 묶고 각 팀의 수량 합계를 보고 싶을 때 사용합니다. 요약과 원본 주문을 같은 표에서 오갈 수 있습니다.

직접 해보기

  1. 팀별 요약 확인

    이 메뉴는 담당 팀별 그룹이 적용된 상태로 시작합니다. Platform·Design 등의 그룹과 숫자 열의 집계를 살펴보세요.

  2. 그룹 펼치기

    그룹의 펼침 버튼을 눌러 그 팀에 속한 주문을 확인하세요. 다시 누르면 상세 주문이 접힙니다.

  3. 원본과 비교

    표 아래 데이터 분석을 원본 데이터로 바꾸면 일반 주문 목록으로 돌아갑니다. 담당 팀별 그룹을 선택하면 다시 묶입니다.

확인할 결과

팀별 합계로 전체 규모를 파악하고 필요할 때 개별 주문까지 확인할 수 있습니다.

이 샘플은 브라우저에 있는 주문을 묶습니다. 서버 그룹 조회와는 별도입니다. 피벗과 일반 그룹화를 동시에 켜지 않습니다.

알아두면 쉬운 용어

groupBy
어떤 열의 같은 값을 기준으로 행을 묶을지 정합니다.
aggFunc: sum
그룹에 속한 숫자를 모두 더하는 집계 방식입니다.

제품에 이 기능을 적용하려면 Pro 런타임과 유효한 라이선스가 필요합니다.

API reference

#

주요 속성

Attribute / Property타입 / 기본값설명
PRO
groupBy		string | string[]기본값 undefinedgroup rows by this column. Rows fold into expandable groups rendered as group rows with a member count; the group stage runs after filter/sort and before pagination (pages count display rows, group rows included). Unknown fields are ignored with a warning.
나머지 속성1
Attribute / Property타입 / 기본값설명
PRO
groupPanel		boolean기본값 falseshow the row-group panel: a drop zone above the header. Drag a column header into it to group by that column (sets `groupBy`); the panel shows a chip for the grouped column, whose × clears the grouping.
이벤트2
이벤트detail 타입설명
PRO
{ key: string | null; expanded: boolean }fires when a row group expands or collapses (`key: null` = blank bucket).
PRO
{ groupBy: string | null }fires when the row-group column changes (via the group panel).
메서드8
메서드 / 인수반환 타입설명
PRO
name: string, fn: (values: unknown[], rows: readonly unknown[]) => unknown		Promise<void>register a named custom aggregation for `ColumnDef.aggFunc`. Registered names SHADOW built-ins (AG parity); re-registering a name replaces it. Invalid input warns and no-ops.
PRO
name: string		Promise<void>remove a registered aggregation (built-ins are unaffected).
PRO
Promise<string[]>registered custom aggregation names (registration order).
PRO
key: string | null, expanded: boolean		Promise<void>expand/collapse one row group. No-ops when the state already matches, grouping is inactive, or the key names no current group (arc review 222-226: unknown keys used to plant phantom collapse state + emit toggles for non-groups). Single-level: `key: null` = the blank bucket. Multi-level : `key` is a node's framed compound key (a `string`), validated against every node's key.
PRO
Promise<void>expand every row group. Emits one `rowGroupToggled` per group that actually changes (AG fires rowGroupOpened per node on expand/collapse-all too — arc review 222-226). Multi-level keys are framed strings; single-level blank folds back to `null` in the event.
PRO
Promise<void>collapse every row group (computed from the current data).
PRO
index: number		Promise<SyGridDisplayRowInfo | null>the display-row taxonomy for ONE live display row.
PRO
options?: SyGridGroupCheckStatesOptions		Promise<SyGridGroupCheckStatesReport>the group checkbox tri-state over the live hierarchy and the live selection.
ColumnDef1
ColumnDef타입 / 필수 여부설명
PRO
'sum' | 'avg' | 'min' | 'max' | 'count' | string선택aggregate this column over each row group (`group-by` active): the value renders in the group footer row. Built-ins: `'sum' | 'avg' | 'min' | 'max' | 'count'`; any other name resolves through `registerAggFunc` (registered names may shadow built-ins — AG `aggFuncs` parity), unknown names warn once and skip the column. Names only (no inline functions) — the declarative surface stays serialisable; functions live in the instance registry.
GridTab 이동 Enter 열기