> 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/api-reference/components/datagrid.md).

# DataGrid

데이터 그리드에 사용되는 API 문서입니다.

## Import

```tsx
import { DataGrid } from "@noraent/nora-datagrid";
```

## Props

#### **columns &#x20;**<mark style="color:green;">**필수**</mark>

DataGrid를 구성하는 기본 소모품 구조 입니다. [DataGridColumns](/nora/api-reference/interfaces/datagridbasicpropsmodel.md)\[]

**Type**:  `Array<Object>`

***

#### **dataSource&#x20;**<mark style="color:green;">**필수**</mark>

DataGrid를 구성하는 기본 소모품 구조 입니다. [DataGridDataSource](/nora/api-reference/interfaces/datagridbasicpropsmodel.md)\[]

**Type**:  `Array<Object>`

***

#### **gridRef**

DataGrid를 컨트롤할 수 있는 참조 객체 입니다. `useGridApiRef()`

**Type**:  `{ current?:object }`&#x20;

***

#### **initialState**

DataGrid 가 생성될때 초기 상태를 지정합니다.&#x20;

**Type**:  `Object`

<p align="right"><a href="/nora/documentation/main-features/sorting.md#undefined-2"><strong>🔗 예제 바로가기</strong></a></p>

***

#### **sortingMode**

정렬을 클라이언트 측에서 처리할지 서버 측에서 처리할지 결정합니다. 기본은 client이고 server정렬시 클라이언트에서 정렬만 하지 않습니다.

**Type**:  `Array<Object>`

**Default**: `client`

***

#### **loading**

&#x20;그리드 로딩 상태로 표시합니다.

**Type**:  `boolean`

**Default**: `false`

***

#### **processRowUpdate**

사용자가 편집을 중지 하는 작업을 수행하면 콜백 processRowUpdate()이 트리거됩니다. 이 콜백을 사용하여 새 값을 서버로 전송하고 데이터베이스나 다른 저장 장치에 저장합니다. 콜백은 세 개의 인수와 함께 호출됩니다.&#x20;

**Type**:  `func`

***

#### **onSortModelChange**

그리드의 정렬 모델이 변경될 때 호출되는 콜백 함수입니다. [GridSortModel](/nora/api-reference/interfaces/gridsortmodel.md)

**Type**:  `func`

<p align="right"><a href="/nora/documentation/main-features/sorting.md#undefined-4"><strong>🔗 예제 바로가기</strong></a></p>

***

#### **onSelectionRowClick**

row 선택시 호출되는 콜백 함수입니다. [DataGridRow](/nora/api-reference/interfaces/datagridrow.md)

**Type**:  `func`

<p align="right"><a href="/nora/documentation/main-features/columns/row-event.md#onselectionrowclick"><strong>🔗 예제 바로가기</strong></a></p>

***

#### checkboxSelection

체크박스 표시 할지 여부를 설정합니다.

**Type**:  `boolean`

**Default**: `true`

***

#### selectionMode

체크박스 표시 할지 여부를 설정합니다.

**Type**:  `"multiple"|"single"`&#x20;

**Default**: `single`

***

#### style

CSS 스타일을 정의할 수 있는 속성입니다.

**Type**:  `Array<func | object | bool> | func | object`

***

#### onCellClick

Cell 선택시 선택한 호출되는 콜백 함수 입니다. CellFocusedType

**Type**:  `object`

***

#### onSelectionRowChangeBefore

onSelectionRowChange가 호출되기 직전에 실행되는 콜백 함수입니다. 행 선택이 실제로 변경되기 전에 검증이나 사전 처리가 필요한 경우에 사용됩니다.

**Type**:  `func`

<p align="right"><a href="/nora/documentation/main-features/columns/row-event.md#onselectionrowchangebefore"><strong>🔗 예제 바로가기</strong></a></p>

***

준비중.