I have a Vue.js / Tabulator setup where you can add new rows to the bottom of the table, as well as do range selection and copy/paste. Problem is that currently it’s not possible to paste into newly added rows. It gives the warning No bounds defined on range in the console when I try it, without pasting the data.

Here’s my table initialisation code:

onMounted(() => {
  const options = {
    // minimum config
    columns: columnsCopy,
    data: dataCopy,
    reactiveData: true,
    layout: "fitColumns",
    editTriggerEvent: "dblclick",
    history: true,
    headerSortClickElement: "icon",
    sortMode: typeof props.data === "string" ? "remote" : "local",
    filterMode: typeof props.data === "string" ? "remote" : "local",
    minHeight: props.minHeight,
    maxHeight: props.maxHeight,
    dataTree: true,

    // validation
    validationMode: "highlight",

    // range selection
    selectableRange: true,
    selectableRangeColumns: true,
    selectableRangeRows: true,
    rowHeader: {
      resizable: false,
      frozen: true,
      width: 50,
      hozAlign: "center",
      formatter: "rownum",
      field: "rownum",
      accessorClipboard: "rownum",
    },

    // clipboard
    clipboard: true,
    clipboardCopyRowRange: "range",
    clipboardCopyStyled: false,
    clipboardCopyConfig: {
      rowHeaders: false,
      columnHeaders: false,
    },
    clipboardPasteParser: "range",
    clipboardPasteAction: (data: Array<number>): Array<number> => {
      if (!isEditing.value) {
        return [];
      }

      let rows = [];
      const range = table.modules.selectRange.activeRange;

      if (range) {
        const bounds = range.getBounds();
        const singleCell = bounds.start === bounds.end;

        if (bounds.start) {
          rows = table.rowManager.activeRows.slice();

          const startRow = rows.indexOf(bounds.start.row);
          const rowWidth = singleCell
            ? data.length
            : rows.indexOf(bounds.end.row) - startRow + 1;

          if (startRow > -1) {
            table.blockRedraw();

            rows = rows.slice(startRow, startRow + rowWidth);

            rows.forEach((row: { getCell: Function }, i: number) => {
              Object.entries(data[i % data.length]).forEach(
                ([field, value]) => {
                  row.getCell(field)?.setValue(value);
                }
              );
            });

            table.restoreRedraw();
          }
        }
      }

      return rows;
    }
  };

  table = reactive(
    new Tabulator(document.querySelector("#table"), options)
  );
});

And here’s my addRow function (it gets triggered by a button click). I suspect that this is where I’m messing it up, though I’m not sure. I create a empty row by from an object that has all of the columns as keys and undefined as the value, except for the id, which is assigned a random negative number.

const addRow = () => {
  const min = -1;
  const max = -10000;

  const keys = columnsCopy.map((v) => v.field);
  const row = {
    ...Object.fromEntries(keys.map((k) => [k, undefined])),
    id: Math.floor(Math.random() * (min - max + 1)) + max,
  };

  table.addRow(Object.assign({}, row));

  if (changelog.position < changelog.log.length) {
    changelog.log = changelog.log.slice(0, changelog.position);
  }

  changelog.log.push({
    type: "rowAdd",
    row: dataCopy.length + 1,
    newValue: row.id,
  });

  changelog.position++;
  setHistorySize();
};

If anyone can give me any advice, I’d super appreciate it because I don’t know what to do anymore.