---
title: "Text Cell Editor"
framework: vue
version: "36.1.0"
---

# Text Cell Editor

Simple text editor that uses the standard HTML `input`. This editor is the default if none other specified.

## Enabling Text Cell Editor

Edit any cell in the grid below to see the Text Cell Editor:

#### Text Editor

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ITextCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  enableDevValidations,
} from "ag-grid-community";
import { colors } from "./colors";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, TextEditorModule]);

function getRandomNumber(min: number, max: number) {
  // min and max included
  return Math.floor(window.agRandom() * (max - min + 1) + min);
}

const data = Array.from(Array(20).keys()).map(() => {
  const color = colors[getRandomNumber(0, colors.length - 1)];
  return {
    color: color,
    value: getRandomNumber(0, 1000),
  };
});

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "color",
        cellEditor: "agTextCellEditor",
        cellEditorParams: {
          maxLength: 20,
        } as ITextCellEditorParams,
      },
      {
        field: "value",
        valueFormatter: (params) => `£ ${params.value}`,
        cellEditor: "agTextCellEditor",
        cellEditorParams: {
          maxLength: 20,
        } as ITextCellEditorParams,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      editable: true,
    });
    const rowData = ref<any[] | null>(data);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      onGridReady,
    };
  },
});

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

[Live example: Text Editor](https://www.ag-grid.com/examples/provided-cell-editors-text/text-editor/vue3)

Enabled with `agTextCellEditor` and configured with `ITextCellEditorParams`.

```js
columnDefs: [
    {
        cellEditor: 'agTextCellEditor',
        cellEditorParams: {
            maxLength: 20
        },
    },
]
```

## API Reference

Properties available on the `ITextCellEditorParams&lt;TData = any, TValue = any, TContext = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `useFormatter` | `boolean` |  |  | If `true`, the editor will use the provided `colDef.valueFormatter` to format the value displayed in the editor. Used when the cell value needs formatting prior to editing, such as when using reference data and you want to display text rather than code. |
| `maxLength` | `number` |  | `524288` | Max number of characters to allow. |