Simple text editor that uses the standard HTML input. This editor is the default if none other specified.
Enabling Text Cell Editor Copy Link
Edit any cell in the grid below to see the Text Cell Editor:
import {
ClientSideRowModelModule,
ColDef,
GridApi,
GridOptions,
ITextCellEditorParams,
ModuleRegistry,
TextEditorModule,
createGrid,
enableDevValidations,
} from "ag-grid-community";
import { colors } from "./colors";
// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
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);
export const colors: string[] = [
'AliceBlue',
'AntiqueWhite',
'Aqua',
'Aquamarine',
'Azure',
'Beige',
'Bisque',
'Black',
'BlanchedAlmond',
'Blue',
'BlueViolet',
'Brown',
'BurlyWood',
'CadetBlue',
'Chartreuse',
'Chocolate',
'Coral',
'CornflowerBlue',
'Cornsilk',
'Crimson',
'Cyan',
'DarkBlue',
'DarkCyan',
'DarkGoldenrod',
'DarkGray',
'DarkGreen',
'DarkGrey',
'DarkKhaki',
'DarkMagenta',
'DarkOliveGreen',
'DarkOrange',
'DarkOrchid',
'DarkRed',
'DarkSalmon',
'DarkSeaGreen',
'DarkSlateBlue',
'DarkSlateGray',
'DarkSlateGrey',
'DarkTurquoise',
'DarkViolet',
'DeepPink',
'DeepSkyBlue',
'DimGray',
'DodgerBlue',
'FireBrick',
'FloralWhite',
'ForestGreen',
'Fuchsia',
'Gainsboro',
'GhostWhite',
'Gold',
'Goldenrod',
'Gray',
'Green',
'GreenYellow',
'Grey',
'Honeydew',
'HotPink',
'IndianRed',
'Indigo',
'Ivory',
'Khaki',
'Lavender',
'LavenderBlush',
'LawnGreen',
'LemonChiffon',
'LightBlue',
'LightCoral',
'LightCyan',
'LightGoldenrodYellow',
'LightGray',
'LightGreen',
'LightGrey',
'LightPink',
'LightSalmon',
'LightSeaGreen',
'LightSkyBlue',
'LightSlateGray',
'LightSlateGrey',
'LightSteelBlue',
'LightYellow',
'Lime',
'LimeGreen',
'Linen',
'Magenta',
'Maroon',
'MediumAquamarine',
'MediumBlue',
'MediumOrchid',
'MediumPurple',
'MediumSeaGreen',
'MediumSlateBlue',
'MediumSpringGreen',
'MediumTurquoise',
'MediumVioletRed',
'MidnightBlue',
'MintCream',
'MistyRose',
'Moccasin',
'NavajoWhite',
'Navy',
'OldLace',
'Olive',
'OliveDrab',
'Orange',
'OrangeRed',
'Orchid',
'PaleGoldenrod',
'PaleGreen',
'PaleTurquoise',
'PaleVioletRed',
'PapayaWhip',
'PeachPuff',
'Peru',
'Pink',
'Plum',
'PowderBlue',
'Purple',
'Rebeccapurple',
'Red',
'RosyBrown',
'RoyalBlue',
'SaddleBrown',
'Salmon',
'SandyBrown',
'SeaGreen',
'Seashell',
'Sienna',
'Silver',
'SkyBlue',
'SlateBlue',
'SlateGray',
'SlateGrey',
'Snow',
'SpringGreen',
'SteelBlue',
'Tan',
'Teal',
'Thistle',
'Tomato',
'Turquoise',
'Violet',
'Wheat',
'White',
'WhiteSmoke',
'Yellow',
'YellowGreen',
];
<div id="myGrid" style="height: 100%"></div>
Enabled with agTextCellEditor and configured with ITextCellEditorParams.
columnDefs: [
{
cellEditor: 'agTextCellEditor',
cellEditorParams: {
maxLength: 20
},
},
] API Reference Copy Link
Properties available on the ITextCellEditorParams<TData = any, TValue = any, TContext = any> interface.
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. |
Max number of characters to allow. |