OPEN_GRID API - v1.5.2
    Preparing search index...

    Interface ColumnDef<T>

    컬럼 한 개를 어떻게 보이고 동작하게 할지 담는 설정 뭉치입니다. 그리드는 columns 배열에 담긴 이 정의들을 왼쪽부터 순서대로 그립니다. 최소한 field(어떤 데이터를 보여줄지)와 header(머리글 글자)만 있으면 되고, 나머지는 필요할 때만 켜는 선택 항목입니다.

    The settings bundle for a single column — what it shows and how it behaves. The grid draws the definitions in the columns array left to right. Only field (which data to show) and header (the caption) are required; everything else is opt-in.

    列一つをどう見せ、どう動かすかを収めた設定のまとまりです。グリッドは columns 配列に入ったこれらの 定義を、左から順に描きます。最低限 field(どのデータを見せるか)と header(ヘッダーの文字)だけあればよく、 残りは必要なときだけ有効にする任意の項目です。

    单个列的设置集合——它显示什么、如何工作。表格按 columns 数组中的定义从左到右绘制。 只有 field(显示哪个数据)和 header(表头文字)是必需的,其余都按需启用。

    const col: ColumnDef = { field: 'price', header: '가격', type: 'number', format: '#,##0' };
    
    interface ColumnDef<T = any> {
        align?: "left" | "right" | "center";
        alt?: string;
        barcodeHeight?: number;
        cellStyle?:
            | Partial<Record<keyof CSSStyleDeclaration, string>>
            | ((value: any, row: T, rowIndex: number) => CSSProperties);
        children?: ColumnDef<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?: RendererType | 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

      행 데이터 타입

      Row data type

      行データの型

      行数据类型

    Index

    Properties

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

    셀 정렬.

    Cell text alignment.

    セルの文字揃え。

    单元格的文字对齐。

    alt?: string

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

    img — alt text (required for accessibility)

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

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

    barcodeHeight?: number

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

    barcode — bar height in px, default 28

    barcode — バーコードの高さ(px)、既定 28

    barcode — 条形码高度(px),默认 28

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

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

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

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

    单元格的内联样式(静态,或按值、行的函数)。

    children?: ColumnDef<T>[]

    다단 헤더용 자식 컬럼.

    Child columns for multi-level headers.

    多段ヘッダー用の子列。

    多级表头用的子列。

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

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

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

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

    允许横向合并(布尔值,或按行的函数)。

    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)

    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 同时为真时才会真正打开。

    editor?: EditorType | EditorDef

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

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

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

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

    field: string

    이 컬럼이 읽어 올 행 객체의 속성 이름(예: 행이 {price: 1000} 이면 'price'). 컬럼마다 고유.

    The row-object property this column reads (e.g. 'price' for a row {price: 1000}). Unique per column.

    この列が読み取る行オブジェクトのプロパティ名(例: 行が {price: 1000} なら 'price')。列ごとに一意。

    该列读取的行对象属性名(例如行为 {price: 1000} 时为 'price')。每列唯一。

    filterable?: boolean

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

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

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

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

    flex?: number

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

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

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

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

    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)'(负数加括号)

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

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

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

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

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

    formulaPrecision?: number

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

    Decimal precision for division inside the formula. Default 30.

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

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

    frozen?: boolean

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

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

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

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

    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' 会分成两行。

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

    헤더 정렬.

    Header text alignment.

    ヘッダーの文字揃え。

    表头的文字对齐。

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

    헤더 인라인 스타일.

    Header inline style.

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

    表头的内联样式。

    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 与否都始终换行) 表头行高会随换行后的表头自动增高。

    hidden?: boolean

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

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

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

    true 时把该列从画面隐藏(数据保留,用 showColumn 可再次显示)。

    mask?: MaskType | MaskDef

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

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

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

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

    maxWidth?: number

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

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

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

    扩展时不超过的最大宽度(px)。

    minWidth?: number

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

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

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

    收缩时不低于的最小宽度(px)。

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

    select 정적 옵션.

    Static options for select.

    select の静的オプション。

    select 的静态选项。

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

    select 동적 옵션 함수.

    Dynamic option function for select.

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

    select 的动态选项函数。

    precision?: number

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

    Decimal places to show (also applied to summing).

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

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

    renderer?: RendererType | RendererDef

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

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

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

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

    resizable?: boolean

    머리글 경계를 드래그해 폭을 조절하게 할지.

    Whether the user can drag the header edge to resize.

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

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

    rowSpan?: boolean

    세로 병합 허용.

    Allow row span.

    縦方向の結合を許可。

    允许纵向合并。

    sanitize?: boolean

    html — XSS 방지 sanitize (기본 true)

    html — XSS sanitize (default true)

    html — XSS を防ぐ sanitize(既定 true)

    html — 防 XSS 的 sanitize(默认 true)

    sortable?: boolean

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

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

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

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

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

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

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

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

    单元格的 title 提示(静态,或按值、行的函数)。

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

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

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

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

    树节点图标(静态定义,或按行的函数)。

    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' 为右对齐 + 按数值比较)。不指定时按字符串处理。

    valueMap?: Record<string, string>

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

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

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

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

    width?: number

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

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

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

    固定为该宽度(px)。指定后忽略 flex,精确保持此值。

    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 使用)