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

`editable` is available on field definitions, [expression fields](https://www.ag-grid.com/studio/react/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

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgStudio, AgStudioRef } from "ag-studio-react";
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 StudioExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const studioStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [data, setData] = useState<AgDataSourcesDefinition | AgDataEngine>();
  const initialState = useMemo<AgReportState>(() => {
    return {
      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 onApiReady = useCallback((params: AgStudioApiReadyEvent) => {
    fetch("https://www.ag-grid.com/studio/example-assets/olympic-winners.json")
      .then((resp) => resp.json())
      .then((data: any[]) =>
        setData({
          sources: [{ id: "medals", name: "Medals", data, fields }],
        }),
      );
  }, []);

  return (
    <div style={containerStyle}>
      <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
        <AgStudio
          style={studioStyle}
          className="my-studio-container"
          data={data}
          initialState={initialState}
          mode={"edit"}
          onApiReady={onApiReady}
        />
      </div>
    </div>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <StudioExample />
  </StrictMode>,
);
```

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

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