---
title: "Rich Select Cell Editor - Customisation"
enterprise: true
framework: vue
version: "36.1.0"
---

# Rich Select Cell Editor - Customisation

The Rich Select Cell Editor supports cell renderers, value formatting, search and typing behaviour, multi-selection, and complex object values.

## Cell Renderer

The cell renderer used within the editor can be customised as shown below:

#### Rich Select with Cell Renderer

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

ModuleRegistry.registerModules([
  TextEditorModule,
  ClientSideRowModelModule,
  RichSelectModule,
]);

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,
    ColourCellRenderer,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        headerName: "Rich Select Editor",
        field: "color",
        cellRenderer: "ColourCellRenderer",
        cellEditor: "agRichSelectCellEditor",
        cellEditorParams: {
          values: colors,
          cellRenderer: "ColourCellRenderer",
          valueListMaxHeight: 220,
        } as IRichCellEditorParams,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      width: 200,
      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: Rich Select with Cell Renderer](https://www.ag-grid.com/examples/provided-cell-editors-rich-select-customisation/rich-select-cell-renderer/vue3)

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellRenderer: ColourCellRenderer,
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            cellRenderer: ColourCellRenderer,
            valueListMaxHeight: 220
        }
        // ...other props
    }
]
```

You can access the `params` object via `this.params` in the usual methods (lifecycle hooks, methods etc), and via `props.params` when using `setup`.

```ts
  // ...
  beforeMount() {
    this.cellValue = this.params.value;
  }
  // ...
```

The `params` (interface IRichCellEditorRendererParams) passed to the Editor Renderer are as follows:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `cellRendererParams` | `any` |  |  | any |
| `value` | `TValue[] \| TValue \| null` |  |  | The value to be rendered by the renderer |
| `valueFormatted` | `string` |  |  | The value to be renderer by the renderer formatted by the editor |
| `getValue` | `Function` |  |  | Gets the current value of the editor |
| `setValue` | `Function` |  |  | Sets the value of the editor |
| `setTooltip` | `Function` |  |  | Used to set a tooltip to the renderer |
| `api` | [`GridApi`](https://www.ag-grid.com/vue-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/vue-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |

## Search Values

Different types of search are possible within the editor list as shown below:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `searchType` | `'match' \| 'matchAny' \| 'fuzzy'` |  | `'fuzzy'` | The type of search algorithm that is used when searching for values. `match` - Matches if the value starts with the text typed. `matchAny` - Matches if the value contains the text typed. `fuzzy` - Matches the closest value to text typed. Note: When a cellRenderer is specified, this option will not work. |

#### Rich Select Editor

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

ModuleRegistry.registerModules([
  TextEditorModule,
  ClientSideRowModelModule,
  RichSelectModule,
]);

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: "Fuzzy Search",
        field: "color",
        cellEditor: "agRichSelectCellEditor",
        cellEditorParams: {
          values: colors,
        } as IRichCellEditorParams,
      },
      {
        headerName: "Match Search",
        field: "color",
        cellEditor: "agRichSelectCellEditor",
        cellEditorParams: {
          values: colors,
          searchType: "match",
        } as IRichCellEditorParams,
      },
      {
        headerName: "Match Any Search",
        field: "color",
        cellEditor: "agRichSelectCellEditor",
        cellEditorParams: {
          values: colors,
          searchType: "matchAny",
        } as IRichCellEditorParams,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      width: 200,
      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: Rich Select Editor](https://www.ag-grid.com/examples/provided-cell-editors-rich-select-customisation/rich-select-search-values/vue3)

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            searchType: 'match',
        }
        // ...other props
    }
]
```

## Allow Typing

The editor input can be configured to allow text input, which is used to match different parts of the editor list items as shown below:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `allowTyping` | `boolean` |  | `false` | Set to `true` to be able to type values in the display area. |

#### Rich Select Editor

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

