Rows

This section covers all information about row management.

Upgrades on methods and event function signatures
If you are migrating from previous versions, it is essential to note that there are significant changes to the rows events and methods, including changes their function signatures.

Documentation

Methods

The following methods interact with the rows programmatically.
MethodDescription
getHeight Get the row height.
getHeight(rowNumber?: Number) => number
setHeight Set the row height.
setHeight(rowNumber: Number, height: Number) => void
getRow Get the row settings by number.
getRow(rowNumber: Number) => Object
moveRow Change the position of a row.
moveRow(rowNumber: Number, newPositionNumber: Number) => void
insertRow Create one or multiple new rows.
@param {number|number[]} - number of rows or rows definitions.
@param {number?} rowNumber - The new row reference position | null refers to the last row in the spreadsheet
@param {boolean?} insertBefore - The new row(s) should be included before or after the rowNumber defined
insertRow(rows?: Number|Object[], rowNumber?: Number, insertBefore?: Boolean) => void
deleteRow Delete one or more rows.
@param {number|number[]} rowNumber - Row number or list of row numbers to delete.
@param {number} numOfRows - Number of rows to be excluded from the define row reference
deleteRow(rowNumber: Number|Number[], numOfRows?: Number) => void;
showRow Show a row by number.
@param {number} rowNumber - Show the row by its number
showRow(rowNumber: Number) => void
hideRow Hide a row by number.
@param {number} rowNumber - Hide the row by its number
hideRow(rowNumber: Number) => void


Events

There are several events related to the row in your spreadsheet. There are a few onbefore events to intercept, validate or cancel a user action.
EventDescription
oncreaterow After a new row is inserted.
oncreaterow(worksheet: Object, rowNumber: Number, tr: HTMLElement)
onbeforeinsertrow Before a new row is inserted. Return false to cancel the user action.
onbeforeinsertrow(worksheet: Object, rows: Object[]) => Boolean | Object[] | void
oninsertrow After a new row is inserted.
oninsertrow(worksheet: Object, rows: Object[]) => void
onbeforedeleterow Before a row is deleted. Return false to cancel the user action.
onbeforedeleterow(worksheet: Object, rows: Number[]) => Number[] | Boolean | void
ondeleterow After a row is deleted.
ondeleterow(worksheet: Object, rows: Number[]) => void
onmoverow After a row is moved to a new position.
onmoverow(worksheet: Object, origin: Number, destination: Number) => void
onresizerow After the height changes for one or more rows.
onresizerow(worksheet: Object, row: Mixed, height: Mixed, oldHeight: Mixed) => void
onchangerowvisibility When the visibility of rows changes.
onchangerowvisibility(worksheet: Object, state: boolean: affected: []]) => void


Initial Settings

The following row-related properties are available through the spreadsheet initialization.
PropertyDescription
allowInsertRow: booleanEnable the user to enter new rows. Default: true
allowManualInsertRow: booleanA new row is automatically inserted when the user presses the enter key in the last row. Default: true
allowDeleteRow: booleanAllow the user to delete rows. Default: true
rowDrag: booleanAllow the user to change the position of one row by dragging and dropping. Default: true
rowResize: booleanAllow the user to resize rows. Default: true
defaultRowHeight: numberThe default row height.
minSpareRows: numberThe mandatory number of blank rows at the end of the spreadsheet. Default: none.


Available properties

It is possible to initialize the spreadsheet with a custom id, text and height using the following properties:
PropertyDescription
id: number Unique identifier for the row, which can be used to synchronize the content with a database.
height: number The height of the row in pixels.
title: string The title or name of the row.
visible: boolean Determines whether the row is visible or not.
style: string Deprecated. Style to TR elements should be added using oncreaterow.
group: number The number of rows that this row is grouped with.
state: boolean The state of the row group (collapsed or expanded).
readOnly: boolean Determines whether the row is read-only or not.



Examples

