syidaxgrid
홈 가격 내 정보
SYIDAX / DATA GRID

셀과 행 편집

셀을 두 번 누르거나 키보드로 편집을 시작합니다.

시작하기
셀과 행 편집샘플 주문 데이터
120 rows
Grid를 불러오는 중입니다…

옵션

아래 항목을 바꾸면 Grid와 코드에 바로 반영됩니다.

최근 결과

수량 셀을 두 번 누르고 원하는 숫자를 입력하세요.

코드 보기
현재 미리보기

사용 가이드

#

주문 수량이나 상태를 표 안에서 직접 수정할 때 사용합니다. 열마다 숫자 입력, 목록 선택 등 알맞은 편집기를 지정할 수 있습니다.

직접 해보기

  1. 수량 편집 시작

    수량 셀을 두 번 누르고 원하는 숫자를 입력하세요.

  2. 적용 또는 취소

    Enter를 누르면 값이 반영됩니다. 다시 편집을 시작한 뒤 Escape를 누르면 그 편집을 취소할 수 있습니다.

  3. 다른 편집기 비교

    상태 셀을 편집해 진행 중·완료·검토 중 중 하나를 선택하세요. 수량 입력과 다른 방식으로 값을 고릅니다.

확인할 결과

수정한 셀과 계산 열이 갱신되고 cellValueChanged에서 이전 값과 새 값을 확인할 수 있습니다.

주문 번호와 합계는 이 예제에서 직접 편집할 수 없습니다. 편집 성공은 브라우저 데이터 변경을 뜻하며 서버 저장은 별도로 연결합니다.

알아두면 쉬운 용어

editable
셀을 사용자가 수정할 수 있는지 정하는 설정입니다.
editor
숫자 입력·선택 목록 등 편집 UI의 종류입니다.

API reference

#

나머지 속성1
Attribute / Property타입 / 기본값설명
editType		'cell' | 'fullRow'기본값 'cell'PE-ROWEDIT-WIRING-01 — AG's `editType`. Under `'fullRow'` the ROW is the transaction: opening any editor on a data row opens the session, every editor commit STAGES its cell into it (no write, no per-cell event yet), and the row commits atomically — grid-level Enter on the session's row, editing a DIFFERENT row (blur-policy commit), or `stopRowEdit('commit')`. Grid-level Escape on the session's row cancels the whole row with zero writes. Editors paint one cell at a time (the row is the transaction, not a simultaneous paint — the recorded v1 scope).
이벤트6
이벤트detail 타입설명
GridCellEditingRequestedDetailFires when editing is requested for an editable cell.
GridCellEditingCancelledDetailFires when active edit mode is cancelled.
GridCellEditingCommittedDetailFires when an active edit transaction commits.
SyGridRowValueChangedEventDetailexactly once per COMMITTED row-edit stop .
SyGridRowEditStartEventDetailADR-024 — a row session opened (interactive entry or the API).
SyGridRowEditStopEventDetailADR-024 — the session resolved (committed / cancelled / rejected), once per stop.
메서드7
메서드 / 인수반환 타입설명
rowId: GridRowId		Promise<boolean>open a full-row edit session for a DISPLAYED data row resolved by stable id. Editable columns = resolved column defs with `editable: true` (the grid's structural editability — the same gate every interactive edit path uses). Group markers, detail panels and unloaded placeholder rows carry no stable data id, so they cannot reach this API; the boundary table still guards them in-core.
reason?: 'commit' | 'cancel'		Promise<SyGridRowEditReport>stop the live row edit. `'commit'` (default) routes through the core's `'api'` commit row; `'cancel'` through the `'escape'` cancel row . A committed stop applies its writes through the single-authority route, then emits `rowValueChanged` exactly once AFTER the per-cell events . A rejected stop keeps the session open with pending intact (the recovery law).
colId: string, value: unknown		Promise<boolean>ADR-024 — stage ONE cell value into the live row session (the public half PE-ROWEDIT-01 recorded missing: start/stop existed, nothing could put writes in). Refusals are the core's own (`no-row-edit`, `column-not-editable`) and stage NOTHING. The write itself lands at the row commit through the single-authority route — staging emits no event.
Promise<EditTransaction | null>Read the active edit transaction.
Promise<boolean>Commit the active edit transaction.
Promise<boolean>Cancel the active edit transaction.
Promise< GridMountedComponentLookup< GridEditorInstance<GridData, unknown, unknown>, GridEditorParams<GridData, unknown, unknown>, HTMLElement > | null >Return the active lifecycle editor lookup, including its generation.
ColumnDef17
ColumnDef타입 / 필수 여부설명
PRO 옵션
GridCellEditorDeclaration<TData, TValue, TContext>선택Named or direct lifecycle editor. Built-in editors continue to use `editor`.
boolean선택Whether cells in this column can be edited.
PRO 옵션
'text' | 'number' | 'date' | 'select' | 'checkbox' | 'textarea' | 'autocomplete' | 'largeText'선택Built-in editor type.
GridCallback<[ValueParserParams<TData, TValue, TContext>], TValue>선택Arc review 239-242 — parse a clipboard-pasted display string into THIS column's cell value (AG `valueParser` parity). When present it fully replaces the built-in auto-detection (`detectPastedValue`); a throw falls back to the raw string. `editor: 'text'` columns skip auto-detection even without a parser (identifiers stay strings).
GridCallback< [ValueSetterParams<TData, TValue, TContext>], boolean | void >선택Optional host-owned write path. Return false to reject the edit. A true or void result accepts the mutation; the callback must apply `newValue` synchronously so transaction/event/audit/undo surfaces observe one value.
ReadonlyArray<{ value: unknown; label: string; disabled?: boolean }>선택Option list for `editor: 'select'`.
number | Date | string선택Inclusive lower bound for number/date editors.
number | Date | string선택Inclusive upper bound for number/date editors.
number선택Multiple-of-step constraint for number editors.
number선택Display formatting hint for number editors.
boolean선택When true, an empty number/date editor commits as `null`.
boolean선택이름을 선택해 타입 계약을 확인하세요.
'date' | 'iso'선택Commit shape for date editors.
number선택Initial visible rows for textarea editors.
number선택Auto-grow cap for textarea editors.
number선택Visible columns (character width) for the large-text popup editor.
number선택Max character length for the large-text popup editor. New input is capped here (ag-grid `agLargeTextCellEditor` parity, default 200); a seed value already longer is NOT truncated (no silent data loss) but warns once. Set explicitly to `0` for no limit.
GridTab 이동 Enter 열기