Switches and column checkboxes

A switch in the cell that flips with one click or Space between true / false or values like 'Y' / 'N', and a header checkbox that turns a whole column on or off.

Live demoSwitches

Y / N switches, a header checkbox, and filtered rows left alone.

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(200).map((r, i) => ({ ...r, useYn: i % 3 ? 'Y' : 'N', locked: i % 7 === 0 }));
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 160 },
      { field: 'status', header: h('Status', '상태'), width: 110 },
      { field: 'useYn', header: h('In use', '사용'), width: 110, headerCheckbox: true,
        editable: ({ row }) => !row.locked, editor: { type: 'toggle', on: 'Y', off: 'N' } },
      { field: 'active', header: h('Active', '활성'), type: 'boolean', width: 100, editable: true, headerCheckbox: true },
      { field: 'locked', header: h('Locked', '잠김'), type: 'boolean', width: 90 },
    ],
    data, locale: ctx.lang, filterRow: true,
  });
  grid.on('cellValueChanged', e => ctx.log(`#${e.row.id} ${e.colId} = ${String(e.newValue)}`));
  text(ctx, h('Click a switch, or press Space on it. Filter the status, then use the header checkbox: only the shown, unlocked rows change; Ctrl+Z undoes it.',
    '스위치를 누르거나 Space를 눌러 보세요. 상태로 거른 뒤 헤더 체크박스를 누르면 보이는 잠기지 않은 행만 바뀌고, Ctrl+Z로 되돌립니다.'));
  return grid;
}

editor: { type: 'toggle' } draws a switch in every cell. One click on the switch, or Space on the focused cell, flips it — no editor opens. By default it flips between true and false; on and off set other values, such as 'Y' / 'N' or 1 / 0 from a database.

Basic use

createGrid(el, {
  columns: [
    { field: 'useYn', header: 'In use', editable: true, editor: { type: 'toggle', on: 'Y', off: 'N' }, headerCheckbox: true },
    { field: 'active', header: 'Active', type: 'boolean', editable: true, headerCheckbox: true },   // ✓ / ✗, Space or double-click
  ],
  data: [{ useYn: 'Y', active: true }, { useYn: 'N', active: false }],
});

Options

Name	Type	Description
`editor: { type: 'toggle', on?, off? }`	`unknown`	The values for on (default true) and off (default false). A value that is neither shows as off and becomes on with a click.
`headerCheckbox (column)`	`boolean`	A checkbox in the header of a boolean or switch column. Checked when every shown editable cell is on, half-checked when some are; a click turns them all on (or off).

The header checkbox

It changes only rows that are shown: rows hidden by a filter, the quick search or a collapsed group are left alone.
Cells whose editable function says no are skipped (and not counted when it shows checked or half-checked).
All the changes are one step: Ctrl+Z right after the click undoes the whole column. cellValueChanged fires for each changed cell.
It follows edits, pastes, filters and new data by itself.

Keyboard, paste, filters and Excel

Action	Result
Click the switch	Flips the cell
Space on the focused cell	Flips the cell
Paste Y, N, true, false, 1, 0, yes, no	The on / off value
Filter	A list filter with the two values
Excel / CSV	The stored value (Y / N)

Questions about this page

How do I check every row of a column at once?

Add headerCheckbox: true to a boolean or switch column. Its header checkbox turns every shown, editable cell on or off; rows hidden by a filter are left as they are, and one Ctrl+Z undoes it.