> For the complete documentation index, see [llms.txt](https://docs.grid.glideapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.grid.glideapps.com/extended-quickstart-guide/editing-data.md).

# 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="/files/A5x87NkEf2RzfZGYd5uh" alt=""><figcaption><p>The editor now works</p></figcaption></figure>