Row selection

import { createGrid, type GridApi } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { button, select, separator, 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
      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');

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