Spreadsheet Rows

Spreadsheet row settings define the behaviors and attributes of rows and their cells, including unique identifiers, row height, styling, and cell properties like read-only status. This section covers methods, events, and settings related to data grid rows.

Documentation

Methods

The following methods interact with the rows programmatically.

Method	Description
`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 defined 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

Several events are related to rows in your spreadsheet. Use onbefore events to intercept, validate, or cancel user actions.

Event	Description
`oncreaterow`	Triggered after a new row is inserted. `oncreaterow(worksheet: Object, rowNumber: Number, tr: HTMLElement)`
`onbeforeinsertrow`	Triggered before a new row is inserted. Return false to cancel the user action. `onbeforeinsertrow(worksheet: Object, rows: Object[]) => Boolean \| Object[] \| void`
`oninsertrow`	Triggered after a new row is inserted. `oninsertrow(worksheet: Object, rows: Object[]) => void`
`onbeforedeleterow`	Triggered before a row is deleted. Return false to cancel the user action. `onbeforedeleterow(worksheet: Object, rows: Number[]) => Number[] \| Boolean \| void`
`ondeleterow`	Triggered after a row is deleted. `ondeleterow(worksheet: Object, rows: Number[]) => void`
`onbeforemoverow`	Triggered before a row is moved to a new position. Return false to cancel the user action. `onbeforemoverow(worksheet: Object, origin: Number, destination: Number) => void \| boolean`
`onmoverow`	Triggered after a row is moved to a new position. `onmoverow(worksheet: Object, origin: Number, destination: Number) => void`
`onresizerow`	Triggered after the height changes for one or more rows. `onresizerow(worksheet: Object, row: Mixed, height: Mixed, oldHeight: Mixed) => void`
`onchangerowvisibility`	Triggered 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.

Property	Description
`allowInsertRow: boolean`	Enable the user to enter new rows. `Default: true`
`allowManualInsertRow: boolean`	A new row is automatically inserted when the user presses the enter key in the last row. `Default: true`
`allowDeleteRow: boolean`	Allow the user to delete rows. `Default: true`
`rowDrag: boolean`	Allow the user to change the position of one row by dragging and dropping. `Default: true`
`rowResize: boolean`	Allow the user to resize rows. `Default: true`
`defaultRowHeight: number`	The default row height.
`minSpareRows: number`	The mandatory number of blank rows at the end of the spreadsheet. `Default: none.`

Available properties

Initialize the spreadsheet with custom id, text, and height using the following properties:

Property	Description
`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: number`	Define the style index for all cells in this row.
`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

Programmatic methods

The following example demonstrates the basic functionality with programmatic row methods.

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

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

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

<input type="button" value="Click to insert a new blank row at the end of the spreadsheet" id="btn1"><br/><br/>
<input type="button" value="Click to insert two new blank rows at the beginning of the spreadsheet" id="btn2"><br/><br/>
<input type="button" value="Click to insert a new row with pre-populated values at the end of the spreadsheet" id="btn3"><br/><br/>
<input type="button" value="Click to delete the last row" id="btn4"><br/><br/>
<input type="button" value="Click to move the first row to the third position" id="btn5"><br/><br/>
<input type="button" value="Hide the first row" id="btn6"><br/><br/>
<input type="button" value="Show the first row" id="btn7"><br/><br/>

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

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

document.getElementById("btn1").onclick = () => spreadsheet[0].insertRow();
document.getElementById("btn2").onclick = () => spreadsheet[0].insertRow(2, 0, 1);
document.getElementById("btn3").onclick = () => spreadsheet[0].insertRow([{ data: ['0.99', '1.22', '3.11', '2.21' ]}]);
document.getElementById("btn4").onclick = () => spreadsheet[0].deleteRow();
document.getElementById("btn5").onclick = () => spreadsheet[0].moveRow(0, 2);
document.getElementById("btn6").onclick = () => spreadsheet[0].hideRow(0);
document.getElementById("btn7").onclick = () => spreadsheet[0].showRow(0);
</script>
</html>

import React, {useRef} from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

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

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}>
            <Worksheet minDimensions={[6, 6]} data={data} worksheetName="Row management" />
          </Spreadsheet>
    
          <div style={{ marginTop: "15px" }}>
            <button
              onClick={() => spreadsheet.current[0].insertRow()}
              style={{ marginRight: "5px" }}
            >
              Click to insert a new blank row at the end of the spreadsheet
            </button>
    
            <button
              onClick={() => spreadsheet.current[0].insertRow(2, 0, 1)}
              style={{ marginRight: "5px" }}
            >
              Click to insert two new blank rows at the beginning of the spreadsheet
            </button>
    
            <button
              onClick={() =>
                spreadsheet.current[0].insertRow([
                  { data: ["0.99", "1.22", "3.11", "2.21"] },
                ])
              }
              style={{ marginRight: "5px" }}
            >
              Click to insert a new row with pre-populated values at the end of the spreadsheet
            </button>
    
            <button
              onClick={() => spreadsheet.current[0].deleteRow()}
              style={{ marginRight: "5px" }}
            >
              Click to delete the last row
            </button>
    
            <button
              onClick={() => spreadsheet.current[0].moveRow(0, 2)}
              style={{ marginRight: "5px" }}
            >
              Click to move the first row to the third position
            </button>
            <button
              onClick={() => spreadsheet.current[0].hideRow(0)}
              style={{ marginRight: "5px" }}
            >
              Hide the first row
            </button>
            <button onClick={() => spreadsheet.current[0].showRow(0)}>
              Show the first row
            </button>
          </div>
        </>
      );
    }

