---
title: "Select Cell Editor"
framework: vue
version: "36.1.0"
---

# Select Cell Editor

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.

#### Select Editor

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ISelectCellEditorParams,
  ModuleRegistry,
  SelectEditorModule,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, SelectEditorModule]);

const languages = ["English", "Spanish", "French", "Portuguese", "(other)"];

function getRandomNumber(min: number, max: number) {
  // min and max included
  return Math.floor(window.agRandom() * (max - min + 1) + min);
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        headerName: "Select Editor",
        field: "language",
        cellEditor: "agSelectCellEditor",
        cellEditorParams: {
          values: languages,
        } as ISelectCellEditorParams,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      width: 200,
      editable: true,
    });
    const rowData = ref<any[] | null>(
      new Array(100)
        .fill(null)
        .map(() => ({ language: languages[getRandomNumber(0, 4)] })),
    );

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Select Editor](https://www.ag-grid.com/examples/provided-cell-editors-select/select-editor/vue3)

Enabled with `agSelectCellEditor` and configured with `ISelectCellEditorParams`.

```js
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.

#### Select Editor List Gap

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ISelectCellEditorParams,
  ModuleRegistry,
  SelectEditorModule,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, SelectEditorModule]);

const languages = ["English", "Spanish", "French", "Portuguese", "(other)"];

function getRandomNumber(min: number, max: number) {
  // min and max included
  return Math.floor(window.agRandom() * (max - min + 1) + min);
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        headerName: "Select Editor",
        field: "language",
        cellEditor: "agSelectCellEditor",
        cellEditorParams: {
          values: languages,
          valueListGap: 10,
        } as ISelectCellEditorParams,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      width: 200,
      editable: true,
    });
    const rowData = ref<any[] | null>(
      new Array(100)
        .fill(null)
        .map(() => ({ language: languages[getRandomNumber(0, 4)] })),
    );

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Select Editor List Gap](https://www.ag-grid.com/examples/provided-cell-editors-select/select-editor-list-gap/vue3)

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

```js
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.

#### Select Editor Max Height and Max Width

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ISelectCellEditorParams,
  ModuleRegistry,
  SelectEditorModule,
  enableDevValidations,
} from "ag-grid-community";
import { colors } from "./colors";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, SelectEditorModule]);

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 };
});

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        headerName: "Select Editor Without Max Height and Max Width",
        field: "color",
        cellEditor: "agSelectCellEditor",
        cellEditorParams: {
          values: colors,
        } as ISelectCellEditorParams,
      },
      {
        headerName: "Select Editor With Max Height and Max Width",
        field: "color",
        cellEditor: "agSelectCellEditor",
        cellEditorParams: {
          values: colors,
          valueListMaxHeight: 200,
          valueListMaxWidth: 150,
        } as ISelectCellEditorParams,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      editable: true,
    });
    const rowData = ref<any[] | null>(data);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      onGridReady,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Select Editor Max Height and Max Width](https://www.ag-grid.com/examples/provided-cell-editors-select/select-editor-max-height-and-width/vue3)

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

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

## API Reference

Properties available on the `ISelectCellEditorParams&lt;TValue = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `values` | [`TValue[]`](https://www.ag-grid.com/vue-data-grid/typescript-generics/#cell-value-tvalue) |  |  | List of values to display |
| `valueListGap` | `number` |  | `4` | The space in pixels between the value display and the list of items. |
| `valueListMaxHeight` | `number \| string` |  |  | The maximum height of the list of items. If the value is a `number` it will be treated as pixels, otherwise it should be a valid CSS size string. Default: Height of Popup Parent. |
| `valueListMaxWidth` | `number \| string` |  |  | The maximum width of the list of items. If the value is a `number` it will be treated as pixels, otherwise it should be a valid CSS size string. Default: Width of the cell being edited. |

> **Note**
>
> 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 [Rich Select Cell Editor](https://www.ag-grid.com/vue-data-grid/provided-cell-editors-rich-select/) or create your own using a [Cell Editor Component](https://www.ag-grid.com/vue-data-grid/cell-editors/).