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:
"use client";
import React, {
useCallback,
useMemo,
useRef,
useState,
StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
ITextCellEditorParams,
ModuleRegistry,
TextEditorModule,
enableDevValidations,
} from "ag-grid-community";
import { colors } from "./colors";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [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 GridExample = () => {
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [rowData, setRowData] = useState<any[]>(data);
const [columnDefs, setColumnDefs] = useState<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 = useMemo<ColDef>(() => {
return {
flex: 1,
editable: true,
};
}, []);
return (
<AgGridProvider modules={modules}>
<div style={containerStyle}>
<div style={gridStyle}>
<AgGridReact
rowData={rowData}
columnDefs={columnDefs}
defaultColDef={defaultColDef}
/>
</div>
</div>
</AgGridProvider>
);
};
const root = createRoot(document.getElementById("root")!);
root.render(
<StrictMode>
<GridExample />
</StrictMode>,
);
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',
];
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. Nothing reverses the mapping on commit, so this needs a colDef.valueParser that turns the formatted text back into the stored value. |
Max number of characters to allow. |