컬럼 정의

컬럼은 일반 객체입니다. 컬럼 ID는 id를 지정하면 그 값, 아니면 field입니다. 정렬, 필터, 컬럼 상태는 모두 이 ID로 컬럼을 가리킵니다.

컬럼은 일반 객체입니다. 컬럼 ID는 id를 지정하면 그 값, 아니면 field입니다. 정렬, 필터, 컬럼 상태는 모두 이 ID로 컬럼을 가리킵니다.

const columns = [
  { field: 'id', header: 'ID', type: 'number', format: '0', width: 80, pinned: 'left' },
  { field: 'name', header: 'Name', flex: 1, minWidth: 160 },
  { field: 'price', header: 'Price', type: 'number', format: 'currency:KRW' },
  { field: 'qty', header: 'Qty', type: 'number' },
  // computed column
  { id: 'amount', header: 'Amount', type: 'number', format: '#,##0', valueGetter: row => row.price * row.qty },
  { field: 'status', header: 'Status', filter: 'set', cellClass: p => `status-${p.value}` },
];

이름	타입	설명
`field`	`string`	이 컬럼에 표시할 행 객체의 속성 이름.
`id`	`string`	컬럼 ID. 기본값은 field이며 field가 없으면 필수.
`header`	`string`	헤더 텍스트. 기본값은 field.
`type`	`'text' \| 'number' \| 'date' \| 'boolean'`	정렬 방향, 서식, 정렬 방식, 기본 필터를 결정합니다.
`format`	`string \| Intl options`	숫자: '#,##0.00', '0.0%', 'currency:KRW', 'integer'. 날짜: 'date', 'datetime', 'time', 'short', 'medium', 'long'.
`width / minWidth / maxWidth`	`number`	픽셀 너비. 기본 너비 120, 최소 40.
`flex`	`number`	남는 너비를 비율로 나눠 가집니다. 사용자가 너비를 조절하면 고정 너비가 됩니다.
`pinned`	`'left' \| 'right'`	가로 스크롤해도 컬럼이 보이도록 고정합니다.
`hide`	`boolean`	숨긴 상태로 시작합니다. 컬럼 선택에서 다시 표시할 수 있습니다.
`align`	`'left' \| 'center' \| 'right'`	셀 정렬. 숫자는 기본 오른쪽 정렬.
`sortable`	`boolean`	기본값 true.
`resizable`	`boolean`	기본값 true.
`filter`	`'text' \| 'number' \| 'date' \| 'set' \| false`	컬럼 메뉴의 필터 종류. 기본값은 type에 따라 정해집니다.
`comparator`	`(a, b, rowA, rowB) => number`	사용자 정의 정렬 순서.
`valueGetter`	`(row) => unknown`	계산된 값(예: 수량×단가). 표시, 정렬, 필터, 요약에 모두 쓰입니다.
`renderer`	`(params) => string \| HTMLElement`	셀 내용을 직접 그립니다. 문자열은 HTML로 삽입되니 외부 데이터는 이스케이프하세요.
`cellClass`	`string \| (params) => string`	셀에 추가할 CSS 클래스. 글자색·배경색·굵게는 엑셀 내보내기에도 반영됩니다.
`wrapText`	`boolean`	긴 글을 여러 줄로 감쌉니다. autoRowHeight와 함께 쓰면 행 높이가 늘어납니다.
`rowSpan / colSpan`	`({ value, row, rowIndex }) => number`	셀마다 여러 행·열을 차지하게 합니다. rowSpan이 merge보다 우선합니다.
`headerRenderer`	`({ header, column }) => string \| HTMLElement`	헤더 내용을 직접 그립니다(아이콘, 버튼, 링크). 정렬과 메뉴 버튼은 그대로 동작합니다.
`headerClass`	`string \| (column) => string`	헤더 셀에 붙일 CSS 클래스(컬럼 그룹에도 적용).
`copyable`	`boolean \| ({ value, row, column }) => boolean`	false면 복사에서 값을 뺍니다. 막힌 셀은 빈 칸으로 복사됩니다.
`tooltip / headerTooltip`	`boolean \| (params) => string / string`	마우스를 올렸을 때 보일 글. true면 값, 함수면 돌려준 글. headerTooltip은 헤더 설명. 잘린 글자는 따로 지정하지 않아도 전체가 보입니다(overflowTooltip).
`columnGroupShow / openByDefault`	`'open' \| 'closed' / boolean`	접히는 컬럼 그룹: 그룹이 펼쳐졌을 때만(open) 또는 접혔을 때만(closed) 보이는 하위 컬럼. 그룹 헤더에 펼침 버튼이 생깁니다.
`sparkline`	`true \| { type?: 'line' \| 'bar' \| 'area', color? }`	값(숫자 배열)을 셀 안의 작은 차트로 그립니다.
`children`	`ColumnDef[]`	지정하면 컬럼 그룹(다단 헤더)이 됩니다.
`merge`	`boolean \| (a, b, rowA, rowB) => boolean`	같은 값이 연속되면 한 칸으로 합칩니다.
`wrapHeaderText`	`boolean`	긴 헤더를 줄바꿈합니다.
`aggFunc`	`'sum' \| 'avg' \| 'min' \| 'max' \| 'count' \| (values, rows) => value`	그룹 행에 표시할 집계.
`chooser`	`boolean`	false면 컬럼 선택 목록에서 제외합니다.
`lockVisible`	`boolean`	사용자가 이 컬럼을 숨길 수 없습니다.
`editable`	`boolean \| ({ value, row, rowIndex, column }) => boolean`	편집과 붙여넣기를 허용합니다(field 필요). 함수로 셀마다 정할 수 있습니다.
`editor`	`{ type: 'select', options } \| { type: 'textarea' \| 'time' \| 'datetime' } \| (params) => editor`	편집기. options를 행에 따라 바뀌는 함수로 주면 종속 선택이 됩니다. disabled: true인 옵션은 고르거나 붙여넣을 수 없습니다. format이 'datetime'인 날짜 컬럼은 'datetime' 편집기가 기본입니다.
`required`	`boolean`	빈 값을 거부합니다.
`validate`	`(value, row) => true \| string`	메시지를 돌려주면 값을 거부합니다.
`unique`	`boolean`	다른 행에 이미 있는 값을 거부합니다(빈 값은 허용).
`formulas`	`boolean`	셀에 '=qtyprice' 같은 수식을 쓸 수 있습니다(같은 행의 필드, + - / % ^ &, ROUND, ABS, MIN, MAX, SUM, AVG, IF). 결과가 표시·정렬·내보내기에 쓰이고, 편집기에는 수식이 남습니다.