Row selection

With rowSelection the grid adds a checkbox column. Click selects a row, Ctrl/⌘-click toggles, Shift-click selects a range, the header checkbox selects…

Live demoRow selection

Single or multiple selection with checkboxes, Ctrl and Shift.

Code for this demo

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

With rowSelection the grid adds a checkbox column. Click selects a row, Ctrl/⌘-click toggles, Shift-click selects a range, the header checkbox selects every filtered row, and Space toggles the focused row. isRowSelectable decides which rows can be checked, and headerCheckbox: false hides the select-all box.

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();