---
title: "Rich Select Cell Editor - Customisation"
enterprise: true
framework: javascript
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 {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  IRichCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { RichSelectModule } from "ag-grid-enterprise";
import { colors } from "./colors";
import { ColourCellRenderer } from "./colourCellRenderer";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

const columnDefs: ColDef[] = [
  {
    headerName: "Rich Select Editor",
    field: "color",
    cellRenderer: ColourCellRenderer,
    cellEditor: "agRichSelectCellEditor",
    cellEditorParams: {
      values: colors,
      cellRenderer: ColourCellRenderer,
      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 color = colors[getRandomNumber(0, colors.length - 1)];
  return { color };
});

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    width: 200,
    editable: true,
  },
  columnDefs: columnDefs,
  rowData: data,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

[Live example: Rich Select with Cell Renderer](https://www.ag-grid.com/examples/provided-cell-editors-rich-select-customisation/rich-select-cell-renderer/typescript)

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

The interface for the Cell Component is as follows:

```ts
interface ICellEditorRendererComp {
    // Optional - props for rendering.
    init?(props: IRichCellEditorRendererParams): void;

    // Mandatory - Return the DOM element of the component, this is what the grid puts into the cell
    getGui(): HTMLElement;

    // Optional - Gets called once by grid after rendering is finished - if your renderer needs to do any cleanup,
    // do it here
    destroy?(): void;
}
```

The Component is provided `props` containing, amongst other things, the value to be rendered.

```ts
class MyCustomEditorRenderer {
    // ...
    init(props) {
        // create the cell
        this.eGui = document.createElement('div');
        this.eGui.innerHTML = props.value;
    }
    // ...
}
```

The provided `props` (interface IRichCellEditorRendererParams) are:

| 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/javascript-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/javascript-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 {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  IRichCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { RichSelectModule } from "ag-grid-enterprise";
import { colors } from "./colors";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

const columnDefs: 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,
  },
];

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

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    width: 200,
    editable: true,
  },
  columnDefs: columnDefs,
  rowData: data,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

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

```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 {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  IRichCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { RichSelectModule } from "ag-grid-enterprise";
import { colors } from "./colors";
import { ColourCellRenderer } from "./colourCellRenderer";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

const columnDefs: 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,
  },
];

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

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    flex: 1,
    editable: true,
  },
  columnDefs: columnDefs,
  rowData: data,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

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

```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 {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  IRichCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { RichSelectModule } from "ag-grid-enterprise";

// Enable extended validations only for development
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 columnDefs: ColDef[] = [
  {
    headerName: "Rich Select Editor",
    field: "language",
    cellEditor: "agRichSelectCellEditor",
    cellEditorParams: {
      values: languages,
      formatValue: (values) => values.toUpperCase(),
    } as IRichCellEditorParams,
  },
];

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    width: 200,
    editable: true,
  },
  columnDefs: columnDefs,
  rowData: new Array(100)
    .fill(null)
    .map(() => ({ language: languages[getRandomNumber(0, 4)] })),
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

[Live example: Rich Select Format Values](https://www.ag-grid.com/examples/provided-cell-editors-rich-select-customisation/rich-select-format-values/typescript)

```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 {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  IRichCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  ValueFormatterParams,
  ValueParserParams,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { RichSelectModule } from "ag-grid-enterprise";
import { colors } from "./colors";
import { ColourCellRenderer } from "./colourCellRenderer";

// Enable extended validations only for development
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(",");
};

type MultiSelectExampleConfig = {
  allowTyping: boolean;
  suppressMultiSelectPillRenderer: boolean;
  useCustomCellRenderer: boolean;
};

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

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    flex: 1,
    editable: true,
    valueFormatter: valueFormatter,
    valueParser: valueParser,
  },
  columnDefs: getColumnDefs(config),
  rowData: data,
};

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

function applyExampleConfig(): void {
  config.allowTyping = getCheckboxValue("#allow-typing");
  config.suppressMultiSelectPillRenderer = getCheckboxValue(
    "#suppress-multi-select-pill-renderer",
  );
  config.useCustomCellRenderer = getCheckboxValue("#custom-cell-renderer");

  if (gridApi) {
    const activeEdit = gridApi.getEditingCells()[0];
    if (activeEdit) {
      gridApi.stopEditing();
    }

    gridApi.setGridOption("columnDefs", getColumnDefs(config));

    if (activeEdit) {
      requestAnimationFrame(() => {
        gridApi.startEditingCell({
          rowIndex: activeEdit.rowIndex,
          rowPinned: activeEdit.rowPinned,
          colKey: "colors",
        });
      });
    }
  }
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).applyExampleConfig = applyExampleConfig;
}
```

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

```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 {
  ClientSideRowModelModule,
  ColDef,
  GridApi,
  GridOptions,
  IRichCellEditorParams,
  ModuleRegistry,
  TextEditorModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { RichSelectModule } from "ag-grid-enterprise";
import { colors } from "./colors";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

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

const columnDefs: 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,
  },
];

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    width: 200,
    editable: true,
    cellEditor: "agRichSelectCellEditor",
  },
  columnDefs: columnDefs,
  rowData: colors.map((v) => ({ color: v.name, detailedColor: v })),
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
```

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

```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/javascript-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. |