Pasting more rows than there are

With pasteAddsRows, lines pasted past the last row become new rows made by your function, checked by the column rules, tracked as created and undone together with the paste.

Live demoPaste adds rows

Paste 10 lines from Excel into a 3-row grid.

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 });
  let next = 100;
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'id', header: 'ID', type: 'number', width: 70 },
      { field: 'name', header: h('Name', '이름'), width: 170, editable: true, required: true },
      { field: 'qty', header: h('Qty', '수량'), type: 'number', width: 100, editable: true, editor: { type: 'number', min: 0 } },
      { field: 'city', header: h('City', '도시'), width: 140, editable: true },
    ],
    data: [{ id: 1, name: 'Kim', qty: 3, city: 'Seoul' }, { id: 2, name: 'Lee', qty: 5, city: 'Busan' }, { id: 3, name: 'Park', qty: 1, city: 'Incheon' }],
    locale: ctx.lang, getRowId: r => String(r.id),
    pasteAddsRows: () => ({ id: ++next }),
  });
  grid.on('paste', e => ctx.log(JSON.stringify(e)));
  const lines = ['Choi\t2\tDaegu', 'Jung\t7\tGwangju', 'Kang\tabc\tSuwon', 'Cho\t4\tUlsan', 'Yoon\t9\tJeju', 'Jang\t1\tSejong', 'Lim\t6\tPohang'].join('\n');
  button(ctx, h('Paste 7 lines at row 3', '3행에 7줄 붙여넣기'), () => {
    grid.setRange({ start: { rowIndex: 2, colId: 'name' }, end: { rowIndex: 2, colId: 'name' } });
    grid.pasteText(lines);
  });
  button(ctx, h('Undo', '실행 취소'), () => grid.undo());
  button(ctx, h('Changes', '변경 내역'), () => { const m = grid.getModifiedRows(); ctx.log(`created ${m.created.length}, updated ${m.updated.length}`); });
  text(ctx, h('Or copy rows from Excel and press Ctrl+V on a cell near the end. "abc" is not a number, so it is skipped.',
    '엑셀에서 행을 복사해 끝쪽 셀에서 Ctrl+V를 눌러도 됩니다. "abc"는 숫자가 아니라 건너뜁니다.'));
  return grid;
}

By default a paste fills the rows below the focused cell and stops at the last row. People who copy a block from a spreadsheet often have more lines than that; pasteAddsRows makes the rest into new rows at the end.

let next = 1000;
createGrid(el, {
  columns: [
    { field: 'id' },                                   // not editable: filled by the function below
    { field: 'name', editable: true, required: true },
    { field: 'qty', type: 'number', editable: true, editor: { type: 'number', min: 0 } },
  ],
  data,
  getRowId: r => String(r.id),
  pasteAddsRows: ({ index }) => ({ id: ++next, status: 'draft' }),   // or simply true
});

Option

Name	Type	Description
`pasteAddsRows`	`boolean \| ({ index }) => Row`	true adds empty rows; a function makes each new row (an id, defaults). index counts the new rows from 0.

How the new rows are filled

The lines that fit fill the existing rows below the focused cell, as before.
For each line left over, a new row is made (by your function, or empty).
Each value goes through the same reading and rules as a normal paste: numbers and dates are parsed, select options matched, min / max, required, unique and validate checked. Values that do not pass are skipped and counted.
Columns that are not editable stay as your function made them.
The new rows are added at the end of the data and marked as created (getModifiedRows().created, the created-row mark).

Result and undo

const r = grid.pasteText('Kim\t10\nLee\t20\nPark\tabc');
// { changed: 5, skipped: 1, added: 2 }   — 'abc' is not a number
grid.undo();   // the pasted values and the two new rows go away together

Ctrl+V and pasteText() both do it; the paste event reports added.
A single copied value filling a selected range never adds rows.
With sorting or filters on, the new rows appear where the sort puts them (and may be filtered out).
Not with a datasource (the server owns the rows).

Questions about this page

How do I paste rows from Excel into a grid as new rows?

Turn on pasteAddsRows (true, or a function that makes each new row). Lines beyond the last row become new rows; one Ctrl+Z takes back the paste and the new rows.