Radio editor

A short list of choices shown at once: one click picks and saves, the arrow keys move the choice, and the cell shows the option label.

Live demoRadio editor

Pick a plan with one click, or with the arrow keys.

Code for this demo

import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const data = makeRows(150).map((r, i) => ({ ...r, plan: ['free', 'pro', 'team'][i % 3], size: ['S', 'M', 'L', 'XL'][i % 4] }));
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 160 },
      { field: 'plan', header: h('Plan', '요금제'), width: 120, editable: true, editor: { type: 'radio', options: [
        { value: 'free', label: 'Free' }, { value: 'pro', label: 'Pro' }, { value: 'team', label: 'Team' }, { value: 'legacy', label: 'Legacy', disabled: true }] } },
      { field: 'size', header: h('Size', '사이즈'), width: 100, editable: true, singleClickEdit: true, editor: { type: 'radio', options: ['S', 'M', 'L', 'XL'] } },
    ],
    data, locale: ctx.lang, filterRow: true,
  });
  grid.on('cellValueChanged', e => ctx.log(`#${e.row.id} ${e.colId} = ${String(e.newValue)}`));
  text(ctx, h('Double-click a plan (or click a size once) and click a choice; ↓ ↑ and Enter work too. The filter row lists the labels.',
    '요금제를 더블클릭(사이즈는 한 번 클릭)하고 고르세요. ↓ ↑와 Enter도 됩니다. 필터 행에는 옵션 이름이 나옵니다.'));
  return grid;
}

editor: { type: 'radio', options } shows every choice at once under the cell, each with a radio mark. It is quicker than a drop-down for two to six choices such as sizes, plans or yes / maybe / no.

Basic use

{ field: 'plan', editable: true, editor: {
  type: 'radio',
  options: [
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro' },
    { value: 'team', label: 'Team' },
    { value: 'legacy', label: 'Legacy', disabled: true },   // shown greyed out
  ],
} }

Keyboard and mouse

Key	Does
Click an item	Pick it and save at once
↓ / ↑	Move the choice (disabled options are skipped)
Enter	Save the current choice and move down
A letter key (to open)	Opens on the first option that starts with it
Esc	Close without saving

Options

Name	Type	Description
`options`	`SelectOption[] \| (row) => SelectOption[]`	The choices, as for the select editor; a function of the row makes them depend on the row.

Display, paste and filters

The cell shows the option label; the value is stored.
Pasting takes a value or a label; others are skipped.
The column gets a list filter by label, like a select column.
For a true / false choice that flips with one click, the switch is simpler.