ModuleRegistry.registerModules([
  TextEditorModule,
  ClientSideRowModelModule,
  RichSelectModule,
]);

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,
    ColourCellRenderer,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        headerName: "Allow Typing (Match)",
        field: "color",
        cellRenderer: "ColourCellRenderer",
        cellEditor: "agRichSelectCellEditor",
        cellEditorParams: {
          values: colors,
          searchType: "match",
          allowTyping: true,
          filterList: true,
          highlightMatch: true,
          valueListMaxHeight: 220,
        } as IRichCellEditorParams,
      },
      {
        headerName: "Allow Typing (MatchAny)",
        field: "color",
        cellRenderer: "ColourCellRenderer",
        cellEditor: "agRichSelectCellEditor",
        cellEditorParams: {
          values: colors,
          searchType: "matchAny",
          allowTyping: true,
          filterList: true,
          highlightMatch: true,
          valueListMaxHeight: 220,
        } as IRichCellEditorParams,
      },
    ]);
    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: Rich Select Editor](https://www.ag-grid.com/examples/provided-cell-editors-rich-select-customisation/rich-select-allow-typing/vue3)

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellRenderer: ColourCellRenderer,
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            allowTyping: true,
            filterList: true,
            highlightMatch: true,
        }
        // ...other props
    }
]
```

## Format Values

Items in the editor list can be formatted as shown below:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `formatValue` | `Function` |  |  | A callback function that allows you to change the displayed value for simple data. |

#### Rich Select Format Values

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

ModuleRegistry.registerModules([
  TextEditorModule,
  ClientSideRowModelModule,
  RichSelectModule,
]);

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: "Rich Select Editor",
        field: "language",
        cellEditor: "agRichSelectCellEditor",
        cellEditorParams: {
          values: languages,
          formatValue: (values) => values.toUpperCase(),
        } as IRichCellEditorParams,
      },
    ]);
    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: Rich Select Format Values](https://www.ag-grid.com/examples/provided-cell-editors-rich-select-customisation/rich-select-format-values/vue3)

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'],
            formatValue: value => value.toUpperCase()
        }
        // ...other props
    }
]
```

## Multi Selection

The editor can be configured to allow the selection of multiple values as shown below:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `multiSelect` | `boolean` |  |  | If `true` this component will allow multiple items from the list of values to be selected. |
| `suppressMultiSelectPillRenderer` | `boolean` |  |  | When `multiSelect=true` the editor will automatically show the selected items as "pills". Set this property to `true` suppress this behaviour. |

#### Rich Select Editor

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IRichCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  ValueFormatterParams,
  ValueParserParams,
  enableDevValidations,
} from "ag-grid-community";
import { RichSelectModule } from "ag-grid-enterprise";
import ColourCellRenderer from "./colourCellRendererVue";
import { colors } from "./colors";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  ClientSideRowModelModule,
  RichSelectModule,
]);

const valueFormatter = (params: ValueFormatterParams) => {
  const { value } = params;
  if (Array.isArray(value)) {
    return value.join(", ");
  }
  return value;
};

const valueParser = (params: ValueParserParams) => {
  const { newValue } = params;
  if (newValue == null || newValue === "") {
    return null;
  }
  if (Array.isArray(newValue)) {
    return newValue;
  }
  return params.newValue.split(",");
};

const config: MultiSelectExampleConfig = {
  allowTyping: false,
  suppressMultiSelectPillRenderer: false,
  useCustomCellRenderer: false,
};

function getColumnDefs(exampleConfig: MultiSelectExampleConfig): ColDef[] {
  const {
    allowTyping,
    suppressMultiSelectPillRenderer,
    useCustomCellRenderer,
  } = exampleConfig;
  return [
    {
      headerName: "Colours",
      field: "colors",
      cellRenderer: useCustomCellRenderer ? ColourCellRenderer : undefined,
      cellEditor: "agRichSelectCellEditor",
      cellEditorParams: {
        values: colors,
        cellRenderer: useCustomCellRenderer ? ColourCellRenderer : undefined,
        allowTyping,
        suppressMultiSelectPillRenderer,
        multiSelect: true,
        searchType: "matchAny",
        filterList: true,
        highlightMatch: true,
        valueListMaxHeight: 220,
      } as IRichCellEditorParams,
    },
  ];
}

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 numberOfOptions = getRandomNumber(1, 4);
  const selectedOptions: string[] = [];
  for (let i = 0; i < numberOfOptions; i++) {
    const color = colors[getRandomNumber(0, colors.length - 1)];
    if (selectedOptions.indexOf(color) === -1) {
      selectedOptions.push(color);
    }
  }
  selectedOptions.sort();
  return { colors: selectedOptions };
});

