SYIDAX / DATA GRID
검색 가능한 선택 편집기 PRO
많은 선택지에서 검색과 선택으로 셀 값을 입력합니다.
검색 가능한 선택 편집기샘플 주문 데이터
120 rowsGrid를 불러오는 중입니다…
최근 결과
사용자에게 보일 제품 이름과 실제 저장할 제품 코드를 정하세요. 이름과 코드는 서로 다를 수 있습니다.
코드 보기
현재 미리보기
코드에 포함된 샘플 데이터 · 6행
사용 가이드
#상품 코드처럼 선택지가 많아서 단순한 드롭다운을 훑어보기 어려울 때 사용합니다. 검색으로 후보를 좁힌 뒤 올바른 값을 고릅니다.
앱에서 연결하는 순서
- 선택지와 저장값 준비
사용자에게 보일 제품 이름과 실제 저장할 제품 코드를 정하세요. 이름과 코드는 서로 다를 수 있습니다.
- 편집기 연결
앱의 대상 열에 Rich Select 편집기와 선택지 목록을 연결합니다. 관련 ColumnDef API에서 편집기 선언 형식을 확인하세요.
- 검색·선택·취소 확인
앱에서 셀을 편집하고 이름 일부를 검색해 값을 고르세요. Enter로 확정하거나 Escape로 취소했을 때 저장값을 확인합니다.
확인할 결과
많은 후보 중 검색한 값을 선택하고 그 값이 셀 데이터에 반영됩니다.
현재 표의 상태 셀은 일반 select 편집기입니다. 검색 가능한 Rich Select 예제로 오해하지 않도록 구분하세요. Rich Select는 Pro 기능입니다.
알아두면 쉬운 용어
- 선택지 label / value
- 사용자에게 보이는 이름과 실제 저장할 값입니다.
- cellEditor
- 열의 셀 편집 UI를 지정하는 설정입니다.
제품에 이 기능을 적용하려면 Pro 런타임과 유효한 라이선스가 필요합니다.
API reference
#ColumnDef2
| ColumnDef | 타입 / 필수 여부 | 설명 |
|---|---|---|
PRO 옵션 | GridCellEditorDeclaration<TData, TValue, TContext>선택 | Named or direct lifecycle editor. Built-in editors continue to use `editor`. |
PRO 옵션 | 'text' | 'number' | 'date' | 'select' | 'checkbox' | 'textarea' | 'autocomplete' | 'largeText'선택 | Built-in editor type. |
EXPLORE CAPABILITIES
기능별로 자세히 살펴보기
기능별 사용 상황과 설정 방법을 살펴보세요. 직접 체험하는 예제와 앱에서 연결하는 기능을 각 가이드에 안내합니다.