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 blank row at the end" id="btn1"><br/><br/> <input type="button" value="Click to insert two blank rows at the top" id="btn2"><br/><br/> <input type="button" value="Click to add a row with sample data at the end" 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> // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZjVmMzJmYmIyMGViNjEwNzVlZmI0ODU4NmM4MTI3NTU5MjkxOGY4Mzc1ZTFlNTk2ODEzZmI3OTRkNmI0MWQ4M2ViMmM0ZmZjOGQzODI3ZGJjYTg3MzBjNGE0M2E2NDMzZTU0MTU5YmQ5ODE4NGViZDQ4MDQ3ZWMwNTZmODFjOTIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekl4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // 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"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZjVmMzJmYmIyMGViNjEwNzVlZmI0ODU4NmM4MTI3NTU5MjkxOGY4Mzc1ZTFlNTk2ODEzZmI3OTRkNmI0MWQ4M2ViMmM0ZmZjOGQzODI3ZGJjYTg3MzBjNGE0M2E2NDMzZTU0MTU5YmQ5ODE4NGViZDQ4MDQ3ZWMwNTZmODFjOTIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekl4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); 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"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZjVmMzJmYmIyMGViNjEwNzVlZmI0ODU4NmM4MTI3NTU5MjkxOGY4Mzc1ZTFlNTk2ODEzZmI3OTRkNmI0MWQ4M2ViMmM0ZmZjOGQzODI3ZGJjYTg3MzBjNGE0M2E2NDMzZTU0MTU5YmQ5ODE4NGViZDQ4MDQ3ZWMwNTZmODFjOTIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekl4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); 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"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZjVmMzJmYmIyMGViNjEwNzVlZmI0ODU4NmM4MTI3NTU5MjkxOGY4Mzc1ZTFlNTk2ODEzZmI3OTRkNmI0MWQ4M2ViMmM0ZmZjOGQzODI3ZGJjYTg3MzBjNGE0M2E2NDMzZTU0MTU5YmQ5ODE4NGViZDQ4MDQ3ZWMwNTZmODFjOTIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekl4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // 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 blank row at the end" id="btn1"></p> <script> // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZjVmMzJmYmIyMGViNjEwNzVlZmI0ODU4NmM4MTI3NTU5MjkxOGY4Mzc1ZTFlNTk2ODEzZmI3OTRkNmI0MWQ4M2ViMmM0ZmZjOGQzODI3ZGJjYTg3MzBjNGE0M2E2NDMzZTU0MTU5YmQ5ODE4NGViZDQ4MDQ3ZWMwNTZmODFjOTIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekl4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // 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"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZjVmMzJmYmIyMGViNjEwNzVlZmI0ODU4NmM4MTI3NTU5MjkxOGY4Mzc1ZTFlNTk2ODEzZmI3OTRkNmI0MWQ4M2ViMmM0ZmZjOGQzODI3ZGJjYTg3MzBjNGE0M2E2NDMzZTU0MTU5YmQ5ODE4NGViZDQ4MDQ3ZWMwNTZmODFjOTIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekl4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); 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"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZjVmMzJmYmIyMGViNjEwNzVlZmI0ODU4NmM4MTI3NTU5MjkxOGY4Mzc1ZTFlNTk2ODEzZmI3OTRkNmI0MWQ4M2ViMmM0ZmZjOGQzODI3ZGJjYTg3MzBjNGE0M2E2NDMzZTU0MTU5YmQ5ODE4NGViZDQ4MDQ3ZWMwNTZmODFjOTIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekl4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); 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"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('ZjVmMzJmYmIyMGViNjEwNzVlZmI0ODU4NmM4MTI3NTU5MjkxOGY4Mzc1ZTFlNTk2ODEzZmI3OTRkNmI0MWQ4M2ViMmM0ZmZjOGQzODI3ZGJjYTg3MzBjNGE0M2E2NDMzZTU0MTU5YmQ5ODE4NGViZDQ4MDQ3ZWMwNTZmODFjOTIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXdNekl4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // 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() } }