function getCheckboxValue(id: string): boolean {
  return document.querySelector<HTMLInputElement>(id)?.checked ?? false;
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div class="controls">
        <label class="option">
          <input id="allow-typing" class="js-rich-select-toggle" v-on:change="applyExampleConfig()" type="checkbox">
            allowTyping
          </label>
          <label class="option">
            <input id="suppress-multi-select-pill-renderer" class="js-rich-select-toggle" v-on:change="applyExampleConfig()" type="checkbox">
              suppressMultiSelectPillRenderer
            </label>
            <label class="option">
              <input id="custom-cell-renderer" class="js-rich-select-toggle" v-on:change="applyExampleConfig()" type="checkbox">
                Custom Cell Renderer
              </label>
            </div>
            <div class="grid-wrapper">
              <ag-grid-vue
                style="width: 100%; height: 100%;"
                @grid-ready="onGridReady"
                :defaultColDef="defaultColDef"
                :columnDefs="columnDefs"
                :rowData="rowData"></ag-grid-vue>
              </div>
            </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
    ColourCellRenderer,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      editable: true,
      valueFormatter: valueFormatter,
      valueParser: valueParser,
    });
    const columnDefs = ref<ColDef[]>(getColumnDefs(config));
    const rowData = ref<any[] | null>(data);

    const applyExampleConfig: () => void = () => {
      config.allowTyping = getCheckboxValue("#allow-typing");
      config.suppressMultiSelectPillRenderer = getCheckboxValue(
        "#suppress-multi-select-pill-renderer",
      );
      config.useCustomCellRenderer = getCheckboxValue("#custom-cell-renderer");
      if (gridApi.value) {
        const activeEdit = gridApi.value.getEditingCells()[0];
        if (activeEdit) {
          gridApi.value.stopEditing();
        }
        gridApi.value.setGridOption("columnDefs", getColumnDefs(config));
        if (activeEdit) {
          requestAnimationFrame(() => {
            gridApi.value.startEditingCell({
              rowIndex: activeEdit.rowIndex,
              rowPinned: activeEdit.rowPinned,
              colKey: "colors",
            });
          });
        }
      }
    };
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

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

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

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

```js
columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        cellEditorParams: {
            values: ['AliceBlue', 'AntiqueWhite', 'Aqua', /* .... many colours */ ],
            multiSelect: true,
        }
        // ...other props
    }
]
```

## Complex Objects

When working with complex objects, a `formatValue` callback function is required to convert that complex object into a string that can be rendered by the Rich Select Editor. If the `Grid Column` being edited is not using complex values, or if the Rich Select Editor value object has a different format (different properties) than the object used by the `Grid Column`, a `parseValue` callback function is required to convert the editor format into the grid column's format.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `formatValue` | `Function` |  |  | A callback function that allows you to change the displayed value for simple data. |
| `parseValue` | `Function` |  |  | A callback function that allows you to convert the value of the Rich Select Editor to the data format of the Grid Column when they are different. |

> **Note**
>
> When working with `Cell Renderers`, a `formatValue` callback should still be provided so it will be possible to use functionality that relies on string values such as `allowTyping`.

#### Rich Select Editor

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

ModuleRegistry.registerModules([
  TextEditorModule,
  ClientSideRowModelModule,
  RichSelectModule,
]);

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: "Color (Column as String Type)",
        field: "color",
        width: 250,
        cellEditorParams: {
          formatValue: (v) => v.name,
          parseValue: (v) => v.name,
          values: colors,
          searchType: "matchAny",
          allowTyping: true,
          filterList: true,
          valueListMaxHeight: 220,
        } as IRichCellEditorParams,
      },
      {
        headerName: "Color (Column as Complex Object)",
        field: "detailedColor",
        width: 290,
        valueFormatter: (p) => `${p.value.name} (${p.value.code})`,
        valueParser: (p) => p.newValue,
        cellDataType: "object",
        cellEditorParams: {
          formatValue: (v) => v.name,
          values: colors,
          searchType: "matchAny",
          allowTyping: true,
          filterList: true,
          valueListMaxHeight: 220,
        } as IRichCellEditorParams,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      width: 200,
      editable: true,
      cellEditor: "agRichSelectCellEditor",
    });
    const rowData = ref<any[] | null>(
      colors.map((v) => ({ color: v.name, detailedColor: v })),
    );

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

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

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