<template>
  <Spreadsheet ref="spreadsheet">
    <Worksheet :data="data" />
  </Spreadsheet>

  <div style="margin-top: 15px;">
    <button @click="$refs.spreadsheet.current[0].insertRow()" style="margin: 5px;">
      Click to insert a new blank row at the end of the spreadsheet
    </button>
    <button @click="$refs.spreadsheet.current[0].insertRow(2, 0, 1)" style="margin: 5px;">
      Click to insert two new blank rows at the beginning of the spreadsheet
    </button>
    <button @click="$refs.spreadsheet.current[0].insertRow([{ data: ['0.99', '1.22', '3.11', '2.21'] }])" style="margin: 5px;">
      Click to insert a new row with pre-populated values at the end of the spreadsheet
    </button>
    <button @click="$refs.spreadsheet.current[0].deleteRow()" style="margin: 5px;">
      Click to delete the last row
    </button>
    <button @click="$refs.spreadsheet.current[0].moveRow(0, 2)" style="margin: 5px;">
      Click to move the first row to the third position
    </button>
    <button @click="$refs.spreadsheet.current[0].hideRow(0)" style="margin: 5px;">
      Hide the first row
    </button>
    <button @click="$refs.spreadsheet.current[0].showRow(0)" style="margin: 5px;">
      Show the first row
    </button>
  </div>
</template>

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

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

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

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

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

// Create component
@Component({
    standalone: true,
    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, true)">
                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'], options: {}}])">
                 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(-1)">
                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!: jspreadsheet.worksheetInstance[];
  
    ngAfterViewInit() {
      this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
        worksheets: [
          {
            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 newly created rows by including default data in each new row.

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

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

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

<p><input type="button" value="Click to insert a new blank row at the end of the spreadsheet" id="btn1"></p>

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

// Create the spreadsheet
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [4,4],
    }],
    onbeforeinsertrow: function(worksheet, rows) {
        console.log('Intercepting row insertion and adding some data in it...')
        return rows.map(function(v) {
            return { ...v, data:[1,2,3] }
        });
    }
});

document.getElementById("btn1").onclick = () => spreadsheet[0].insertRow();
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

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

export default function App() {
  const spreadsheet = useRef();

  // Intercept row insertion and add data to it
  const onbeforeinsertrow = (worksheet, rows) => {
    console.log("Intercepting row insertion and adding some data in it...");
    return rows.map((v) => {
      return { ...v, data: [1, 2, 3] };
    });
  };

  // Button to insert new row
  const insertRow = () => {
    if (spreadsheet.current) {
      spreadsheet.current[0].insertRow();
    }
  };

  return (
    <>
      <Spreadsheet ref={spreadsheet} onbeforeinsertrow={onbeforeinsertrow}>
        <Worksheet minDimensions={[4, 4]} />
      </Spreadsheet>
      <p>
        <input
          type="button"
          value="Click to insert a new blank row at the end of the spreadsheet"
          onClick={insertRow}
        />
      </p>
    </>
  );
}

<template>
    <Spreadsheet ref="spreadsheet" :onbeforeinsertrow="onbeforeinsertrow">
        <Worksheet :minDimensions="[4,4]" />
    </Spreadsheet>
    <p>
        <input
            type="button"
            value="Click to insert a new blank row at the end of the spreadsheet"
            @click="insertRow"
        />
    </p>
</template>

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

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

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        // Intercepting row insertion
        onbeforeinsertrow(worksheet, rows) {
            console.log("Intercepting row insertion and adding some data in it...");
            return rows.map((v) => {
                return { ...v, data: [1, 2, 3] };
            });
        },
        // Insert a row at the end
        insertRow() {
            this.$refs.spreadsheet.current[0].insertRow();
        },
    },
};
</script>

import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

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

// Create component
@Component({
    standalone: true,
    selector: "app-root",
    template: `
    <div #spreadsheet></div>
    <p><input type="button" value="Click to insert a new blank row at the end of the spreadsheet" (click)="handleClick()"></p>
`,
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // 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],options: {} }
                });
            }
        });
    }

    handleClick() {
        this.worksheets[0].insertRow()
    }
}

Edit this page on GitHub