> 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/readme.md).

# 개요

Nora Grid는 대규모 데이터를 효율적으로 시각화하고 관리할 수 있는 React 기반 데이터 그리드 컴포넌트입니다. 가벼운 구조와 유연한 API를 제공하여 다양한 업무 시스템에 쉽게 통합할 수 있으며, 복잡한 사용자 요구사항을 간결하게 구현할 수 있는 높은 확장성과 성능을 갖추고 있습니다.

React Hook Form과 Zod와 함께 사용할 수 있습니다., 입력 폼 검증이나 편집 기능을 손쉽게 결합하여 데이터 바인딩과 유효성 검사를 더욱 안전하고 일관성 있게 관리할 수 있습니다.

### 그리드 예시

{% embed url="<https://stackblitz.com/edit/vitejs-vite-odqwh5qd?embed=1&file=src%2FApp.tsx&hideExplorer=1&hideNavigation=1&theme=light&view=preview>" %}

{% tabs %}
{% tab title="Typescript" %}

```tsx
import { DataGrid, useGridApiRef } from '@noraent/nora-datagrid';
import { columns, dataSource } from './constants';

function App() {
  const gridRef = useGridApiRef();
  return (
    <div style={{ height: 500, width: '100%' }}>
      <DataGrid
        checkboxSelection={false}
        readOnly
        gridRef={gridRef}
        columns={columns}
        dataSource={dataSource}
      />
    </div>
  );
}
```

{% endtab %}

{% tab title="dataSource.ts" %}

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

{% endtab %}

{% tab title="columns.ts" %}

```typescript
export const columns: DataGridColDef = [
  {
    fieldId: 'name',
    fieldName: '이름',
    width: 130,
  },
  {
    fieldId: 'phoneNumber',
    fieldName: '전화번호',
    renderHeader: (params: GridHeaderPrams) => {
      return params.fieldName;
    },
    width: 130,
  },
  {
    fieldId: 'country',
    fieldName: '국가',
    width: 130,
  },
];

```

{% endtab %}
{% endtabs %}