> For the complete documentation index, see [llms.txt](https://noraent.gitbook.io/nora/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://noraent.gitbook.io/nora/documentation/getting-started/quickstart.md).

# 빠른시작

설치 부터 실제 사용 방법에 대한 간단한 예제 입니다.

### 설치

버전에 맞는 패키지를 설치합니다.

```sh
pnpm add @noraent/nora-datagrid @emotion/react @emotion/styled
```

### 행 정의

데이터 그리드의 각 행은 열과 값에 각각 대응하는 키-값 쌍을 가진 객체입니다.

```typescript
export const columns: DataGridColDef = [
  {
    fieldId: 'name',
    fieldName: '이름',
    width: 130,
  },
  {
    fieldId: 'phoneNumber',
    fieldName: '전화번호',
    width: 130,
  },
  {
    fieldId: 'country',
    fieldName: '국가',
    width: 130,
  },
];
```

### 열 정의

데이터 그리드 열을 정의합니다.

```typescript
export const dataSource = [
  {
    name: "홍길동",
    phoneNumber: "010-****-1234",
    country: "KR",
  },
  {
    name: "로운",
    phoneNumber: "010-****-3456",
    country: "KR",
  }
]
```

### 그리드 정의 

그리드를 정의합니다

```tsx
<DataGrid
  columns={columns}
  dataSource={dataSource}
  readOnly
/>
```

#### API

[DataGrid](/nora/api-reference/components/datagrid.md)