Checking only some rows

validate() with rows, columns or only changed rows, and validateCell() for one cell, so a save button checks just what will be sent.

Live demoChecking some rows

Save checks only the rows you changed.

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(300).map((r, i) => ({ ...r, email: i % 37 === 0 ? '' : r.email }));
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 170, editable: true, required: true },
      { field: 'email', header: h('Email', '이메일'), width: 260, editable: true, required: true, validate: v => (!v || String(v).includes('@') ? true : h('Needs an @', '@가 필요합니다')) },
      { field: 'q1', header: h('Q1', '1분기'), type: 'number', width: 120, editable: true, editor: { type: 'number', min: 0, max: 100000 } },
    ],
    data, locale: ctx.lang,
  });
  button(ctx, h('Check everything', '전체 검사'), () => ctx.log(h(`all rows: ${grid.validate().length} problems`, `전체: 문제 ${grid.validate().length}개`)));
  button(ctx, h('Save (check changed rows only)', '저장(바꾼 행만 검사)'), () => {
    const problems = grid.validate({ changedOnly: true });
    if (!problems.length) { ctx.log(h('saved', '저장했습니다')); grid.commitChanges(); return; }
    const p = problems[0];
    grid.scrollToRow(Math.max(0, p.rowIndex));
    ctx.log(`${problems.length}: ${p.colId} — ${p.message}`);
  });
  text(ctx, h('Some rows already lack an email. Edit a few cells (try an email without @), then Save: only your changes are checked.',
    '몇몇 행은 원래 이메일이 비어 있습니다. 셀 몇 개를 고치고(@ 없는 이메일도) 저장을 누르면 바꾼 것만 검사합니다.'));
  return grid;
}

validate() checks every editable cell against its column rules (required, unique, validate, a number editor's min / max). With options it checks part of the grid — typically only the rows that will be saved.

saveButton.onclick = async () => {
  const problems = grid.validate({ changedOnly: true });   // created and edited rows only
  if (problems.length) {
    const p = problems[0];
    grid.scrollToRow(p.rowIndex);
    toast(`${p.colId}: ${p.message}`);
    return;
  }
  await saveChanges(grid.getModifiedRows());
  grid.commitChanges();
};

Options

Name	Type	Description
`rows`	`Row[]`	Only these row objects.
`colIds`	`string[]`	Only these columns (hidden columns count: their values are saved too).
`changedOnly`	`boolean`	Only rows that were added or changed since the last commitChanges().
`validateCell(row, colId)`	`string \| null`	The message for one cell, or null when it passes (or cannot be edited).

The result

Each problem is { row, rowIndex, colId, message }; rowIndex is the place on screen, or -1 when the row is filtered out. Options combine: { changedOnly: true, colIds: ["email"] } checks emails of changed rows.

grid.on('cellValueChanged', e => {
  const message = grid.validateCell(e.row, 'email');
  if (message) showWarning(e.rowIndex, message);
});