A basic spreadsheet with a few programmatic methods available.



  1. Click to insert a new blank row at the end of the spreadsheet
  2. Click to insert two new blank rows at the beginning of the spreadsheet
  3. Click to insert a new row with pre-populated values at the end of the spreadsheet
  4. Click to delete the last row
  5. Click to move the first row to the third position
  6. Hide the first row
  7. Show the first row


JavaScript example

<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="spreadsheet"></div>

<ol class='example' style='cursor:pointer;'>
    <li><a onclick="spreadsheet[0].insertRow()">Click to insert a new blank row at the end of the spreadsheet</a></li>
    <li><a onclick="spreadsheet[0].insertRow(2, 0, 1);">Click to insert two new blank rows at the beginning of the spreadsheet</a></li>
    <li><a onclick="spreadsheet[0].insertRow([{ data: ['0.99', '1.22', '3.11', '2.21' ]}]);">Click to insert a new row with pre-populated values at the end of the spreadsheet</a></li>
    <li><a onclick="spreadsheet[0].deleteRow();">Click to delete the last row</a></li>
    <li><a onclick="spreadsheet[0].moveRow(0, 2);">Click to move the first row to the third position</a></li>
    <li><a onclick="spreadsheet[0].hideRow(0);">Hide the first row</a></li>
    <li><a onclick="spreadsheet[0].showRow(0);">Show the first row</a></li>
</ol>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MTVjYzI5YTAwYTkzYTZiZTEzMThkYTg4Zjk1NGNjODg4ODMwNzU4YzYwMmFhYzI1MGNhNjI0NWQ0ZTU4YjVkZTc4ZDc0OTMxNTgyZDdjMWUzOGE5MDE5YTdkNTY5NjZmNjUxMjk2YWNjMjYzNjliZDQyMzE3ZTNlYTE1NGFlYTYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNRGt5TWpZMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create the spreadsheet
var spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['US', 'Cheese', 1000 ],
            ['CA', 'Apples', 1200 ],
            ['CA', 'Carrots', 2000 ],
            ['BR', 'Oranges', 3800 ],
        ],
        worksheetName: 'Row management',
    }],
});
</script>
</html>

React example

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";

const license = 'MTVjYzI5YTAwYTkzYTZiZTEzMThkYTg4Zjk1NGNjODg4ODMwNzU4YzYwMmFhYzI1MGNhNjI0NWQ0ZTU4YjVkZTc4ZDc0OTMxNTgyZDdjMWUzOGE5MDE5YTdkNTY5NjZmNjUxMjk2YWNjMjYzNjliZDQyMzE3ZTNlYTE1NGFlYTYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNRGt5TWpZMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Data
    const data = [
        ['US', 'Cheese', 1000 ],
        ['CA', 'Apples', 1200 ],
        ['CA', 'Carrots', 2000 ],
        ['BR', 'Oranges', 3800 ],
    ];
    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license}>
                <Worksheet minDimensions={[6,6]} worksheetName="Row management" />
            </Spreadsheet>
            <ol class='example' style={{ cursor: 'pointer' }}>
                <li><a onClick={() => spreadsheet.current[0].insertRow()}>
                    Click to insert a new blank row at the end of the spreadsheet
                </a></li>
                <li><a onClick={() => spreadsheet.current[0].insertRow(2, 0, 1)}>
                    Click to insert two new blank rows at the beginning of the spreadsheet
                </a></li>
                <li><a onClick={() => spreadsheet.current[0].insertRow([{ data: [ '0.99', '1.22', '3.11', '2.21' ]}])}>
                    Click to insert a new row with pre-populated values at the end of the spreadsheet
                </a></li>
                <li><a onClick={() => spreadsheet.current[0].deleteRow()}>
                    Click to delete the last row
                </a></li>
                <li><a onClick={() => spreadsheet.current[0].moveRow(0, 2)}>
                    Click to move the first row to the third position
                </a></li>
                <li><a onClick={() => spreadsheet.current[0].hideRow(0)}>
                    Hide the first row
                </a></li>
                <li><a onClick={() => spreadsheet.current[0].showRow(0)}>
                    Show the first row
                </a></li>
            </ol>
        </>
    );
}

