SYIDAX / DATA GRID
CSV 가져오기
구분된 텍스트를 행과 열로 변환합니다.
CSV 가져오기샘플 주문 데이터
120 rowsGrid를 불러오는 중입니다…
옵션
아래 항목을 바꾸면 Grid와 코드에 바로 반영됩니다.
최근 결과
제품과 수량 열이 있는 작은 CSV 파일로 시작하세요. 예를 들어 첫 줄은 product,quantity이고 다음 줄은 Atlas Sensor,25입니다.
코드 보기
현재 미리보기
코드에 포함된 샘플 데이터 · 6행
사용 가이드
#스프레드시트에서 내보낸 CSV 파일을 표로 가져와 확인할 때 사용합니다. 첫 줄의 이름을 열 제목으로 사용할 수 있습니다.
직접 해보기
- 간단한 CSV 준비
제품과 수량 열이 있는 작은 CSV 파일로 시작하세요. 예를 들어 첫 줄은 product,quantity이고 다음 줄은 Atlas Sensor,25입니다.
- Grid의 가져오기 사용
이 예제에서 켜진 CSV 가져오기 도구로 파일을 선택하세요. 파일 내용에 맞는 열과 행으로 표가 바뀝니다.
- 행·열과 값 확인
헤더와 행 수, 숫자·빈칸이 의도대로 읽혔는지 확인하세요. 샘플 주문으로 돌아가려면 초기화를 누릅니다.
확인할 결과
파일의 내용을 새 열과 행 데이터로 확인할 수 있습니다.
가져오기는 현재 표 데이터를 교체합니다. 이 예제의 공통 옵션은 주문 열 구성을 기준으로 하므로 가져온 후 옵션을 바꾸면 주문 열 정의가 다시 적용될 수 있습니다.
알아두면 쉬운 용어
- CSV
- 각 열을 쉼표로 구분한 텍스트 파일입니다.
- hasHeader
- 첫 행을 데이터 대신 열 이름으로 사용할지 정하는 옵션입니다.
핵심 API 예시
등록된 Grid 요소를 grid로 참조하는 앱 코드입니다.
const result = await grid.importCsvText('product,quantity\nAtlas Sensor,25', {hasHeader:true});
console.log(result);API reference
#나머지 속성1
| Attribute / Property | 타입 / 기본값 | 설명 |
|---|---|---|
| csvImport | boolean기본값 false | show the "Import CSV" toolbar affordance + mapping wizard. |
이벤트1
| 이벤트 | detail 타입 | 설명 |
|---|---|---|
{ rowCount: number; columnCount: number } | fires after a CSV import loads new columns + rows. |
메서드1
| 메서드 / 인수 | 반환 타입 | 설명 |
|---|---|---|
| text: string, options?: { delimiter?: CsvDelimiter; hasHeader?: boolean } | Promise<{ rowCount: number; columnCount: number }> | parse CSV text and load it into the grid (replaces `columnDefs` + `rowData`). Returns the parsed shape; fires `csvImported`. |
EXPLORE CAPABILITIES
기능별로 자세히 살펴보기
기능별 사용 상황과 설정 방법을 살펴보세요. 직접 체험하는 예제와 앱에서 연결하는 기능을 각 가이드에 안내합니다.