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

# 편집

데이터 그리드에는 셀 및 행 편집할 수 있습니다.

### 기본 편집

{% hint style="warning" %}
현재 columns에 editable:true가 되어있어야 편집이 활성화 됩니다.  ***(향후 default: true 에정)***
{% endhint %}

~~편집 기능은 데이터 그리드 사용자에게 기본적으로 활성화되어 있으며, 별도의 설정 없이 바로 사용할 수 있습니다.~~

{% embed url="<https://stackblitz.com/edit/vitejs-vite-ghxiqkca?file=src/App.tsx>" %}

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

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

{% endtab %}
{% endtabs %}

### processRowUpdate 콜백 함수

사용자가 편집을 중지 하는 작업을 수행하면 콜백 processRowUpdate()이 트리거됩니다.\
새 값을 서로 전송하고 데이터 베이스나 다른 저장 장치에 저장할때 사용합니다. (react-hook-form)등

{% 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: 400, width: '100%' }}>
      <DataGrid
        checkboxSelection={false}
        gridRef={gridRef}
        columns={columns}
        dataSource={dataSource}
        processRowUpdate={(newRow, oldRow)=>{
          return new Promise((resolve, _reject) => {
            resolve(newRow);
          });
        }}
      />
    </div>
  );
}

export default App;
```

{% endtab %}

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

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

{% endtab %}

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

```tsx
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 %}

### setEditCellValue

DataGrid의 셀 편집(Edit Mode) 상태에서 값을 업데이트하기 위해 사용하는 사용자 정의 함수입니다.

기본적으로 DataGrid는 내부적으로 processRowUpdate 등의 콜백을 통해 값이 반영되지만, 커스텀 에디터를 사용할 경우 직접 셀 값을 업데이트하는 로직이 필요합니다.

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

```javascript
const RenderEditCell = (params: GridCellPrams) => {
  return (
  <Select
    value={params.value}
    inputRef={params.ref}
    onChange={(e) => {
      params.gridRef?.current.setEditCellValue({ 
        id: params.rowRef.current.id, 
        fieldId: "currency", 
        value: e.target.value
      });
    }}
    autoFocus
    fullWidth
    size="small"
    displayEmpty
  >
    <MenuItem key="item-1" value="item-1">
      item1
    </MenuItem>
  </Select>
  )
}
```

{% endtab %}

{% tab title="Python" %}

```python
message = "hello world"
print(message)
```

{% endtab %}

{% tab title="Ruby" %}

```ruby
message = "hello world"
puts message
```

{% endtab %}
{% endtabs %}

### 보완 설명

{% hint style="info" %}

#### **processRowUpdate, setEditCellValue** 차이&#x20;

processRowUpdate는 편집이 끝났을 때 최종 데이터를 저장하는 데 쓰이고,&#x20;

setEditCellValue는 편집 도중 커스텀 셀 내부에서 값이 바로 그리드에 반영되도록 할 때 사용합니다
{% endhint %}

#### API

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