여러 값 선택 편집기

전체 선택과 검색이 있는 체크박스 목록으로 여러 값을 고르고, 배열은 배열로, 텍스트는 구분자로 이어 저장하며, 필터는 고른 값 중 하나라도 맞으면 통과합니다.

실행 예제여러 값 선택 편집기

배열·텍스트 태그, 검색, 값 하나라도 맞으면 걸리는 필터.

이 데모의 코드

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 TAGS = [{ value: 'vip', label: 'VIP' }, { value: 'new', label: h('New', '신규') }, { value: 'b2b', label: h('Wholesale', '도매') },
    { value: 'abroad', label: h('Overseas', '해외') }, { value: 'late', label: h('Pays late', '연체') }, { value: 'gift', label: h('Gift', '선물') },
    { value: 'event', label: h('Event', '이벤트') }, { value: 'mobile', label: h('Mobile', '모바일') }];
  const data = makeRows(150).map((r, i) => {
    const tags = TAGS.filter((_, k) => (i >> k) & 1).map(t => t.value).slice(0, 3);
    return { ...r, tags, labels: tags.join(', ') };
  });
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 150 },
      { field: 'tags', header: h('Tags (array)', '태그(배열)'), width: 220, editable: true, editor: { type: 'multiSelect', options: TAGS } },
      { field: 'labels', header: h('Tags (text)', '태그(텍스트)'), width: 220, editable: true, editor: { type: 'multiSelect', options: TAGS } },
    ],
    data, locale: ctx.lang, filterRow: true,
  });
  grid.on('cellValueChanged', e => ctx.log(`${e.colId} = ${JSON.stringify(e.newValue)}`));
  text(ctx, h('Double-click tags: tick with clicks or Space, search when the list is long, Apply or Enter to save. The filter row passes rows with any chosen tag.',
    '태그를 더블클릭하고 클릭이나 Space로 체크, 목록이 길면 검색, 적용이나 Enter로 저장합니다. 필터 행은 고른 태그가 하나라도 있으면 보여 줍니다.'));
  return grid;
}

editor: { type: 'multiSelect', options }는 셀 아래에 체크박스 목록을 엽니다. 원하는 만큼 체크하고 Enter나 적용으로 저장합니다. 전체 선택 줄은 보이는 옵션을 모두 체크하거나 해제하고, 옵션이 일곱 개를 넘으면 검색칸이 나옵니다.

기본 사용

const TAGS = [{ value: 'vip', label: 'VIP' }, { value: 'new', label: 'New' }, { value: 'b2b', label: 'Wholesale' }];
createGrid(el, {
  columns: [
    { field: 'tags', editable: true, editor: { type: 'multiSelect', options: TAGS } },              // ['vip', 'new']
    { field: 'labels', editable: true, editor: { type: 'multiSelect', options: TAGS, separator: ' / ' } }, // 'vip / new'
  ],
  data: [{ tags: ['vip'], labels: 'new' }],
});

저장되는 값

원래 값	저장 모양
배열	고른 값의 배열(옵션 순서)
글자 또는 빈 값	구분자(기본 ', ')로 이은 글자
글자가 아닌 값(숫자)	배열

키보드와 마우스

키	동작
줄 클릭	체크 또는 해제
↓ / ↑	강조 이동
Space	강조된 줄 체크·해제(검색칸에 입력 중일 때는 제외)
Enter 또는 적용	저장
지우기	모두 해제(저장하면 셀이 비워짐)
Esc	저장하지 않고 닫기

옵션

이름	타입	설명
`options`	`SelectOption[] \| (row) => SelectOption[]`	선택지. 사용 불가 옵션은 체크할 수 없습니다.
`separator`	`string`	텍스트 값을 이을 구분자(기본 ', '). 붙여넣기는 이것이나 쉼표로 나눕니다.

표시·붙여넣기·필터

셀에는 이름이 쉼표로 이어져 보입니다: VIP, New.
VIP, new처럼 붙여넣을 수 있고(이름이나 값, 대소문자 무관), 모르는 값이 하나라도 있으면 그 셀은 건너뜁니다.
값 목록 필터에는 조합이 아니라 값마다 한 줄씩 나오고, 셀의 값 중 하나라도 체크돼 있으면 통과합니다. 필터 행 드롭다운도 같습니다.

이 페이지에 대한 질문

한 셀에 여러 값을 저장하려면?

editor: { type: 'multiSelect', options }를 쓰세요. 셀이 배열이면 고른 값이 배열로, 아니면 ', '(또는 지정한 구분자)로 이은 글자로 저장됩니다.