Interface ColumnGroupDef<T>

묶음 머리글 컬럼 — 여러 컬럼 위에 한 줄 머리글을 얹는다(다단 헤더). header 가 묶음 머리글 글자이고 실제 값을 보여 주는 컬럼은 children 에 둔다. 묶음 자체는 값을 보여 주지 않으므로 field 는 적지 않아도 된다.

A group-header column — puts one header row over several columns (multi-level header). header is the group's caption and the columns that show values go in children. The group itself shows no value, so field is optional.

まとめ見出しの列 — 複数の列の上に一段の見出しを載せます(多段ヘッダー)。header がまとめ見出しの文字で、実際に値を表示する列は children に置きます。まとめ自体は値を表示しないので field は書かなくてもかまいません。

分组表头列 — 在多个列上方加一行表头(多级表头)。header 是分组表头的文字,真正显示值的列放在 children 里。分组本身不显示值,因此可以不写 field。

Example

columns: [
  { field: 'name', header: '이름' },
  { header: '매출(만원)', children: [{ field: 'q1', header: '1분기' }, { field: 'q2', header: '2분기' }] },
]

interface ColumnGroupDef<T = any> {
    align?: "left" | "right" | "center";
    alt?: string;
    ariaLabel?: string | ((value: any, row: T) => string);
    barcodeHeight?: number;
    cellStyle?:
        | Partial<Record<keyof CSSStyleDeclaration, string>>
        | ((value: any, row: T, rowIndex: number) => CSSProperties);
    children: ColumnOrGroup<T>[];
    colSpan?: boolean | ((row: T, rowIndex: number) => boolean);
    currency?: string;
    editable?: boolean | ((row: T, rowIndex: number) => boolean);
    editor?: EditorType | EditorDef;
    field?: string;
    filterable?: boolean;
    flex?: number;
    format?: string;
    formula?: string | ((row: T, D: any) => any);
    formulaPrecision?: number;
    frozen?: boolean;
    group?: string;
    header: string;
    headerAlign?: "left" | "right" | "center";
    headerStyle?: Partial<Record<keyof CSSStyleDeclaration, string>>;
    headerWrap?: boolean;
    hidden?: boolean;
    mask?: MaskType | MaskDef;
    maxWidth?: number;
    minWidth?: number;
    options?: (string | { label: string; value: any })[];
    optionsFn?: (
        row: T,
        rowIndex: number,
    ) => (string | { label: string; value: any })[];
    precision?: number;
    renderer?: RendererName | RendererDef;
    resizable?: boolean;
    rowSpan?: boolean;
    sanitize?: boolean;
    sortable?: boolean;
    tooltip?: string | ((value: any, row: T) => string);
    treeNodeIcon?:
        | TreeNodeIconDef
        | ((row: T, hasChildren: boolean, expanded: boolean) => string);
    type?: DataType;
    valueMap?: Record<string, string>;
    width?: number;
    wrap?: boolean;
}

Type Parameters

T = any

Hierarchy

Omit<ColumnDef<T>, "field" | "children">
- ColumnGroupDef

Properties

`Optional`align

align?: "left" | "right" | "center"

셀 정렬.

Cell text alignment.

セルの文字揃え。

单元格的文字对齐。

`Optional`alt

alt?: string

img — 이미지 대체 텍스트 (웹접근성 필수)

img — alt text (required for accessibility)

img — 画像の代替テキスト（ウェブアクセシビリティに必須）

img — 图片的替代文字（无障碍访问必需）

`Optional`ariaLabel

ariaLabel?: string | ((value: any, row: T) => string)

셀을 화면 낭독기가 읽을 글(aria-label). 주지 않으면 「머리글: 값」을 읽는다. 스파크라인·데이터바처럼 그림으로 그린 셀에 「무엇을 뜻하는지」를 말로 달아 줄 때 쓴다(문자열 또는 값·행 함수). 수식 셀은 수식 안내(오류 설명 포함)가 이 값보다 먼저다.

The text screen readers read for the cell (aria-label). Without it they read "header: value". Use it to put into words what a drawn cell (sparkline, data bar, …) means (a string, or a value/row function). For formula cells the formula description (including error explanations) takes precedence.

スクリーンリーダーがセルを読むときの文(aria-label)。渡さなければ「見出し: 値」を読みます。スパークラインやデータバーのように絵で描いたセルに「何を意味するか」を言葉で付けるときに使います(文字列、または値・行の関数)。数式セルでは数式の案内(エラーの説明を含む)がこの値より優先されます。

