Multi-select editor

Pick several values from a checkbox list with Select all and search; arrays stay arrays, text is joined with a separator, and filters match any chosen value.

Live demoMulti-select editor

Tags as arrays and as text, with search and a filter by any value.

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 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 } opens a checkbox list under the cell. People tick as many values as they like and save with Enter or Apply. A Select all line ticks or unticks every shown option, and a search box appears when there are more than seven options.

Basic use

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' }],
});

What gets stored

The cell had	Saved as
An array	An array of the chosen values, in option order
Text or blank	Text joined with the separator (default ', ')
Values that are not text (numbers)	An array

Keyboard and mouse

Key	Does
Click a line	Tick or untick it
↓ / ↑	Move the highlight
Space	Tick or untick the highlighted line (not while typing in the search box)
Enter or Apply	Save
Clear	Untick everything (save to empty the cell)
Esc	Close without saving

Options

Name	Type	Description
`options`	`SelectOption[] \| (row) => SelectOption[]`	The choices; disabled ones cannot be ticked.
`separator`	`string`	Joins text values (default ', '). Pasting splits on it, or on commas.

Display, paste and filters

The cell shows the labels joined with commas: VIP, New.
Paste VIP, new (labels or values, any case); one unknown value skips the whole cell.
The list filter lists each value once (not each combination), and a row passes when any of its values is ticked. The filter row's drop-down works the same way.

Questions about this page

How do I store several values in one cell?

Use editor: { type: 'multiSelect', options }. If the cell holds an array, the chosen values are saved as an array; otherwise as text joined with ', ' (or your separator).