라디오 편집기

선택지가 한눈에 보이는 라디오 편집기: 한 번 누르면 고르고 저장, 화살표로 선택 이동, 셀에는 옵션 이름이 보입니다.

실행 예제라디오 편집기

요금제를 한 번 클릭이나 화살표로 고릅니다.

이 데모의 코드

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 }는 셀 아래에 모든 선택지를 라디오 표시와 함께 한 번에 보여 줍니다. 크기, 요금제, 예/보류/아니오처럼 선택지가 2~6개일 때 드롭다운보다 빠릅니다.

기본 사용

{ 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
  ],
} }

키보드와 마우스

키	동작
항목 클릭	고르고 바로 저장
↓ / ↑	선택 이동(사용 불가 옵션은 건너뜀)
Enter	현재 선택을 저장하고 아래로
글자 키(열 때)	그 글자로 시작하는 첫 옵션에서 열림
Esc	저장하지 않고 닫기

옵션

이름	타입	설명
`options`	`SelectOption[] \| (row) => SelectOption[]`	select 편집기와 같은 선택지. 행을 받는 함수면 행에 따라 바뀝니다.

표시·붙여넣기·필터

셀에는 옵션 이름이 보이고 값이 저장됩니다.
붙여넣기는 값이나 이름을 받고, 그 밖은 건너뜁니다.
select 컬럼처럼 이름으로 된 값 목록 필터가 붙습니다.
참/거짓을 한 번 클릭으로 바꾸려면 스위치가 더 간단합니다.