屏幕阅读器朗读该单元格时的文字(aria-label)。不传则朗读「表头: 值」。用于给迷你折线、数据条这类以图形绘制的单元格用文字说明「表示什么」(字符串,或按值、行的函数)。公式单元格中,公式说明(包括错误说明)优先于此值。

Example

{ field: 'trend', header: '추세', renderer: 'sparkline', ariaLabel: (v: number[]) => `최근 값 ${v[v.length - 1]}, 처음보다 ${v[v.length - 1] >= v[0] ? '올랐다' : '내렸다'}` }

`Optional`barcodeHeight

barcodeHeight?: number

barcode — 바코드 높이(px), 기본 28

barcode — bar height in px, default 28

barcode — バーコードの高さ（px）、既定 28

barcode — 条形码高度（px），默认 28

`Optional`cellStyle

cellStyle?:
| Partial<Record<keyof CSSStyleDeclaration, string>>
| ((value: any, row: T, rowIndex: number) => CSSProperties)

셀 인라인 스타일(정적 또는 값·행 함수).

Cell inline style (static or value/row function).

セルのインラインスタイル（静的、または値・行の関数）。

单元格的内联样式（静态，或按值、行的函数）。

children

children: ColumnOrGroup<T>[]

묶음 아래에 놓일 컬럼들(잎 컬럼 또는 다시 묶음).

Columns under the group (leaf columns or nested groups).

まとめの下に置く列(末端の列、またはさらにまとめ)。

分组下面的列(叶子列或再嵌套的分组)。

`Optional`colSpan

colSpan?: boolean | ((row: T, rowIndex: number) => boolean)

가로 병합 허용(불리언 또는 행별 함수).

Allow column span (boolean or per-row function).

横方向の結合を許可（真偽値、または行ごとの関数）。

允许横向合并（布尔值，或按行的函数）。

`Optional`currency

currency?: string

ISO 통화코드('KRW'|'USD'|'EUR'…). 지정 시 Intl.NumberFormat 로케일 통화 포맷 (format 보다 우선)

ISO currency code; uses Intl.NumberFormat locale currency formatting (takes precedence over format)

ISO通貨コード（'KRW'|'USD'|'EUR' など）。指定すると Intl.NumberFormat のロケール通貨フォーマット（format より優先）

ISO 货币代码（'KRW'|'USD'|'EUR' 等）。指定后使用 Intl.NumberFormat 的区域货币格式（优先于 format）

`Optional`editable

editable?: boolean | ((row: T, rowIndex: number) => boolean)

이 컬럼을 편집할 수 있는지. true 면 항상 편집 가능, 함수로 주면 행마다 다르게 결정합니다 (예: 상태가 '확정'인 행만 잠그기). GridOptions.editable 과 둘 다 참일 때만 실제로 열립니다.

Whether this column is editable. true = always; a function decides per row (e.g. lock only 'finalized' rows). Editing opens only when this AND GridOptions.editable are true.

この列を編集できるかどうか。true なら常に編集可能、関数で渡せば行ごとに違う判断をします（例: 状態が「確定」の行だけロックする）。GridOptions.editable と両方が真のときにだけ実際に開きます。

该列能否编辑。true 表示始终可编辑，传函数则按行判断（例如只锁定状态为「确定」的行）。只有它与 GridOptions.editable 同时为真时才会真正打开。

`Optional`editor

editor?: EditorType | EditorDef

편집기 종류. 내장 편집기 이름 한 줄로 주거나, 선택지·최소/최대 등이 필요하면 EditorDef 객체로 줍니다.

The editor — a built-in editor name, or an EditorDef object for choices/min/max, etc.

エディターの種類。組み込みエディターの名前を一行で渡すか、選択肢・最小/最大などが必要なら EditorDef オブジェクトで渡します。

编辑器种类。用一行传内置编辑器名称，需要选项、最小/最大等时传 EditorDef 对象。

`Optional`field

field?: string

묶음에는 값이 없으므로 선택 항목이다.

Optional, since a group has no value of its own.

まとめには値がないので任意項目です。

分组没有自己的值,因此为可选项。

`Optional`filterable

filterable?: boolean

이 컬럼에 필터 아이콘·패널을 띄울지.

Whether to show the filter icon/panel on this column.

