OPEN_GRID API - v1.3.1
    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.

    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)

    barcodeHeight?: number

    barcode — 바코드 높이(px), 기본 28 / barcode — bar height in px, default 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)

    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.

    editor?: EditorType | EditorDef

    편집기 종류. 내장 편집기 이름 한 줄로 주거나, 선택지·최소/최대 등이 필요하면 EditorDef 객체로 줍니다. / The editor — a built-in editor name, or an EditorDef object for choices/min/max, etc.

    field: string

    이 컬럼이 읽어 올 행 객체의 속성 이름(예: 행이 {price: 1000} 이면 'price'). 컬럼마다 고유. / The row-object property this column reads (e.g. 'price' for a row {price: 1000}). Unique per column.

    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).

    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).

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

    이 컬럼 값을 다른 컬럼으로 자동 계산. 함수식 또는 '[field]' 를 쓰는 문자열식. / Auto-compute this column from others — a function, or a string using '[field]' refs.

    formulaPrecision?: number

    수식 나눗셈의 소수점 자리수. 기본 30. / Decimal precision for division inside the formula. Default 30.

    frozen?: boolean

    true 면 가로 스크롤과 무관하게 왼쪽에 붙박아 둡니다(핵심 식별 컬럼 고정용). / true pins the column to the left regardless of horizontal scroll (for key identifier columns).

    group?: string

    radio — 같은 group 내 단일 선택 / radio — single choice within the same group

    header: string

    머리글에 보일 글자. 문자열 안의 '\n' 은 두 줄로 나뉩니다. / The caption shown in the header. A '\n' inside splits into two lines.

    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.

    hidden?: boolean

    true 면 이 컬럼을 화면에서 감춥니다(데이터는 남고 showColumn 으로 다시 보임). / true hides the column (data stays; showColumn brings it back).

    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.

    minWidth?: number

    줄어들 때 넘지 않을 최소 폭(px). / Lower bound (px) the column won't shrink past.

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

    select 정적 옵션. / Static options for select.

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

    select 동적 옵션 함수. / Dynamic option function for 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.

    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)

    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).

    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.

    valueMap?: Record<string, string>

    저장된 코드값을 사람이 읽는 말로 바꿔 보여줄 때(예: { 'M': '남', 'F': '여' }). / Show human-readable text for stored codes (e.g. { 'M':'Male', 'F':'Female' }).

    width?: number

    이 폭(px)으로 고정. 지정하면 flex 를 무시하고 정확히 이 값이 됩니다. / Pin this width (px). When set it overrides flex and stays exactly this.

    wrap?: boolean

    셀 줄바꿈: true 면 nowrap+ellipsis 대신 여러 줄로 표시(rowHeight 확대와 함께 사용) / Cell wrapping: true renders multiple lines instead of nowrap+ellipsis (use with a larger rowHeight)