# Editing Data

Editing data is handled via callbacks. Taking the getting started example as a starting point, the `getContent` callback can be modified to allow editing.

```typescript
const getCellContent = React.useCallback((cell: Item): GridCell => {
    const [col, row] = cell;
    const dataRow = data[row];
    const indexes: (keyof DummyItem)[] = ["name", "company", "email", "phone"];
    const d = dataRow[indexes[col]];
    return {
        kind: GridCellKind.Text,
        allowOverlay: true,
        readonly: false,
        displayData: d,
        data: d,
    };
}, []);
```

> 💡 Where your data comes from does not matter. The `getCellContent` callback is a data fetcher. This is a fundamental difference from other libraries that expect you to pass data in a format they expect.

`allowOverlay` has been set to true. This allows the overlay to come up. For explanatory purposes the `readonly` field is being set to false. This is the default value, setting it to true would allow the overlay to come up but not allow editing.

Implementing the `onCellEdited` callback allows responding to cell edit events. Edit events pass back a mutated version of the original `GridCell` returned from `getContent`.

```typescript
const onCellEdited = React.useCallback((cell: Item, newValue: EditableGridCell) => {
    if (newValue.kind !== GridCellKind.Text) {
        // we only have text cells, might as well just die here.
        return;
    }

    const indexes: (keyof DummyItem)[] = ["name", "company", "email", "phone"];
    const [col, row] = cell;
    const key = indexes[col];
    data[row][key] = newValue.data;
}, []);
```

<figure><img src="https://369991932-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrmElrOZEiFLa3h8PYkIu%2Fuploads%2FsAeRrybwlIt9idb9EYuv%2Fimage.png?alt=media&#x26;token=779f66b4-9f47-4baa-b39d-07acbab8c247" alt=""><figcaption><p>The editor now works</p></figcaption></figure>