The grid comes with some cell editors provided out of the box. These cell editors are listed here.
There are also some additional cell editors that are generally used with Cell Data Types:
Simple text editor that uses the standard HTML input
. This editor is the default if none other specified.
Specified with agTextCellEditor
and configured with ITextCellEditorParams
.
Properties available on the ITextCellEditorParams<TData = any, TValue = any, TContext = any>
interface.
columnDefs: [
{
cellEditor: 'agTextCellEditor',
valueFormatter: (params) => '£' + params.value,
cellEditorParams: {
useFormatter: true,
maxLength: 200
}
// ...other props
}
]
Simple editor that uses the standard HTML textarea
. Best used in conjunction with cellEditorPopup=true
.
Specified with agLargeTextCellEditor
and configured with ILargeTextEditorParams
.
columnDefs: [
{
cellEditor: 'agLargeTextCellEditor',
cellEditorPopup: true,
cellEditorParams: {
maxLength: 100,
rows: 10,
cols: 50
}
// ...other props
}
]
Simple editor that uses HTML select
.
Specified with agSelectCellEditor
and configured with ILargeTextEditorParams
.
columnDefs: [
{
cellEditor: 'agSelectCellEditor',
cellEditorParams: {
values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'],
valueListGap: 0
}
// ...other props
}
]
Note there is no need to specify cellEditorPopup=true
for Select Cell Editor as the browsers Select widget will appear on top of the grid.
We have found the standard HTML Select doesn't have an API that's rich enough to play properly with the grid. When a cell is double clicked to start editing, it is desired that the Select is a) shown and b) opened ready for selection. There is no API to open a browsers Select. For this reason to edit there are two interactions needed 1) double click to start editing and 2) single click to open the Select.
We also observed different results while using keyboard navigation to control editing, e.g.
while using Enter
to start editing. Some browsers would open the Select, others would not.
This is down to the browser implementation and given there is no API for opening the
Select, there is nothing the grid can do.
If you are unhappy with the additional click required, we advise you don't depend on the
browsers standard Select (ie avoid agSelectCellEditor
) and instead use agRichSelectCellEditor
or
create your own using a Cell Editor Component.
An alternative to using the browser's select
popup for dropdowns inside the grid. Available in AG Grid Enterprise only.
Benefits over browser's select
are as follows:
Specified with agRichSelectCellEditor
and configured with IRichCellEditorParams
.
Properties available on the IRichCellEditorParams<TValue = any>
interface.
columnDefs: [
{
cellEditor: 'agRichSelectCellEditor',
cellEditorParams: {
values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'],
cellHeight: 20,
formatValue: value => value.toUpperCase(),
cellRenderer: MyCellRenderer,
searchDebounceDelay: 500
}
// ...other props
}
]
Simple number editor that uses the standard HTML number input
.
Specified with agNumberCellEditor
and configured with INumberCellEditorParams
.
Properties available on the INumberCellEditorParams<TData = any, TContext = any>
interface.
columnDefs: [
{
cellEditor: 'agNumberCellEditor',
cellEditorParams: {
min: 1,
max: 100,
precision: 0,
}
// ...other props
}
]
Simple date editor that uses the standard HTML date input
. Requires cell values to be of type Date
.
Specified with agDateCellEditor
and configured with IDateCellEditorParams
.
Properties available on the IDateCellEditorParams<TData = any, TContext = any>
interface.
columnDefs: [
{
cellEditor: 'agDateCellEditor',
cellEditorParams: {
min: '2000-01-01',
min: '2019-12-31',
}
// ...other props
}
]
Simple date editor that uses the standard HTML date input
. Similar to the Date Cell Editor, but works off of cell values with string
type.
The date format is controlled via Cell Data Types and the Date as String Data Type Definition. The default is 'yyyy-mm-dd'
.
Specified with agDateStringCellEditor
and configured with IDateStringCellEditorParams
.
Properties available on the IDateStringCellEditorParams<TData = any, TContext = any>
interface.
columnDefs: [
{
cellEditor: 'agDateStringCellEditor',
cellEditorParams: {
min: '2000-01-01',
min: '2019-12-31',
}
// ...other props
}
]
Simple boolean editor that uses the standard HTML checkbox input
.
Specified with agCheckboxCellEditor
.
Generally used in conjunction with the Checkbox Cell Renderer.
columnDefs: [
{
cellEditor: 'agCheckboxCellEditor',
// ...other props
}
]