SYIDAX / DATA GRID

셀 표현 바꾸기

기본 텍스트 대신 상태, 버튼, 사용자 컴포넌트를 표시합니다.

셀 표현 바꾸기샘플 주문 데이터

120 rows

Grid를 불러오는 중입니다…

최근 결과

숫자에 쉼표를 붙이는 정도라면 valueFormatter를 사용하세요. 클릭 버튼이나 여러 요소가 필요하면 셀 렌더러를 선택합니다.

코드 보기

현재 미리보기

사용 가이드

완료 상태를 배지로 보여 주거나 셀에 상세 보기 버튼을 넣는 등, 기본 글자 이상의 표현이 필요할 때 사용합니다.

문자열로 충분한지 판단
숫자에 쉼표를 붙이는 정도라면 valueFormatter를 사용하세요. 클릭 버튼이나 여러 요소가 필요하면 셀 렌더러를 선택합니다.
렌더러 연결
앱의 대상 열에 cellRenderer를 연결해 전달받은 행 데이터로 UI를 만드세요. 외부 데이터는 안전한 텍스트로 표시합니다.
갱신과 재사용 확인
스크롤·정렬·데이터 변경 후에도 올바른 행이 보이는지 확인하세요. 셀이 사라질 때 이벤트 구독 등 렌더러가 만든 자원도 정리합니다.

확인할 결과

앱의 셀에서 상태 배지나 버튼 등 업무에 맞는 표현을 사용할 수 있습니다.

위 표의 기본 셀은 문자열과 숫자를 표시합니다. 사용자 정의 버튼 렌더러가 연결된 예제는 아닙니다.

나머지 속성2

Attribute / Property	타입 / 기본값	설명
	`GridComponentLocalDefinitions< GridData, unknown, unknown, unknown >`기본값 undefined	Per-grid named lifecycle components. Direct column definitions win, followed by this map, grid-local registrations, then global registrations.
componentTimeoutMs	`number`기본값 5_000	Per-step timeout for optional renderer/editor/filter lifecycle work.

이벤트1

이벤트	detail 타입	설명
	`GridComponentErrorDetails`	Typed lifecycle lookup/create/refresh/model/focus/destroy failure.

메서드10

메서드 / 인수	반환 타입	설명
name: string, renderer: CellRenderer	`Promise<boolean>`	Register a custom cell renderer by name.
	`Promise<ReadonlyArray<string>>`	List registered cell-renderer names.
name: string	`Promise<boolean>`	Unregister a host-registered renderer by name.
scope: GridComponentRegistrationScope, kind: TKind, name: string, definition: GridComponentDefinitionFor< TKind, GridData, unknown, unknown, unknown >	`Promise<void>`	Register a named lifecycle component in this grid or application scope.
scope: GridComponentRegistrationScope, kind: TKind, name: string, definition: GridComponentDefinitionFor< TKind, GridData, unknown, unknown, unknown >	`Promise<void>`	Atomically replace a named lifecycle component definition.
scope: GridComponentRegistrationScope, kind: GridComponentKind, name: string	`Promise<boolean>`	Remove one named lifecycle component.
scope: GridComponentRegistrationScope, kind: GridComponentKind	`Promise<ReadonlyArray<string>>`	List lifecycle component names in deterministic registration order.
rowId: GridRowId, colId: string	`Promise<GridRendererDiscovery<GridData, unknown, unknown>>`	Return the currently mounted lifecycle renderer for one logical cell.
rowId: GridRowId, colId: string	`Promise<boolean>`	Destroy one mounted lifecycle renderer without affecting pure renderers.
rowId: GridRowId, colId: string, direction: 'in' \| 'out'	`Promise<boolean>`	Invoke the optional focus hook on one mounted lifecycle renderer.

ColumnDef5

ColumnDef	타입 / 필수 여부	설명
	`\| string \| CellRenderer<TData, TValue> \| GridRendererDefinition<TData, TValue, TContext>`선택	Custom renderer name or inline renderer. Omitted columns render as text.
	`Record<string, unknown>`선택	Opaque options passed to the cell renderer.
	`\| string \| string[] \| GridCallback<[CellCallbackParams<TData, TValue, TContext>], string>`선택	Always-applied cell class. Accepts a class string, class array, or callback returning classes.
	`Record< string, GridCallback<[CellCallbackParams<TData, TValue, TContext>], boolean> \| string >`선택	Conditional classes keyed by class name. Values are predicates or expressions.
	`\| Record<string, string \| number> \| GridCallback< [CellCallbackParams<TData, TValue, TContext>], Record<string, string \| number> \| null \| undefined > \| ReadonlyArray< \| Record<string, string \| number> \| GridCallback< [CellCallbackParams<TData, TValue, TContext>], Record<string, string \| number> \| null \| undefined > >`선택	Inline cell style object, callback, or merged array of either form.