この列にフィルターのアイコン・パネルを出すか。

是否在该列显示筛选图标和面板。

`Optional`flex

flex?: number

남는 가로 공간을 컬럼끼리 나눌 때의 비율. 값이 클수록 더 많이 차지합니다(width 미지정 컬럼끼리).

Weight for sharing leftover horizontal space — higher takes more (among columns without width).

余った横方向のスペースを列どうしで分けるときの比率。値が大きいほど多く占めます（width を指定していない列どうしで）。

分配剩余横向空间的比例。值越大占得越多（在未指定 width 的列之间）。

`Optional`format

format?: string

숫자/날짜 포맷 문자열. 숫자는 통화 기호 접두·접미와 음수 패턴 지원: '#,##0' · '#,##0.00' · '₩#,##0' · '$#,##0.00' · '#,##0원' · '$#,##0;($#,##0)'(음수 괄호)

Number/date format string. Numbers support currency prefixes/suffixes and negative patterns, e.g. '$#,##0;($#,##0)' (parentheses for negatives).

数値/日付のフォーマット文字列。数値は通貨記号の前置・後置と、負数パターンに対応: '#,##0' · '#,##0.00' · '₩#,##0' · '$#,##0.00' · '#,##0원' · '$#,##0;($#,##0)'（負数は括弧）

数值/日期的格式字符串。数值支持货币符号前置、后置和负数模式： '#,##0' · '#,##0.00' · '₩#,##0' · '$#,##0.00' · '#,##0원' · '$#,##0;($#,##0)'（负数加括号）

`Optional`formula

formula?: string | ((row: T, D: any) => any)

이 컬럼 값을 다른 컬럼으로 자동 계산. 함수식 또는 '[field]' 를 쓰는 문자열식.

Auto-compute this column from others — a function, or a string using '[field]' refs.

この列の値を他の列から自動計算。関数式、または '[field]' を使う文字列式。

用其他列自动计算该列的值。函数式，或使用 '[field]' 的字符串式。

`Optional`formulaPrecision

formulaPrecision?: number

수식 나눗셈의 소수점 자리수. 기본 30.

Decimal precision for division inside the formula. Default 30.

数式の除算の小数点以下の桁数。既定 30。

公式除法的小数位数。默认 30。

`Optional`frozen

frozen?: boolean

true 면 가로 스크롤과 무관하게 왼쪽에 붙박아 둡니다(핵심 식별 컬럼 고정용).

true pins the column to the left regardless of horizontal scroll (for key identifier columns).

true なら横スクロールに関係なく左に固定しておきます（重要な識別列の固定用）。

true 时无论横向滚动都固定在左侧（用于固定关键标识列）。

`Optional`group

group?: string

radio — 같은 group 내 단일 선택

radio — single choice within the same group

radio — 同じ group 内での単一選択

radio — 同一 group 内的单选

header: string

헤더에 보일 글자. 문자열 안의 '\n' 은 두 줄로 나뉩니다.

The caption shown in the header. A '\n' inside splits into two lines.

ヘッダーに表示する文字。文字列の中の '\n' は二行に分かれます。

表头显示的文字。字符串中的 '\n' 会分成两行。

`Optional`headerAlign

headerAlign?: "left" | "right" | "center"

헤더 정렬.

Header text alignment.

ヘッダーの文字揃え。

表头的文字对齐。

`Optional`headerStyle

headerStyle?: Partial<Record<keyof CSSStyleDeclaration, string>>

헤더 인라인 스타일.

Header inline style.

ヘッダーのインラインスタイル。

表头的内联样式。

`Optional`headerWrap

headerWrap?: boolean

컬럼 헤더 줄바꿈: true 면 헤더 텍스트가 잘리지 않고 여러 줄로 줄바꿈된다. (셀 본문용 wrap 과 별개로 헤더에만 적용. header 문자열의 '\n' 은 headerWrap 여부와 무관하게 항상 줄바꿈됨) 줄바꿈된 헤더에 맞춰 헤더 행 높이가 자동으로 늘어난다.

Header wrapping: true wraps header text to multiple lines instead of truncating (header-only, independent of the body wrap; '\n' in header always breaks regardless). The header row height grows automatically to fit.

ヘッダー（列の見出し）の折り返し: true ならヘッダーのテキストが切れずに複数行へ折り返される。（セル本文用の wrap とは別に、ヘッダーだけに適用。header 文字列の '\n' は headerWrap の有無に関係なく常に改行される）折り返されたヘッダーに合わせて、ヘッダー行の高さが自動で伸びる。

