---
title: "Editable Fields"
framework: vue
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/vue/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/vue/formatting/)). |

`editable` is available on field definitions, [expression fields](https://www.ag-grid.com/studio/vue/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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgStudio } from "ag-studio-vue3";
import {
  AgDataEngine,
  AgDataSourcesDefinition,
  AgFieldDefinition,
  AgReportState,
  AgStudioApi,
  AgStudioApiReadyEvent,
  AgStudioMode,
  AgStudioProperties,
} 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 VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="display: flex; flex-direction: column; height: 100%">
      <ag-studio
        style="width: 100%; height: 100%;"
        class="my-studio-container"
        @api-ready="onApiReady"
        :initialState="initialState"
        :mode="mode"
        :data="data"></ag-studio>
      </div>
        </div>
    `,
  components: {
    "ag-studio": AgStudio,
  },
  setup(props) {
    const studioApi = shallowRef<AgStudioApi | null>(null);
    const initialState = ref<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 mode = ref<AgStudioMode>("edit");
    const data = ref<AgDataSourcesDefinition | AgDataEngine>(null);

    const onApiReady = (params: AgStudioApiReadyEvent) => {
      studioApi.value = params.api;

      const getData = (data) => ({
        sources: [{ id: "medals", name: "Medals", data, fields }],
      });

      fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((respData) => (data.value = getData(respData)));
    };

    return {
      studioApi,
      initialState,
      mode,
      data,
      onApiReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

## 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/vue/state/) for the full state model.