스위치와 컬럼 체크박스

한 번 클릭이나 Space로 true/false 또는 'Y'/'N' 같은 값을 오가는 셀 스위치와, 컬럼 전체를 켜고 끄는 헤더 체크박스.

실행 예제스위치

Y/N 스위치, 헤더 체크박스, 필터로 숨은 행은 그대로.

이 데모의 코드

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' }는 셀마다 스위치를 그립니다. 스위치를 한 번 누르거나 포커스된 셀에서 Space를 누르면 바로 바뀌고, 편집기는 열리지 않습니다. 기본은 true·false이고, on·off로 'Y'·'N'이나 데이터베이스의 1·0 같은 값을 정합니다.

기본 사용

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

옵션

이름	타입	설명
`editor: { type: 'toggle', on?, off? }`	`unknown`	켜짐(기본 true)과 꺼짐(기본 false) 값. 둘 다 아닌 값은 꺼짐으로 보이고, 누르면 켜짐이 됩니다.
`headerCheckbox (column)`	`boolean`	참/거짓·스위치 컬럼 헤더의 체크박스. 보이는 편집 가능한 셀이 모두 켜져 있으면 체크, 일부면 반쯤 체크로 보이고, 누르면 모두 켜거나 끕니다.

헤더 체크박스

보이는 행만 바꿉니다. 필터·빠른 검색·접힌 그룹으로 숨은 행은 그대로입니다.
editable 함수가 거부하는 셀은 건너뛰고, 체크 상태를 정할 때도 셈하지 않습니다.
모든 변경이 한 단계라서 누른 직후 Ctrl+Z로 컬럼 전체가 되돌아갑니다. 바뀐 셀마다 cellValueChanged가 발생합니다.
편집·붙여넣기·필터·새 데이터에 맞춰 상태가 저절로 바뀝니다.

키보드·붙여넣기·필터·엑셀

동작	결과
스위치 클릭	셀 값을 바꿈
포커스된 셀에서 Space	셀 값을 바꿈
Y, N, true, false, 1, 0, yes, no 붙여넣기	켜짐·꺼짐 값으로
필터	두 값의 값 목록 필터
엑셀·CSV	저장된 값(Y / N)

이 페이지에 대한 질문

컬럼의 모든 행을 한 번에 체크하려면?

참/거짓·스위치 컬럼에 headerCheckbox: true를 주세요. 헤더 체크박스가 보이는 편집 가능한 셀을 모두 켜고 끄며, 필터로 숨은 행은 그대로이고 Ctrl+Z 한 번으로 되돌아갑니다.