Skip to content
ZenGrid

Async Values

Enterprise

Introduction

Section titled “Introduction”

Most editors offer a fixed list of choices. Async values let the premium richSelectEditor() fetch that list when the editor opens — from a server, a cache, or any promise — instead of hardcoding it. While the fetch is in flight the dropdown shows a Loading… placeholder; when it resolves, the list populates in place and the popup re-measures itself.

Point the column’s options at a getter instead of an array:

import { richSelectEditor } from '@zengrid/enterprise';


const grid = new Zengrid(mount, {
  columns: [
    richSelectEditor({
      field: 'owner', header: 'Assigned To',
      // Return a Promise of the choices — the dropdown loads them on open.
      options: () => fetch('/api/teammates').then((r) => r.json()),
      // Optional: map committed values to labels/colors for the cell display.
      displayOptions: teammates,
    }),
  ],
});

The three getter forms

Section titled “The three getter forms”

options accepts a static array or a getter, and the getter can hand its list back in whichever way suits your data layer:

Form Signature Use when
Array options: [...] The choices are known up front (no async).
Promise options: (params) => Promise<list> You already have a promise-based API (fetch, a client SDK).
Callback options: (params, success) => { …; success(list); } The values arrive through a callback / event, or you want to call success later.

The getter receives a params object — { value, rowData, column } — so the list can depend on the row being edited (e.g. members of that row’s team).

Options

Section titled “Options”

Everything on richSelectEditor() (searchable, display, allowEmpty, …) plus:

Option Type Purpose
options array | (params, success) => list | Promise<list> | void Static choices or an async getter (see above).
displayOptions RichSelectOptionInput[] Static options used only to render committed values in the cell (labels / colors / badges) when options is async. Omit to show the raw value.
loadingLabel string Text shown while the getter is pending (default Loading…).
cacheValues boolean Cache the first resolved list and reuse it on every reopen — no refetch, no Loading… flash (default true). The cache is per column, so set false for a row-dependent getter (otherwise the first row’s list is reused for every row) or to always reload.

The Assigned To column loads its teammate list from a Promise when you open the editor. Double-click a cell: the dropdown shows Loading… for ~600ms, then the searchable list appears. Pick a person — the cell shows their name + glyph via displayOptions.

Next

Section titled “Next”