행 선택

rowSelection을 주면 체크박스 컬럼이 추가됩니다. 클릭하면 그 행만 선택되고, Ctrl/⌘ 클릭은 선택을 토글하고, Shift 클릭은 범위를 선택합니다. 헤더 체크박스는 필터된 행 전체를 선택하고, Space는 포커스된 행을 토글합니다. isRowSelectable로…

실행 예제행 선택

체크박스나 Ctrl, Shift로 한 행 또는 여러 행을 선택합니다.

이 데모의 코드

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

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const data = makeRows(5000);
  let grid: GridApi;
  const create = (mode: 'single' | 'multiple') => {
    grid?.destroy();
    grid = createGrid(ctx.host, {
      columns: demoColumns(lang),
      data,
      rowSelection: mode,
      getRowId: row => String(row.id), // keeps the selection when data is replaced
      isRowSelectable: row => row.active, // inactive rows show a disabled checkbox
      locale: lang,
    });
    grid.on('selectionChange', e => {
      const ids = e.selected.slice(0, 8).map(r => r.id).join(', ');
      ctx.log(`selectionChange → ${e.selected.length} ${e.selected.length > 8 ? `[${ids}, …]` : `[${ids}]`}`);
    });
  };
  create('multiple');

  text(ctx, tr(lang, { en: 'Inactive people cannot be checked (isRowSelectable); select-all skips them.', ko: '비활성 사용자는 체크할 수 없고(isRowSelectable), 전체 선택에서도 빠집니다.' }));

  select(ctx, tr(lang, { en: 'Mode', ko: '모드' }), [['multiple', tr(lang, { en: 'Multiple', ko: '다중' })], ['single', tr(lang, { en: 'Single', ko: '단일' })]], 'multiple',
    v => create(v));
  separator(ctx);
  button(ctx, tr(lang, { en: 'Select all', ko: '전체 선택' }), () => grid.selectAll());
  button(ctx, tr(lang, { en: 'Clear', ko: '선택 해제' }), () => grid.deselectAll());
  button(ctx, tr(lang, { en: 'Log selected names', ko: '선택한 이름 출력' }), () =>
    ctx.log(grid.getSelectedRows().slice(0, 10).map(r => r.name).join(', ') || '—'));
}

rowSelection을 주면 체크박스 컬럼이 추가됩니다. 클릭하면 그 행만 선택되고, Ctrl/⌘ 클릭은 선택을 토글하고, Shift 클릭은 범위를 선택합니다. 헤더 체크박스는 필터된 행 전체를 선택하고, Space는 포커스된 행을 토글합니다. isRowSelectable로 체크할 수 있는 행을 정하고, headerCheckbox: false로 전체 선택 상자를 숨길 수 있습니다.

const grid = createGrid(el, { columns, data, rowSelection: 'multiple', getRowId: r => r.id });
grid.on('selectionChange', e => console.log(e.selected.length));
grid.getSelectedRows();
grid.selectAll();   // selects the filtered rows
grid.deselectAll();