[Live example: Rich Select Editor](https://www.ag-grid.com/examples/provided-cell-editors-rich-select-customisation/rich-select-complex-objects/vue3)

```js
const colors = [
  { name: "Pink", code: "#FFC0CB" },
  // ...other values
];

columnDefs: [
    {
        cellEditor: 'agRichSelectCellEditor',
        valueFormatter: (p) => `${p.value.name} (${p.value.code})`,
        valueParser: (p) => p.newValue,
        cellDataType: 'object',
        cellEditorParams: {
            values: colors,
            formatValue: (v) => v.name,
        }
        // ...other props
    }
]
```

## API

Properties available on the `IRichCellEditorParams&lt;TData = any, TValue = any, GValue = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `values` | [`TValue[] \| RichCellEditorValuesCallback`](https://www.ag-grid.com/vue-data-grid/typescript-generics/#cell-value-tvalue) |  |  | The list of values to be selected from. Required when `valuesPage` is not provided. |
| `valuesPage` | `RichCellEditorValuesPageCallback` |  |  | Optional paged datasource for very large value lists. When provided, values are loaded incrementally and additional pages are requested as the user scrolls. If both `values` and `valuesPage` are set, `valuesPage` takes precedence. |
| `valuesPageInitialStartRow` | `number \| RichCellEditorValuesPageStartRowCallback` |  | `0` | Initial page start row when using `valuesPage`. Can be a fixed number or a callback that derives the start row from the current editor value. Only applied for the initial, unfiltered load. Filtered searches always start from row `0`. |
| `valuesPageSize` | `number` |  | `100` | Number of rows requested per page when using `valuesPage`. |
| `valuesPageLoadThreshold` | `number` |  | `10` | Number of rows from the end of the loaded list at which the next page is requested. |
| `cellHeight` | `number` |  |  | The row height, in pixels, of each value. |
| `cellRenderer` | `any` |  |  | The cell renderer to use to render each value. Cell renderers are useful for rendering rich HTML values, or when processing complex data. |
| `cellRendererParams` | `any` |  |  | The custom parameters to be used by the cell render. |
| `allowTyping` | `boolean` |  | `false` | Set to `true` to be able to type values in the display area. |
| `filterList` | `boolean` |  | `false` | If `true` it will filter the list of values as you type (only relevant when `allowTyping=true`). |
| `filterListAsync` | `boolean` |  | `false` | Set to `true` to enable asynchronous filtering of values via the `values` or `valuesPage` callback. (only relevant when `allowTyping=true` and `filterList=true`). |
| `searchType` | `'match' \| 'matchAny' \| 'fuzzy'` |  | `'fuzzy'` | The type of search algorithm that is used when searching for values. `match` - Matches if the value starts with the text typed. `matchAny` - Matches if the value contains the text typed. `fuzzy` - Matches the closest value to text typed. Note: When a cellRenderer is specified, this option will not work. |
| `highlightMatch` | `boolean` |  | `false` | If `true`, each item on the list of values will highlight the part of the text that matches the input. Note: It only makes sense to use this option when `filterList` is `true` and `searchType` is **not** `fuzzy`. |
| `multiSelect` | `boolean` |  |  | If `true` this component will allow multiple items from the list of values to be selected. |
| `suppressDeselectAll` | `boolean` |  |  | If `true` the option to remove all selected options will not be displayed. Note: This feature only works when `multiSelect=true`. |
| `suppressMultiSelectPillRenderer` | `boolean` |  |  | When `multiSelect=true` the editor will automatically show the selected items as "pills". Set this property to `true` suppress this behaviour. |
| `searchDebounceDelay` | `number` |  | `300` | The value in `ms` for the search algorithm debounce delay |
| `valuePlaceholder` | `string` |  |  | A string value to be used when no value has been selected. |
| `valueListGap` | `number` |  | `4` | The space in pixels between the value display and the list of items. |
| `valueListMaxHeight` | `number \| string` |  | `'calc(var(--ag-row-height) * 6.5)'` | 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. |
| `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. |
| `formatValue` | `Function` |  |  | A callback function that allows you to change the displayed value for simple data. |
| `parseValue` | `Function` |  |  | A callback function that allows you to convert the value of the Rich Select Editor to the data format of the Grid Column when they are different. |