Vue example

<template>
    <Spreadsheet ref="spreadsheet" :license="license">
        <Worksheet :data="data" />
    </Spreadsheet>
    <ol class='example' style='cursor:pointer;'>
        <li><a @click="this.$refs.spreadsheet.current[0].insertRow()">
            Click to insert a new blank row at the end of the spreadsheet
        </a></li>
        <li><a @click="this.$refs.spreadsheet.current[0].insertRow(2, 0, 1)">
            Click to insert two new blank rows at the beginning of the spreadsheet
        </a></li>
        <li><a @click="this.$refs.spreadsheet.current[0].insertRow([{ data: [ '0.99', '1.22', '3.11', '2.21' ]}])">
            Click to insert a new row with pre-populated values at the end of the spreadsheet
        </a></li>
        <li><a @click="this.$refs.spreadsheet.current[0].deleteRow()">
            Click to delete the last row
        </a></li>
        <li><a @click="this.$refs.spreadsheet.current[0].moveRow(0, 2)">
            Click to move the first row to the third position
        </a></li>
        <li><a @click="this.$refs.spreadsheet.current[0].hideRow(0)">
            Hide the first row
        </a></li>
        <li><a @click="this.$refs.spreadsheet.current[0].showRow(0)">
            Show the first row
        </a></li>
    </ol>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";

const license = 'MTVjYzI5YTAwYTkzYTZiZTEzMThkYTg4Zjk1NGNjODg4ODMwNzU4YzYwMmFhYzI1MGNhNjI0NWQ0ZTU4YjVkZTc4ZDc0OTMxNTgyZDdjMWUzOGE5MDE5YTdkNTY5NjZmNjUxMjk2YWNjMjYzNjliZDQyMzE3ZTNlYTE1NGFlYTYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNRGt5TWpZMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        // Data
        const data = [
            ['US', 'Cheese', 1000 ],
            ['CA', 'Apples', 1200 ],
            ['CA', 'Carrots', 2000 ],
            ['BR', 'Oranges', 3800 ],
        ];
        return {
            data,
            license: license,
        };
    }
}
</script>

Angular example

import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MTVjYzI5YTAwYTkzYTZiZTEzMThkYTg4Zjk1NGNjODg4ODMwNzU4YzYwMmFhYzI1MGNhNjI0NWQ0ZTU4YjVkZTc4ZDc0OTMxNTgyZDdjMWUzOGE5MDE5YTdkNTY5NjZmNjUxMjk2YWNjMjYzNjliZDQyMzE3ZTNlYTE1NGFlYTYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNRGt5TWpZMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create component
@Component({
    selector: "app-root",
    template: `<div #spreadsheet></div>
        <ol class='example' style='cursor:pointer;'>
            <li><a (click)="this.worksheets[0].insertRow()">
                Click to insert a new blank row at the end of the spreadsheet
            </a></li>
            <li><a (click)="this.worksheets[0].insertRow(2, 0, 1)">
                Click to insert two new blank rows at the beginning of the spreadsheet
            </a></li>
            <li><a (click)="this.worksheets[0].insertRow([{ data: [ '0.99', '1.22', '3.11', '2.21' ]}])">
                Click to insert a new row with pre-populated values at the end of the spreadsheet
            </a></li>
            <li><a (click)="this.worksheets[0].deleteRow()">
                Click to delete the last row
            </a></li>
            <li><a (click)="this.worksheets[0].moveRow(0, 2)">
                Click to move the first row to the third position
            </a></li>
            <li><a (click)="this.worksheets[0].hideRow(0)">
                Hide the first row
            </a></li>
            <li><a (click)="this.worksheets[0].showRow(0)">
                Show the first row
            </a></li>
        </ol>`;
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngOnInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            data: [
                ['US', 'Cheese', 1000 ],
                ['CA', 'Apples', 1200 ],
                ['CA', 'Carrots', 2000 ],
                ['BR', 'Oranges', 3800 ],
            ],
            worksheetName: 'Row management',
        });
    }
}


