---
product: "AG Grid"
title: "Text Cell Editor"
description: "Simple text editor that uses the standard HTML input . This editor is the default if none other specified."
framework: javascript
version: "36.3.0"
related:
    - title: "Large Text Editor"
      url: "https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/provided-cell-editors-large-text/"
    - title: "Number Editor"
      url: "https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/provided-cell-editors-number/"
    - title: "Date Editors"
      url: "https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/provided-cell-editors-date/"
    - title: "Checkbox Editor"
      url: "https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/provided-cell-editors-checkbox/"
    - title: "Select Editor"
      url: "https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/provided-cell-editors-select/"
    - title: "Rich Select Editor"
      url: "https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/provided-cell-editors-rich-select/"
llms: "https://www.ag-grid.com/archive/36.3.0/llms.txt"
---

# 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 {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  ITextCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { colors } from "./colors";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, TextEditorModule]);

const columnDefs: ColDef[] = [
  {
    field: "color",
    cellEditor: "agTextCellEditor",
    cellEditorParams: {
      maxLength: 20,
    } as ITextCellEditorParams,
  },
  {
    field: "value",
    valueFormatter: (params) => `£ ${params.value}`,
    cellEditor: "agTextCellEditor",
    cellEditorParams: {
      maxLength: 20,
    } as ITextCellEditorParams,
  },
];

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),
  };
});

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    flex: 1,
    editable: true,
  },
  columnDefs: columnDefs,
  rowData: data,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

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

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. Nothing reverses the mapping on commit, so this needs a `colDef.valueParser` that turns the formatted text back into the stored value. |
| `maxLength` | `number` |  | `524288` | Max number of characters to allow. |