그리드 옵션
createGrid의 모든 옵션: 데이터, 행 ID, 선택, 편집, 페이지, 요약 행, 실시간 업데이트, 조건부 서식, AI 어시스턴트, 테마, 글꼴, 언어.
| 이름 | 타입 | 설명 |
|---|---|---|
columns | ColumnDef[] | 필수. 컬럼 정의. |
data | object[] | 행 데이터. |
getRowId | (row) => string | 고유 ID. setData 후에도 선택을 유지합니다. |
rowSelection | 'single' | 'multiple' | 체크박스 컬럼과 클릭 선택을 켭니다. |
rowHeight / headerHeight | number | 픽셀. 기본값은 글꼴 크기에 맞춰집니다(13px일 때 36 / 40). |
theme | string | 'light', 'dark', 'board', 'erp', 'excel', 'classic' 또는 직접 만든 테마. |
fontSize / fontFamily | number / string | 그리드 글꼴. 행 높이가 크기에 맞춰집니다. |
locale | string | LocalePack | UI 언어. 'ko' 또는 import한 언어팩. 기본값은 브라우저 언어. |
sideBar | boolean | { open } | 오른쪽에 컬럼 패널을 붙입니다. |
summary | SummaryOptions | 요약 행. 요약 행 절 참고. |
rangeSelection | boolean | 드래그, Shift+클릭, Shift+방향키, Ctrl+A로 엑셀처럼 셀 범위 선택. 기본 true. |
statusBar | boolean | 행 수와 선택 셀의 개수·합계·평균·최소·최대를 표시합니다. |
fillHandle | boolean | 선택 영역 모서리를 끌어 편집 가능한 셀을 채웁니다. 기본 true. |
pinnedTopRows / pinnedBottomRows | Row[] | 스크롤과 상관없이 위/아래에 고정되는 행. |
findBar / wrapHeaderText | boolean | Ctrl+F 찾기 창(기본 true), 모든 헤더 줄바꿈. |
groupBy | string[] | 이 컬럼 ID 순서대로 행을 묶습니다. |
groupDefaultExpanded | number | 처음에 펼칠 단계 수: 0 없음(기본), n단계, -1 전부. 트리 데이터에도 적용됩니다. |
groupPanel | boolean | 헤더 위에 막대를 두어 열 머리글을 끌어와 묶을 수 있게 합니다. |
treeData | { getParentId(row), setParentId?, hasChildren?, loadChildren? } | 부모 ID 아래로 행을 중첩합니다(getRowId 필요). setParentId를 주면 행을 다른 부모로 끌어 옮길 수 있고, hasChildren과 loadChildren을 주면 처음 펼칠 때 서버에서 자식을 불러옵니다. |
detailRenderer / detailHeight / isRowMaster | (params) => Element | string / number / (row) => boolean | 행 아래에 펼쳐지는 패널(기본 높이 240)과 펼칠 수 있는 행 조건. |
rowDrag | boolean | { group?, canDrop? } | 행을 끌어 순서를 바꾸는 손잡이 컬럼(정렬·필터·그룹 중에는 꺼짐). 트리에서는 행 가운데에 놓으면 그 행의 자식이 됩니다. group이 같은 그리드끼리 행을 주고받고, canDrop({ row, target, position, fromOtherGrid })으로 놓을 곳을 막을 수 있습니다. |
pagination | boolean | { pageSize?, pageSizes? } | 한 쪽씩 보여 주고 아래에 쪽 이동 막대를 둡니다(기본 100행). |
datasource | { getRows({ start, end, sort, filters, quickFilter, advancedFilter, groupBy, groupKeys }) } | 서버에서 행을 블록 단위로 불러옵니다. { rows, total? }을 돌려줘야 합니다. groupBy가 있으면 그룹 단계에서는 그룹마다 한 행(예: { status, count, qty })을 돌려줍니다. |
blockSize / maxBlocks | number | 요청당 행 수(100)와 메모리에 둘 블록 수(100). |
sideBar | boolean | { open?, panels?: ('columns' | 'filters')[] } | 컬럼·필터 패널을 옆에 붙입니다. |
pivot | { rows, columns?, values: { colId, aggFunc? }[], totals? } | 데이터를 피벗 테이블로 보여 줍니다. pivotPanel: true면 피벗 패널을 추가합니다. |
autoRowHeight | boolean | 줄바꿈된 셀(wrapText 컬럼)에 맞춰 행 높이를 늘립니다. rowHeight가 최소 높이입니다. |
direction | 'ltr' | 'rtl' | 'rtl'이면 오른쪽에서 왼쪽으로 배치합니다(아랍어, 히브리어). 첫 컬럼이 오른쪽에 옵니다. |
cardView | boolean | number | 그리드 폭이 이 값(px)보다 좁으면 행을 카드로 보여 줍니다(true = 640). 휴대폰에서는 포커스된 셀을 한 번 더 누르면 편집, 길게 누르면 메뉴가 열립니다. |
isRowSelectable / headerCheckbox | (row) => boolean / boolean | 체크할 수 있는 행을 정합니다(나머지는 비활성 체크박스). headerCheckbox: false면 전체 선택 상자를 숨깁니다. |
rowNumbers | boolean | { width?, header? } | 데이터 행에 1, 2, 3… 번호를 매기는 고정 컬럼(페이지가 바뀌어도 이어짐). 번호를 누르면 그 행이 범위로 선택됩니다. |
filterRow | boolean | 헤더 아래 입력칸으로 바로 필터: 글자는 포함, 숫자는 >10, <=5, 10~20, 날짜는 >2026-01-01, 값 목록 컬럼은 선택 상자. |
groupSelectsChildren | boolean | 트리에서 부모를 체크하면 자식도 함께 체크됩니다. 그룹 행에는 항상 그룹 전체 체크박스가 있습니다. |
editType | 'cell' | 'row' | 'row'면 행 단위로 편집합니다. Tab은 같은 행 안에서 이동하고, Enter나 다른 행으로 이동하면 저장, Esc는 행 전체를 되돌립니다(rowEditStart / rowEditStop). |
getRowHeight | (row) => number | undefined | 행마다 높이를 정합니다(autoRowHeight와 함께면 최소 높이). |
autoHeight | boolean | 그리드가 행 수만큼 늘어나고 페이지와 함께 스크롤됩니다(수백 행 이하에 적합). |
density | 'compact' | 'normal' | 'comfortable' | 행 간격. rowHeight를 직접 주면 그 값이 우선합니다. setDensity로 바꿀 수 있습니다. |
flashCells | boolean | applyTransaction으로 바뀐 셀을 잠깐 깜빡입니다(기본 true). |
flashDuration / asyncTransactionWait | number | 바뀐 셀이 깜빡이는 시간(ms, 기본 1000, 숫자는 오르면 초록·내리면 빨강)과 applyTransactionAsync가 변경을 모으는 시간(ms, 기본 50). |
conditionalFormats | ConditionalFormat[] | 값·수식·상위/하위·평균·중복으로 셀 색을 바꾸는 규칙과 데이터 막대·색조·아이콘 집합. conditionalFormatMenu: false면 컬럼 메뉴 항목을 숨깁니다. |
assistant | { url, headers?, sampleRows?, context?, suggestions? } | AI 어시스턴트: 요청은 우리 서버로 가고, 서버는 그리드 동작으로 답합니다. |
noRowsOverlay / loadingOverlay | string | ({ filtered }) => string | HTMLElement | 행이 없을 때(filtered: 필터 때문에 모두 숨겨짐)와 서버 데이터를 불러올 때 보일 내용. |
overflowTooltip / advancedFilter | boolean | false면 잘린 글자 툴팁 / 우클릭 메뉴의 "고급 필터…"를 끕니다. |
keymap | Record<string, action | false> | 키 재지정/비활성화. 예: { Enter: false, 'Ctrl+E': 'edit' }. |
contextMenu | false | (params) => items | false면 브라우저 기본 메뉴, 함수로 우클릭 메뉴를 바꿉니다. |