表头（列标题）换行：true 时表头文字不截断，而是换行成多行。（与单元格正文的 wrap 无关，只作用于表头。header 字符串中的 '\n' 无论 headerWrap 与否都始终换行）表头行高会随换行后的表头自动增高。

`Optional`hidden

hidden?: boolean

true 면 이 컬럼을 화면에서 감춥니다(데이터는 남고 showColumn 으로 다시 보임).

true hides the column (data stays; showColumn brings it back).

true ならこの列を画面から隠します（データは残り、showColumn で再び表示）。

true 时把该列从画面隐藏（数据保留，用 showColumn 可再次显示）。

`Optional`mask

mask?: MaskType | MaskDef

이 컬럼 값을 가려 표시할 마스킹 타입 또는 상세 정의.

Mask type or detailed definition to obscure this column's values.

この列の値を伏せて表示するマスキングのタイプ、または詳細な定義。

遮蔽显示该列值的掩码类型，或详细定义。

`Optional`maxWidth

maxWidth?: number

늘어날 때 넘지 않을 최대 폭(px).

Upper bound (px) the column won't grow past.

広がるときにこれ以上は超えない最大の幅（px）。

扩展时不超过的最大宽度（px）。

`Optional`minWidth

minWidth?: number

줄어들 때 넘지 않을 최소 폭(px).

Lower bound (px) the column won't shrink past.

縮むときにこれ以上は超えない最小の幅（px）。

收缩时不低于的最小宽度（px）。

`Optional`options

options?: (string | { label: string; value: any })[]

select 정적 옵션.

Static options for select.

select の静的オプション。

select 的静态选项。

`Optional`optionsFn

optionsFn?: (
row: T,
rowIndex: number,
) => (string | { label: string; value: any })[]

select 동적 옵션 함수.

Dynamic option function for select.

select の動的オプション関数。

select 的动态选项函数。

`Optional`precision

precision?: number

표시할 때 반올림해서 보여줄 소수점 자리수(합계 계산에도 반영).

Decimal places to show (also applied to summing).

表示するときに丸めて見せる小数点以下の桁数（合計の計算にも反映）。

显示时四舍五入到的小数位数（也反映到合计计算）。

`Optional`renderer

renderer?: RendererName | RendererDef

셀을 그리는 방식. 내장 렌더러 이름 한 줄로 주거나, 부가 옵션이 필요하면 RendererDef 객체로 줍니다.

How the cell is drawn — a built-in renderer name, or a RendererDef object when extras are needed.

セルを描く方式。組み込みレンダラーの名前を一行で渡すか、付加オプションが必要なら RendererDef オブジェクトで渡します。

单元格的绘制方式。用一行传内置渲染器名称，需要附加选项时传 RendererDef 对象。

`Optional`resizable

resizable?: boolean

헤더 경계를 드래그해 폭을 조절하게 할지.

Whether the user can drag the header edge to resize.

ヘッダーの境界をドラッグして幅を調節できるようにするか。

是否允许拖动表头边界调节宽度。

`Optional`rowSpan

rowSpan?: boolean

세로 병합 허용.

Allow row span.

縦方向の結合を許可。

允许纵向合并。

`Optional`sanitize

sanitize?: boolean

html — XSS 방지 sanitize (기본 true)

html — XSS sanitize (default true)

html — XSS を防ぐ sanitize（既定 true）

html — 防 XSS 的 sanitize（默认 true）

`Optional`sortable

sortable?: boolean

이 컬럼 헤더를 클릭하면 정렬되게 할지. 특정 컬럼만 정렬을 막거나 허용할 때 씁니다.

Whether clicking this header sorts. Use it to allow/deny sorting per column.

この列のヘッダーをクリックしたらソートされるようにするか。特定の列だけソートを禁じたり許したりするときに使います。

点击该列表头是否排序。用于按列禁止或允许排序。

`Optional`tooltip

tooltip?: string | ((value: any, row: T) => string)

셀 title 툴팁(정적 또는 값·행 함수).

Cell title tooltip (static or value/row function).

セルの title ツールチップ（静的、または値・行の関数）。

单元格的 title 提示（静态，或按值、行的函数）。

`Optional`treeNodeIcon

treeNodeIcon?:
| TreeNodeIconDef
| ((row: T, hasChildren: boolean, expanded: boolean) => string)

