선택 목록 편집기와 연쇄 선택

이름·사용 불가 옵션·안내 문구가 있는 고정 목록 select. 행에서 options를 만들면 종속 목록이 되고, dependsOn은 맞지 않게 된 하위 값을 비웁니다.

실행 예제선택 목록과 연쇄 선택

국가 → 도시: 도시 목록이 국가를 따르고, 맞지 않으면 비워집니다.

이 데모의 코드

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

const CITIES: Record<string, string[]> = { Korea: ['Seoul', 'Busan'], Japan: ['Tokyo', 'Osaka'], France: ['Paris', 'Lyon'] };
const DISTRICTS: Record<string, string[]> = { Seoul: ['Gangnam', 'Mapo', 'Jongno'], Busan: ['Haeundae', 'Suyeong'], Tokyo: ['Shibuya', 'Shinjuku'], Osaka: ['Namba', 'Umeda'], Paris: ['Le Marais', 'Montmartre'], Lyon: ['Presqu’île'] };
export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const countries = Object.keys(CITIES);
  const data = makeRows(150).map((r, i) => {
    const country = countries[i % 3];
    const city = CITIES[country][i % 2] ?? CITIES[country][0];
    return { ...r, country, city, district: i % 4 ? DISTRICTS[city][0] : null, status: ['open', 'hold', 'open'][i % 3] };
  });
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 140 },
      { field: 'status', header: h('Status', '상태'), width: 140, editable: true, editor: { type: 'select', options: [
        { value: 'open', label: h('Open', '진행') }, { value: 'hold', label: h('On hold', '보류') }, { value: 'closed', label: h('Closed (admin)', '종료(관리자)'), disabled: true }] } },
      { field: 'country', header: h('Country', '국가'), width: 120, editable: true, editor: { type: 'select', options: countries } },
      { field: 'city', header: h('City', '도시'), width: 120, editable: true, dependsOn: ['country'],
        editor: { type: 'select', placeholder: h('City…', '도시 선택'), options: (row: Row) => CITIES[row.country] ?? [] } },
      { field: 'district', header: h('District', '구'), width: 140, editable: true, dependsOn: ['city'],
        editor: { type: 'select', placeholder: h('District…', '구 선택'), options: (row: Row) => DISTRICTS[row.city] ?? [] } },
    ],
    data, locale: ctx.lang,
  });
  grid.on('cellValueChanged', e => ctx.log(`#${e.row.id} ${e.colId}: ${String(e.oldValue)} → ${String(e.newValue)}`));
  text(ctx, h('Change a country: a city that does not fit is cleared, and its district too. Ctrl+Z brings all back at once.',
    '국가를 바꿔 보세요. 맞지 않는 도시와 그 구가 비워지고, Ctrl+Z 한 번으로 모두 돌아옵니다.'));
  separator(ctx);
  button(ctx, h('Undo', '실행 취소'), () => grid.undo());
  return grid;
}

editor: { type: 'select', options }는 브라우저 기본 드롭다운으로 고정 선택지를 엽니다. 옵션은 값 그대로 또는 { value, label, disabled }이고, 셀에는 이름이 보이고 값이 저장됩니다. 목록이 길면 콤보 편집기, 선택지가 몇 개뿐이면 라디오 편집기도 보세요.

기본 사용

{ field: 'status', editable: true, editor: {
  type: 'select',
  placeholder: 'Choose…',                  // an empty first choice, shown for blank cells
  options: [
    { value: 'open', label: 'Open' },
    { value: 'hold', label: 'On hold' },
    { value: 'closed', label: 'Closed (admin only)', disabled: true },   // shown, cannot be chosen or pasted
  ],
} }

옵션

이름	타입	설명
`options`	`SelectOption[] \| (row) => SelectOption[]`	선택지. 행을 받는 함수로 주면 같은 행의 다른 값에 따라 바뀌는 목록이 됩니다(편집기를 열 때마다 호출).
`placeholder`	`string`	이 글자로 빈 첫 항목을 넣습니다. 빈 셀은 첫 옵션 대신 이 항목에서 열리고, 이것을 고르면 null이 저장됩니다.
`dependsOn (column)`	`string[]`	이 컬럼의 옵션이 따르는 필드. 그 값이 바뀌면(편집, 붙여넣기, 채우기) 옵션에 없게 된 값이 같은 실행 취소 단계에서 비워집니다.

연쇄 선택(국가 → 도시 → 구)

const CITIES = { KR: ['Seoul', 'Busan'], JP: ['Tokyo', 'Osaka'] };
const DISTRICTS = { Seoul: ['Gangnam', 'Mapo'], Busan: ['Haeundae'], Tokyo: ['Shibuya'], Osaka: ['Namba'] };

const columns = [
  { field: 'country', editable: true, editor: { type: 'select', options: Object.keys(CITIES) } },
  { field: 'city', editable: true, dependsOn: ['country'],
    editor: { type: 'select', placeholder: 'City…', options: row => CITIES[row.country] ?? [] } },
  // clearing a city clears its district too: the chain follows on
  { field: 'district', editable: true, dependsOn: ['city'],
    editor: { type: 'select', placeholder: 'District…', options: row => DISTRICTS[row.city] ?? [] } },
];

국가를 JP로 바꾸면 Seoul 도시와 그 구가 비워지고, Ctrl+Z 한 번으로 셋 다 돌아옵니다.
여전히 맞는 값은 남습니다. 같은 국가를 다시 고르거나 그 도시가 있는 국가로 바꾸면 유지됩니다.
붙여넣기와 채우기에도 적용되어, 국가 컬럼을 붙여넣어도 틀린 도시가 남지 않습니다.
dependsOn 없이도 목록은 행을 따르지만 기존 값은 그대로 둡니다. 하위 값을 남겨도 될 때 그렇게 쓰세요.

붙여넣기와 필터

붙여넣기는 값이나 이름을 대소문자 상관없이 받고, 옵션에 없거나 사용 불가인 값은 건너뛰어 셉니다.
select 컬럼은 컬럼 메뉴와 필터 행에 옵션 이름이 옵션 순서대로 나오는 값 목록 필터가 붙습니다.

이 페이지에 대한 질문

국가에 따라 바뀌는 도시 목록을 만들려면?

도시 컬럼에 options: row => CITIES[row.country]와 dependsOn: ['country']를 주세요. 국가가 바뀌면 새 목록에 없는 도시가 같은 실행 취소 단계에서 비워집니다.