Select Dropdown

Double-click a status and choose another option from the dropdown.

The select column type adds a dropdown editor through the revogrid-column-select package, based on revo-dropdown.

Use it when users should choose from a controlled list of values, such as statuses, departments, categories, countries, or lookup table entries.

Dropdown options can be represented as strings or objects. When using objects, configure labelKey and valueKey so the editor knows what to display and what to store.

Installation

npm

npm i @revolist/revogrid-column-select

pnpm

pnpm add @revolist/revogrid-column-select

yarn

yarn add @revolist/revogrid-column-select

bun

bun add @revolist/revogrid-column-select

Basic usage

1. Import the select column type.
2. Define the dropdown source.
3. Register the type in columnTypes.
4. Set columnType: 'select' on the column.

// do Select class import
import SelectTypePlugin from '@revolist/revogrid-column-select'

const dropdown = {
    labelKey: 'label',
    valueKey: 'value',
    source: [
        { label: 'According', value: 'a' },
        { label: 'Over', value: 'b' },
        { label: 'Source', value: 's' },
    ],
}
const columns = [
    {
        ...dropdown,
        prop: 'name',
        columnType: 'select', // column type specified as 'select'
    },
]
const rows = [{ name: 'New item' }, { name: 'New item 2' }]

// register column type
const plugin = { select: new SelectTypePlugin() }

// apply data to grid per your framework approach
<revo-grid source={rows} columns={columns} columnTypes={plugin} />

Option shape

const dropdown = {
  labelKey: 'label',
  valueKey: 'value',
  source: [
    { label: 'Draft', value: 'draft' },
    { label: 'Approved', value: 'approved' },
    { label: 'Archived', value: 'archived' },
  ],
}

Use the object form when the visible label and stored value should differ.

Synchronize cell and dropdown templates

Set syncCellTemplate to true when dropdown options should reuse the resolved cell template. This is opt-in; without the flag, options keep their existing text-only rendering. Object option fields are available on the synthetic row model passed to the cell template, which is useful for avatars, badges, and other metadata-driven renderers.

const ownerType = new SelectTypePlugin()
ownerType.cellTemplate = ownerCellTemplate
ownerType.syncCellTemplate = true

const columnTypes = { ownerSelect: ownerType }
const columns = [
  {
    prop: 'owner',
    columnType: 'ownerSelect',
    labelKey: 'name',
    valueKey: 'name',
    source: [
      { name: 'Maya Chen', avatarIndex: 1 },
      { name: 'Elias Novak', avatarIndex: 2 },
    ],
  },
]

If the column also provides an explicit dropdown template, that template takes precedence.

Dynamic source

source can be a synchronous function when options depend on the current row or on external state passed through additionalData.

const columns = [
  {
    prop: 'city',
    columnType: 'select',
    labelKey: 'label',
    valueKey: 'value',
    source: ({ model, additionalData }) =>
      additionalData.citiesByCountry[model.country] ?? [],
  },
]

The resolver receives the current cell model, prop, column, indexes, and additionalData. Async loading is not supported by this API.