Intercept a new row action

The following example demonstrates the usage of the onbeforeinsertrow event to modify the configuration of a newly created rows by including default data in each new row.



Source code

<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="spreadsheet"></div>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MTVjYzI5YTAwYTkzYTZiZTEzMThkYTg4Zjk1NGNjODg4ODMwNzU4YzYwMmFhYzI1MGNhNjI0NWQ0ZTU4YjVkZTc4ZDc0OTMxNTgyZDdjMWUzOGE5MDE5YTdkNTY5NjZmNjUxMjk2YWNjMjYzNjliZDQyMzE3ZTNlYTE1NGFlYTYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNRGt5TWpZMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [4,4],
    }],
    onbeforeinsertrow: function(worksheet, rows) {
        return rows.map(function(v) {
            return { ...v, data:[1,2,3] }
        });
    }
});
</script>
</html>

React example

import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";

const license = 'MTVjYzI5YTAwYTkzYTZiZTEzMThkYTg4Zjk1NGNjODg4ODMwNzU4YzYwMmFhYzI1MGNhNjI0NWQ0ZTU4YjVkZTc4ZDc0OTMxNTgyZDdjMWUzOGE5MDE5YTdkNTY5NjZmNjUxMjk2YWNjMjYzNjliZDQyMzE3ZTNlYTE1NGFlYTYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNRGt5TWpZMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Adding a new column event
    const onbeforeinsertrow = (worksheet, rows) => {
        return rows.map(function(v) {
            return { ...v, data:[1,2,3] }
        });
    };
    // Render component
    return (
        <Spreadsheet ref={spreadsheet} license={license} onbeforeinsertrow={onbeforeinsertrow}>
            <Worksheet minDimensions={[4,4]} />
        </Spreadsheet>
    );
}

Vue example

<template>
    <Spreadsheet ref="spreadsheet" :license="license" :onbeforeinsertrow="onbeforeinsertrow">
        <Worksheet :minDimensions="[4,4]" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";

const license = 'MTVjYzI5YTAwYTkzYTZiZTEzMThkYTg4Zjk1NGNjODg4ODMwNzU4YzYwMmFhYzI1MGNhNjI0NWQ0ZTU4YjVkZTc4ZDc0OTMxNTgyZDdjMWUzOGE5MDE5YTdkNTY5NjZmNjUxMjk2YWNjMjYzNjliZDQyMzE3ZTNlYTE1NGFlYTYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNRGt5TWpZMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        // Adding a new column event
        onbeforeinsertrow(worksheet, rows) {
            return rows.map(function(v) {
                return { ...v, data:[1,2,3] }
            });
        };
    },
    data() {
        return {
            license,
        };
    }
}
</script>

Angular example

import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('MTVjYzI5YTAwYTkzYTZiZTEzMThkYTg4Zjk1NGNjODg4ODMwNzU4YzYwMmFhYzI1MGNhNjI0NWQ0ZTU4YjVkZTc4ZDc0OTMxNTgyZDdjMWUzOGE5MDE5YTdkNTY5NjZmNjUxMjk2YWNjMjYzNjliZDQyMzE3ZTNlYTE1NGFlYTYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3hNRGt5TWpZMU5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create component
@Component({
    selector: "app-root",
    template: `<div #spreadsheet></div>`;
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngOnInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                minDimensions: [4,4],
            }],
            onbeforeinsertrow: function(worksheet, rows) {
                return rows.map(function(v) {
                    return { ...v, data:[1,2,3] }
                });
            }
        });
    }
}