Vue Data Grid

Select Cell Editor

vue logo

Simple editor that uses HTML select, allowing users to select a cell value from a list of provided values.

Enabling Select Cell Editor

Edit any cell in the grid below to see the Select Cell Editor.

Enabled with agSelectCellEditor and configured with ISelectCellEditorParams.

columnDefs: [
    {
        cellEditor: 'agSelectCellEditor',
        cellEditorParams: {
            values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'],
        }
        // ...other props
    }
]

Customisation

List Gap

It is possible to customise the space between the editor input and the popup when opened. Edit any cell below to see the popup displayed at an offset from the input.

This can be customised by setting the valueListGap parameter as shown below:

columnDefs: [
    {
        cellEditor: 'agSelectCellEditor',
        cellEditorParams: {
            values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'],
            valueListGap: 10
        }
        // ...other props
    }
]

List Size

It is possible to customise the size of the list popup when opened. In the grid below, the editor popups in the right column are displayed with a specified size, whereas the editor popups in the left column are displayed with the default size.

This can be customised by setting the valueListMaxHeight and valueListMaxWidth parameters as shown below:

columnDefs: [
    {
        cellEditor: 'agSelectCellEditor',
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            valueListMaxHeight: 120,
            valueListMaxWidth: 120
        }
        // ...other props
    }
]

API Reference