> 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/main-features/cells.md).

# 셀

### renderCell

renderCell() 함수는 셀의 일반(보기) 상태에서 렌더링할 내용을 정의합니다. 이 함수를 사용하면 셀 내부에 React 컴포넌트를 렌더링할 수 있으며, 클릭 이벤트 등 셀의 동작을 자유롭게 커스터마이징할 수 있습니다.

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

```tsx
import { DataGridColDef, GridCellPrams } from "@noraent/nora-datagrid";

export const columns: DataGridColDef = [
  {
    fieldId: 'name',
    fieldName: '이름',
    width: 130,
    renderCell: (params: GridCellPrams) => {
      return <button>params.value</button>
    }
  },
];
```

{% endtab %}
{% endtabs %}

### renderEditCell

renderEditCell() 함수는 셀이 편집 모드일 때 렌더링할 컴포넌트를 정의합니다.\
입력 필드, 드롭다운 등 사용자 입력을 받을 수 있는 컴포넌트를 지정하여 셀의 편집 방식을 제어할 수 있습니다.

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

```tsx
import { DataGridColDef, GridCellPrams } from "@noraent/nora-datagrid";

export const columns: DataGridColDef = [
  {
    fieldId: 'name',
    fieldName: '이름',
    width: 130,
    renderEditCell: (params: GridCellPrams) => {
      return <button>params.value</button>
    }
  },
];
```

{% endtab %}
{% endtabs %}

#### API

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