---
title: "Editable Fields"
framework: javascript
version: "2.1.2"
---

# Editable Fields

End users can edit a field's name, description, and formatting options directly in Studio when the developer opts the field in. Edits are surfaced through the Edit Panel when a field is selected in the Data Panel, and the resulting overrides are stored in [State](https://www.ag-grid.com/studio/javascript/state/).

## Configuring Editability

Fields are fully editable by default. Use the `editable` property on a field definition to lock a field down or to restrict which properties the user can change:

```ts
const fields: AgFieldDefinition[] = [
    { id: 'country', format: 'textFormat' },
    { id: 'sport', format: 'textFormat', editable: false },
    { id: 'gold', format: 'integerFormat', editable: ['name', 'formatOptions'] },
    { id: 'silver', format: 'integerFormat', editable: ['name'] },
];
```

Pass `false` to make the field read-only, or an array of `AgFieldEditableKey` values to allow a subset:

| Key | What the user can edit |
| --- | --- |
| `name` | The display name shown wherever the field appears. |
| `description` | The description shown in the Field Panel. |
| `formatOptions` | Formatting options for the field's format type (see [Formatting](https://www.ag-grid.com/studio/javascript/formatting/)). |

`editable` is available on field definitions, [expression fields](https://www.ag-grid.com/studio/javascript/expressions/), and measures.

## Example

In the example below, select any field in the Data Panel to switch the Edit Panel to its field view. Each field is configured differently:

- **Country**: fully editable (default).
- **Sport**: read-only (`editable: false`).
- **Gold**: name and format options editable (`editable: ['name', 'formatOptions']`).
- **Silver**: name only (`editable: ['name']`).
- **Bronze**: read-only (`editable: false`).

#### Editable Fields

```ts
import {
  AgFieldDefinition,
  AgReportState,
  AgStudioApi,
  AgStudioProperties,
  createStudio,
} from "ag-studio";

const fields: AgFieldDefinition[] = [
  {
    id: "country",
    format: "textFormat",
  },
  {
    id: "sport",
    format: "textFormat",
    editable: false,
  },
  {
    id: "gold",
    format: "integerFormat",
    editable: ["name", "formatOptions"],
  },
  {
    id: "silver",
    format: "integerFormat",
    editable: ["name"],
  },
  {
    id: "bronze",
    format: "integerFormat",
    editable: false,
  },
];

const initialState: AgReportState = {
  pages: [
    {
      id: "a",
      widgets: {
        "1": {
          type: "grid",
          dataMapping: {
            cols: [
              { id: "medals.country" },
              { id: "medals.sport" },
              { id: "medals.gold", aggregation: "sum" },
              { id: "medals.silver", aggregation: "sum" },
              { id: "medals.bronze", aggregation: "sum" },
            ],
          },
        },
      },
      widgetLayout: {
        "1": { xTrack: 0, yTrack: 0, xSpan: 24, ySpan: 16 },
      },
    },
  ],
  selectedPageId: "a",
  panels: {
    filters: {
      collapsed: true,
    },
  },
};

const studioProperties: AgStudioProperties = {
  mode: "edit",
  initialState,
};

let studioApi: AgStudioApi;

const studioDiv = document.querySelector<HTMLElement>("#myStudio")!;
studioApi = createStudio(studioDiv, studioProperties);
fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data) =>
    studioApi!.setProperty("data", {
      sources: [{ id: "medals", name: "Medals", data, fields }],
    }),
  );
```

[Live example: Editable Fields](https://www.ag-grid.com/studio/examples/editable-fields/editable-fields/typescript/)

## Persisting Edits

User edits are written to the `schema` slice of the report state as an `AgSchemaState` map keyed by field ID. Save and restore this with the rest of your report state. See [State](https://www.ag-grid.com/studio/javascript/state/) for the full state model.