Simple editor that uses the standard HTML textarea, allowing users to enter text shown over multiple lines.
Enabling Large Text Cell Editor Copy Link
Edit any cell in the grid below to see the Large 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,
LargeTextEditorModule,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
const modules = [ClientSideRowModelModule, LargeTextEditorModule];
const data = Array.from(Array(20).keys()).map(() => {
return {
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
};
});
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[]>([
{
headerName: "Large Text Editor",
field: "description",
cellEditor: "agLargeTextCellEditor",
cellEditorPopup: true,
},
]);
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>,
);
Enabled with agLargeTextCellEditor and configured with ILargeTextEditorParams.
columnDefs: [
{
cellEditor: 'agLargeTextCellEditor',
cellEditorPopup: true,
cellEditorParams: {
maxLength: 100
}
// ...other props
}
] Customisation Copy Link
Editor Size Copy Link
The width and height of the Large Text Cell Editor can be customised. Edit any cell in the grid below to see the editor displayed with a modified size.
"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,
ILargeTextEditorParams,
LargeTextEditorModule,
ModuleRegistry,
enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
const modules = [ClientSideRowModelModule, LargeTextEditorModule];
const data = Array.from(Array(20).keys()).map(() => {
return {
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
};
});
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[]>([
{
headerName: "Large Text Editor",
field: "description",
cellEditor: "agLargeTextCellEditor",
cellEditorPopup: true,
cellEditorParams: {
rows: 15,
cols: 50,
} as ILargeTextEditorParams,
},
]);
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>,
);
To customise the size, there are two options:
cols: The average number of characters displayed.rows: The number of lines of text displayed.
columnDefs: [
{
cellEditor: 'agLargeTextCellEditor',
cellEditorPopup: true,
cellEditorParams: {
rows: 15,
cols: 50
}
// ...other props
}
] API Reference Copy Link
Properties available on the ILargeTextEditorParams interface.
Max number of characters to allow. |
Number of character rows to display. |
Number of character columns to display. |