Documentationkeyboard_arrow_rightRows

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.
autoId: boolean Automatically assign a unique GUID to the id of each row when no row id is provided. Default: false

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. See Row Groups for details.
state: boolean The state of the row group (collapsed or expanded). See Row Groups for details.
readonly: boolean Determines whether the row is read-only or not.

Row identifiers

Row ids are optional. Rows are always addressable by position, but an id provides a stable reference across sorting, insertions, and deletions — useful for database synchronization or referencing a row from another column.

Define ids manually through the rows property, or generate them automatically with autoId: true.

Approach Description
Manual ids Provide the id for each row through the rows array. Useful when the identifiers come from your backend.
autoId: true Automatically assign a unique GUID to the id of every row that does not already have one, including new rows created by the user.

Row identifiers are also required for the record column type. A record column references another worksheet column and resolves its values against the row ids of that worksheet, so the referenced rows must have well-defined ids for the relationship to work correctly.

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('OGM2YzcwZDBiMzVlYmY4YmRiMmUzNGNkMzZkMTQ3MDgxODdhMDVmMzc2NTBjMWNjN2NkYWEwNDE5YTdkY2JiMjgyZGZjNjc3MTM0N2FlZjBkMGUwMWZlM2RkNTNjMTMxYzk5ZDE0ZDAzOWE2MmM0ZjMyNjM3YTEwYTc4NzhiMzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpnek16QXdOVFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

// 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('OGM2YzcwZDBiMzVlYmY4YmRiMmUzNGNkMzZkMTQ3MDgxODdhMDVmMzc2NTBjMWNjN2NkYWEwNDE5YTdkY2JiMjgyZGZjNjc3MTM0N2FlZjBkMGUwMWZlM2RkNTNjMTMxYzk5ZDE0ZDAzOWE2MmM0ZjMyNjM3YTEwYTc4NzhiMzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpnek16QXdOVFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

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('OGM2YzcwZDBiMzVlYmY4YmRiMmUzNGNkMzZkMTQ3MDgxODdhMDVmMzc2NTBjMWNjN2NkYWEwNDE5YTdkY2JiMjgyZGZjNjc3MTM0N2FlZjBkMGUwMWZlM2RkNTNjMTMxYzk5ZDE0ZDAzOWE2MmM0ZjMyNjM3YTEwYTc4NzhiMzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpnek16QXdOVFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

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('OGM2YzcwZDBiMzVlYmY4YmRiMmUzNGNkMzZkMTQ3MDgxODdhMDVmMzc2NTBjMWNjN2NkYWEwNDE5YTdkY2JiMjgyZGZjNjc3MTM0N2FlZjBkMGUwMWZlM2RkNTNjMTMxYzk5ZDE0ZDAzOWE2MmM0ZjMyNjM3YTEwYTc4NzhiMzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpnek16QXdOVFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

// 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('OGM2YzcwZDBiMzVlYmY4YmRiMmUzNGNkMzZkMTQ3MDgxODdhMDVmMzc2NTBjMWNjN2NkYWEwNDE5YTdkY2JiMjgyZGZjNjc3MTM0N2FlZjBkMGUwMWZlM2RkNTNjMTMxYzk5ZDE0ZDAzOWE2MmM0ZjMyNjM3YTEwYTc4NzhiMzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpnek16QXdOVFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

// 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('OGM2YzcwZDBiMzVlYmY4YmRiMmUzNGNkMzZkMTQ3MDgxODdhMDVmMzc2NTBjMWNjN2NkYWEwNDE5YTdkY2JiMjgyZGZjNjc3MTM0N2FlZjBkMGUwMWZlM2RkNTNjMTMxYzk5ZDE0ZDAzOWE2MmM0ZjMyNjM3YTEwYTc4NzhiMzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpnek16QXdOVFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

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('OGM2YzcwZDBiMzVlYmY4YmRiMmUzNGNkMzZkMTQ3MDgxODdhMDVmMzc2NTBjMWNjN2NkYWEwNDE5YTdkY2JiMjgyZGZjNjc3MTM0N2FlZjBkMGUwMWZlM2RkNTNjMTMxYzk5ZDE0ZDAzOWE2MmM0ZjMyNjM3YTEwYTc4NzhiMzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpnek16QXdOVFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

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('OGM2YzcwZDBiMzVlYmY4YmRiMmUzNGNkMzZkMTQ3MDgxODdhMDVmMzc2NTBjMWNjN2NkYWEwNDE5YTdkY2JiMjgyZGZjNjc3MTM0N2FlZjBkMGUwMWZlM2RkNTNjMTMxYzk5ZDE0ZDAzOWE2MmM0ZjMyNjM3YTEwYTc4NzhiMzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpnek16QXdOVFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

// 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()
    }
}

Rows with ids and the record column type

The following example builds a small organization chart. Each row receives an explicit id through the rows property, while autoId: true ensures that any new row the user creates also gets a unique GUID. The Manager column is defined with type: 'record', which references the same worksheet (through worksheetId and worksheetColumn) and resolves each cell against the row ids, allowing one employee to point to another as their manager.

<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>

<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('OGM2YzcwZDBiMzVlYmY4YmRiMmUzNGNkMzZkMTQ3MDgxODdhMDVmMzc2NTBjMWNjN2NkYWEwNDE5YTdkY2JiMjgyZGZjNjc3MTM0N2FlZjBkMGUwMWZlM2RkNTNjMTMxYzk5ZDE0ZDAzOWE2MmM0ZjMyNjM3YTEwYTc4NzhiMzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpnek16QXdOVFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

jspreadsheet(document.getElementById('spreadsheet'), {
    tabs: true,
    toolbar: true,
    autoId: true,
    worksheets: [
        {
            data: [
                ["/img/user.png", "Jorge", 0, "1", 1, '#31a431', "3120"],
                ["/img/user.png", "Antonio", 1, "2", 2, '#e00000', "3121"],
                ["/img/user.png", "Manoel", 1, "3", 2, '#e00000', "3123"],
                ["/img/user.png", "Pedro", 3, "4", 2, '#e00000', "3124"],
                ["/img/user.png", "Carlos", 3, "4", 3, '#1a50ff', "3125"],
                ["/img/user.png", "Marcos", 2, "5", 3, '#1a50ff', "3126"],
                ["/img/user.png", "Ana", 2, "6", 3, '#1a50ff', "3127"],
                ["/img/user.png", "Nicole", 2, "7", 4, '#ff8d1a', "3128"],
                ["/img/user.png", "Paulo", 7, "5", 4, '#ff8d1a', "3129"],
                ["/img/user.png", "Iris", 7, "5", 4, '#ff8d1a', "3130"],
            ],
            rows: [
                { id: 1 },
                { id: 2 },
                { id: 3 },
                { id: 4 },
                { id: 5 },
                { id: 6 },
                { id: 7 },
                { id: 8 },
                { id: 9 },
                { id: 10 },
                { id: 11 },
            ],
            columnDrag: false,
            minDimensions: [5, 5],
            worksheetId: 'b9a48a07-5a1e-47ce-aee4-b50792b6a59d',
            columns: [
                {
                    title: 'Photo',
                    type: 'image',
                    width: '50px',
                    align: 'center',
                },
                {
                    title: 'Name',
                    type: 'text',
                    width: '140px',
                },
                {
                    title: 'Manager',
                    type: 'record',
                    width: '100px',
                    worksheetId: 'b9a48a07-5a1e-47ce-aee4-b50792b6a59d',
                    worksheetColumn: 1,
                },
                {
                    title: 'Role',
                    type: 'dropdown',
                    width: '180px',
                    source: [
                        { id: 1, name: 'CEO', color: '#b71c1c' },
                        { id: 2, name: 'Vice president', color: '#880e4f' },
                        { id: 3, name: 'Production manager', color: '#4a148c' },
                        { id: 4, name: 'Intern', color: '#1a237e' },
                        { id: 5, name: 'Marketing manager', color: '#0d47a1' },
                        { id: 6, name: 'Sales manager', color: '#006064' },
                        { id: 7, name: 'Sales assistant', color: '#004d40' },
                        { id: 8, name: 'Operations manager', color: '#1b5e20' },
                    ]
                },
                {
                    title: 'Department',
                    type: 'dropdown',
                    width: '180px',
                    source: [
                        { id: 1, name: 'Board' },
                        { id: 2, name: 'Accounts' },
                        { id: 3, name: 'Marketing' },
                        { id: 4, name: 'Sales' },
                    ]
                },
                {
                    title: 'Color',
                    type: 'color',
                    render: 'square',
                    width: '80px'
                },
                {
                    title: 'Extension',
                    width: '80px'
                },
            ],
        },
        {
            minDimensions: [5, 5],
            data: [[1,2,3],[4,5,6]]
        }
    ]
});
</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('OGM2YzcwZDBiMzVlYmY4YmRiMmUzNGNkMzZkMTQ3MDgxODdhMDVmMzc2NTBjMWNjN2NkYWEwNDE5YTdkY2JiMjgyZGZjNjc3MTM0N2FlZjBkMGUwMWZlM2RkNTNjMTMxYzk5ZDE0ZDAzOWE2MmM0ZjMyNjM3YTEwYTc4NzhiMzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpnek16QXdOVFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

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

    const data = [
        ["/img/user.png", "Jorge", 0, "1", 1, '#31a431', "3120"],
        ["/img/user.png", "Antonio", 1, "2", 2, '#e00000', "3121"],
        ["/img/user.png", "Manoel", 1, "3", 2, '#e00000', "3123"],
        ["/img/user.png", "Pedro", 3, "4", 2, '#e00000', "3124"],
        ["/img/user.png", "Carlos", 3, "4", 3, '#1a50ff', "3125"],
        ["/img/user.png", "Marcos", 2, "5", 3, '#1a50ff', "3126"],
        ["/img/user.png", "Ana", 2, "6", 3, '#1a50ff', "3127"],
        ["/img/user.png", "Nicole", 2, "7", 4, '#ff8d1a', "3128"],
        ["/img/user.png", "Paulo", 7, "5", 4, '#ff8d1a', "3129"],
        ["/img/user.png", "Iris", 7, "5", 4, '#ff8d1a', "3130"],
    ];

    const rows = [
        { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 },
        { id: 7 }, { id: 8 }, { id: 9 }, { id: 10 }, { id: 11 },
    ];

    const columns = [
        { title: 'Photo', type: 'image', width: '50px', align: 'center' },
        { title: 'Name', type: 'text', width: '140px' },
        {
            title: 'Manager',
            type: 'record',
            width: '100px',
            worksheetId: 'b9a48a07-5a1e-47ce-aee4-b50792b6a59d',
            worksheetColumn: 1,
        },
        {
            title: 'Role',
            type: 'dropdown',
            width: '180px',
            source: [
                { id: 1, name: 'CEO', color: '#b71c1c' },
                { id: 2, name: 'Vice president', color: '#880e4f' },
                { id: 3, name: 'Production manager', color: '#4a148c' },
                { id: 4, name: 'Intern', color: '#1a237e' },
                { id: 5, name: 'Marketing manager', color: '#0d47a1' },
                { id: 6, name: 'Sales manager', color: '#006064' },
                { id: 7, name: 'Sales assistant', color: '#004d40' },
                { id: 8, name: 'Operations manager', color: '#1b5e20' },
            ]
        },
        {
            title: 'Department',
            type: 'dropdown',
            width: '180px',
            source: [
                { id: 1, name: 'Board' },
                { id: 2, name: 'Accounts' },
                { id: 3, name: 'Marketing' },
                { id: 4, name: 'Sales' },
            ]
        },
        { title: 'Color', type: 'color', render: 'square', width: '80px' },
        { title: 'Extension', width: '80px' },
    ];

    return (
        <Spreadsheet ref={spreadsheet} tabs={true} toolbar={true}>
            <Worksheet
                autoId={true}
                data={data}
                rows={rows}
                columns={columns}
                columnDrag={false}
                minDimensions={[5, 5]}
                worksheetId="b9a48a07-5a1e-47ce-aee4-b50792b6a59d"
            />
            <Worksheet minDimensions={[5, 5]} data={[[1,2,3],[4,5,6]]} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :tabs="true" :toolbar="true">
        <Worksheet
            :autoId="true"
            :data="data"
            :rows="rows"
            :columns="columns"
            :columnDrag="false"
            :minDimensions="[5, 5]"
            worksheetId="b9a48a07-5a1e-47ce-aee4-b50792b6a59d"
        />
        <Worksheet :minDimensions="[5, 5]" :data="[[1,2,3],[4,5,6]]" />
    </Spreadsheet>
</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('OGM2YzcwZDBiMzVlYmY4YmRiMmUzNGNkMzZkMTQ3MDgxODdhMDVmMzc2NTBjMWNjN2NkYWEwNDE5YTdkY2JiMjgyZGZjNjc3MTM0N2FlZjBkMGUwMWZlM2RkNTNjMTMxYzk5ZDE0ZDAzOWE2MmM0ZjMyNjM3YTEwYTc4NzhiMzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpnek16QXdOVFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    data() {
        const data = [
            ["/img/user.png", "Jorge", 0, "1", 1, '#31a431', "3120"],
            ["/img/user.png", "Antonio", 1, "2", 2, '#e00000', "3121"],
            ["/img/user.png", "Manoel", 1, "3", 2, '#e00000', "3123"],
            ["/img/user.png", "Pedro", 3, "4", 2, '#e00000', "3124"],
            ["/img/user.png", "Carlos", 3, "4", 3, '#1a50ff', "3125"],
            ["/img/user.png", "Marcos", 2, "5", 3, '#1a50ff', "3126"],
            ["/img/user.png", "Ana", 2, "6", 3, '#1a50ff', "3127"],
            ["/img/user.png", "Nicole", 2, "7", 4, '#ff8d1a', "3128"],
            ["/img/user.png", "Paulo", 7, "5", 4, '#ff8d1a', "3129"],
            ["/img/user.png", "Iris", 7, "5", 4, '#ff8d1a', "3130"],
        ];
        const rows = [
            { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 },
            { id: 7 }, { id: 8 }, { id: 9 }, { id: 10 }, { id: 11 },
        ];
        const columns = [
            { title: 'Photo', type: 'image', width: '50px', align: 'center' },
            { title: 'Name', type: 'text', width: '140px' },
            {
                title: 'Manager',
                type: 'record',
                width: '100px',
                worksheetId: 'b9a48a07-5a1e-47ce-aee4-b50792b6a59d',
                worksheetColumn: 1,
            },
            {
                title: 'Role',
                type: 'dropdown',
                width: '180px',
                source: [
                    { id: 1, name: 'CEO', color: '#b71c1c' },
                    { id: 2, name: 'Vice president', color: '#880e4f' },
                    { id: 3, name: 'Production manager', color: '#4a148c' },
                    { id: 4, name: 'Intern', color: '#1a237e' },
                    { id: 5, name: 'Marketing manager', color: '#0d47a1' },
                    { id: 6, name: 'Sales manager', color: '#006064' },
                    { id: 7, name: 'Sales assistant', color: '#004d40' },
                    { id: 8, name: 'Operations manager', color: '#1b5e20' },
                ]
            },
            {
                title: 'Department',
                type: 'dropdown',
                width: '180px',
                source: [
                    { id: 1, name: 'Board' },
                    { id: 2, name: 'Accounts' },
                    { id: 3, name: 'Marketing' },
                    { id: 4, name: 'Sales' },
                ]
            },
            { title: 'Color', type: 'color', render: 'square', width: '80px' },
            { title: 'Extension', width: '80px' },
        ];
        return { data, rows, columns };
    }
}
</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('OGM2YzcwZDBiMzVlYmY4YmRiMmUzNGNkMzZkMTQ3MDgxODdhMDVmMzc2NTBjMWNjN2NkYWEwNDE5YTdkY2JiMjgyZGZjNjc3MTM0N2FlZjBkMGUwMWZlM2RkNTNjMTMxYzk5ZDE0ZDAzOWE2MmM0ZjMyNjM3YTEwYTc4NzhiMzQsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94Tnpnek16QXdOVFExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`,
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet!: ElementRef;
    worksheets!: jspreadsheet.worksheetInstance[];

    ngAfterViewInit() {
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            tabs: true,
            toolbar: true,
            autoId: true,
            worksheets: [
                {
                    data: [
                        ["/img/user.png", "Jorge", 0, "1", 1, '#31a431', "3120"],
                        ["/img/user.png", "Antonio", 1, "2", 2, '#e00000', "3121"],
                        ["/img/user.png", "Manoel", 1, "3", 2, '#e00000', "3123"],
                        ["/img/user.png", "Pedro", 3, "4", 2, '#e00000', "3124"],
                        ["/img/user.png", "Carlos", 3, "4", 3, '#1a50ff', "3125"],
                        ["/img/user.png", "Marcos", 2, "5", 3, '#1a50ff', "3126"],
                        ["/img/user.png", "Ana", 2, "6", 3, '#1a50ff', "3127"],
                        ["/img/user.png", "Nicole", 2, "7", 4, '#ff8d1a', "3128"],
                        ["/img/user.png", "Paulo", 7, "5", 4, '#ff8d1a', "3129"],
                        ["/img/user.png", "Iris", 7, "5", 4, '#ff8d1a', "3130"],
                    ],
                    rows: [
                        { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 },
                        { id: 7 }, { id: 8 }, { id: 9 }, { id: 10 }, { id: 11 },
                    ],
                    columnDrag: false,
                    minDimensions: [5, 5],
                    worksheetId: 'b9a48a07-5a1e-47ce-aee4-b50792b6a59d',
                    columns: [
                        { title: 'Photo', type: 'image', width: '50px', align: 'center' },
                        { title: 'Name', type: 'text', width: '140px' },
                        {
                            title: 'Manager',
                            type: 'record',
                            width: '100px',
                            worksheetId: 'b9a48a07-5a1e-47ce-aee4-b50792b6a59d',
                            worksheetColumn: 1,
                        },
                        {
                            title: 'Role',
                            type: 'dropdown',
                            width: '180px',
                            source: [
                                { id: 1, name: 'CEO', color: '#b71c1c' },
                                { id: 2, name: 'Vice president', color: '#880e4f' },
                                { id: 3, name: 'Production manager', color: '#4a148c' },
                                { id: 4, name: 'Intern', color: '#1a237e' },
                                { id: 5, name: 'Marketing manager', color: '#0d47a1' },
                                { id: 6, name: 'Sales manager', color: '#006064' },
                                { id: 7, name: 'Sales assistant', color: '#004d40' },
                                { id: 8, name: 'Operations manager', color: '#1b5e20' },
                            ]
                        },
                        {
                            title: 'Department',
                            type: 'dropdown',
                            width: '180px',
                            source: [
                                { id: 1, name: 'Board' },
                                { id: 2, name: 'Accounts' },
                                { id: 3, name: 'Marketing' },
                                { id: 4, name: 'Sales' },
                            ]
                        },
                        { title: 'Color', type: 'color', render: 'square', width: '80px' },
                        { title: 'Extension', width: '80px' },
                    ],
                },
                {
                    minDimensions: [5, 5],
                    data: [[1,2,3],[4,5,6]]
                }
            ]
        });
    }
}