트리 노드 아이콘(정적 정의 또는 행별 함수).

Tree node icon (static def or per-row function).

ツリーノードのアイコン（静的な定義、または行ごとの関数）。

树节点图标（静态定义，或按行的函数）。

`Optional`type

type?: DataType

이 컬럼 값의 종류. 이걸 정하면 그에 맞는 정렬 방식과 기본 렌더러가 자동으로 붙습니다 (예: 'number' 는 오른쪽 정렬 + 숫자 비교). 지정하지 않으면 문자열처럼 다룹니다.

The kind of value here. Setting it auto-wires the matching sort behavior and default renderer (e.g. 'number' → right-aligned + numeric compare). Unset behaves like a string.

この列の値の種類。これを決めると、それに合ったソート方式と既定のレンダラーが自動で付きます（例: 'number' は右揃え + 数値比較）。指定しない場合は文字列のように扱います。

该列的值的种类。设定后会自动接上相应的排序方式和默认渲染器（例如 'number' 为右对齐 + 按数值比较）。不指定时按字符串处理。

`Optional`valueMap

valueMap?: Record<string, string>

저장된 코드값을 사람이 읽는 말로 바꿔 보여줄 때(예: { 'M': '남', 'F': '여' }).

Show human-readable text for stored codes (e.g. { 'M':'Male', 'F':'Female' }).

保存されたコード値を、人が読める言葉に変えて見せるとき（例: { 'M': '남', 'F': '여' }）。

把保存的代码值换成人能读懂的文字显示（例如 { 'M': '남', 'F': '여' }）。

`Optional`width

width?: number

이 폭(px)으로 고정. 지정하면 flex 를 무시하고 정확히 이 값이 됩니다.

Pin this width (px). When set it overrides flex and stays exactly this.

この幅（px）で固定。指定すると flex を無視して、正確にこの値になります。

固定为该宽度（px）。指定后忽略 flex，精确保持此值。

`Optional`wrap

wrap?: boolean

셀 줄바꿈: true 면 nowrap+ellipsis 대신 여러 줄로 표시(rowHeight 확대와 함께 사용)

Cell wrapping: true renders multiple lines instead of nowrap+ellipsis (use with a larger rowHeight)

セルの折り返し: true なら nowrap+ellipsis の代わりに複数行で表示（rowHeight を大きくして併用）

单元格换行：true 时不用 nowrap+ellipsis，改为多行显示（配合放大 rowHeight 使用）

Interface ColumnGroupDef<T>

Example

Type Parameters

Hierarchy

Index

Properties

Properties

Optionalalign

Optionalalt

OptionalariaLabel

Example

OptionalbarcodeHeight

OptionalcellStyle

children

OptionalcolSpan

Optionalcurrency

Optionaleditable

Optionaleditor

Optionalfield

Optionalfilterable

Optionalflex

Optionalformat

Optionalformula

OptionalformulaPrecision

Optionalfrozen

Optionalgroup

header

OptionalheaderAlign

OptionalheaderStyle

OptionalheaderWrap

Optionalhidden

Optionalmask

OptionalmaxWidth

OptionalminWidth

Optionaloptions

OptionaloptionsFn

Optionalprecision

Optionalrenderer

Optionalresizable

OptionalrowSpan

Optionalsanitize

Optionalsortable

Optionaltooltip

OptionaltreeNodeIcon

Optionaltype

OptionalvalueMap

Optionalwidth

Optionalwrap

Settings

On This Page

`Optional`align

`Optional`alt

`Optional`ariaLabel

`Optional`barcodeHeight

`Optional`cellStyle

`Optional`colSpan

`Optional`currency

`Optional`editable

`Optional`editor

`Optional`field

`Optional`filterable

`Optional`flex

`Optional`format

`Optional`formula

`Optional`formulaPrecision

`Optional`frozen

`Optional`group

`Optional`headerAlign

`Optional`headerStyle

`Optional`headerWrap

`Optional`hidden

`Optional`mask

`Optional`maxWidth

`Optional`minWidth

`Optional`options

`Optional`optionsFn

`Optional`precision

`Optional`renderer

`Optional`resizable

`Optional`rowSpan

`Optional`sanitize

`Optional`sortable

`Optional`tooltip

`Optional`treeNodeIcon

`Optional`type

`Optional`valueMap

`Optional`width

`Optional`wrap