Data Grid Selections

Comprehensive selection capabilities enable users to interact with cells, ranges, and data similar to traditional spreadsheet applications. This section covers cell selection management, programmatic selection methods, non-consecutive selections, and custom selection borders.

What's new with Version 12

Version 12 improves selection behavior by extending CTRL + click support. Users can now select or deselect non-consecutive cells, matching the functionality of Excel and Google Sheets.

Documentation

Methods

The following methods manage selections in the Jspreadsheet data grid.

Main Selection

Method	Description
`getSelection`	Get the coordinates of the main selection. `getSelection(preserveOrder: Boolean) : Array \| null`
`getHighlighted`	Get the coordinates of the highlighted selections. `getHighlighted() : Array \| null`
`getRange`	Get the range description of the highlighted cells. `getRange() : String \| null`
`getSelectedColumns`	Get the selected columns. `getSelectedColumns(visibleOnly: Boolean) => Array`
`getSelectedRows`	Get the selected rows. `getSelectedRows(visibleOnly: Boolean) => Array`
`getSelected`	Get the worksheet selected cell names or objects. @param {Boolean?} columnNameOnly: To get only the cell names as string (true). Get the cell coordinates as an object (false). `getSelected(columnNameOnly: Boolean) => []`
`isSelected`	Verify if the coordinates given are included in the current selection. `isSelected(x: Number, y: Number) : Boolean`
`selectAll`	Select all cells available in the data grid. `selectAll() : void`
`updateSelectionFromCoords`	Select all cells based on the given coordinates. `updateSelectionFromCoords(x1: Number, y1: Number, x2: Number, y2: Number) : void`
`resetSelection`	Remove the selection. `resetSelection() : void`

Filtered Rows

The methods getSelected and getSelectedRows exclude hidden rows due to filters or search operations, ensuring that only visible rows are considered in these selections.

Secondary Selections or Borders

Method	Description
`setBorder`	Create or update an existing selection with a defined color. `setBorder(x1: Number, y1: Number, x2: Number, y2: Number, name: string, colorHex: string) : void`
`getBorder`	Get the selection border object. `getBorder(selectionName: string) : void`
`resetBorders`	Reset the selection by its name. Reset all exiting borders when selectionName is not defined. `resetBorders(selectionName?: string, resetPosition: boolean) : void`
`refreshBorders`	Refresh one or more selections. Refresh all existing borders when selectionName is not defined. `refreshBorders(selectionName?: string) : void`

Example

A real-world example of using getBorders is when developers need the coordinates of the marching ants border during a copy operation.

worksheetInstance.getBorder('copying');

Selection Events

Event	Description
`onblur`	`onblur(worksheet: Object) : void`
`onfocus`	`onfocus(worksheet: Object) : void`
`onbeforeselection`	`onbeforeselection(worksheet: Object, x1: Number, y1: Number, x2: Number, y2: Number, e: MouseEvent) : Boolean \| void`
`onselection`	`onselection(worksheet: Object, x1: Number, y1: Number, x2: Number, y2: Number, e: MouseEvent) : void`

Initial Settings

Property	Description
`selectionCopy: boolean`	Disable the clone selection.

Examples

Programmatic Data Grid Selection

This example demonstrates how to programmatically select cells within a worksheet, including selecting all cells and specific coordinate ranges.

<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<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="Select all" id="btn1" />
<input type="button" value="updateSelectionFromCoords(2,2,3,3)" id="btn2" /></p>

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

// Create the spreadsheet
let table = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6,6],
    }],
});

document.getElementById("btn1").onclick = () => table[0].selectAll();
document.getElementById("btn2").onclick = () => table[0].updateSelectionFromCoords(2,2,3,3);
</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('ZjhiM2EwMjBiOGYzZWUzNDBjYzUxNGE5NWI4MzllMDgwZjAzN2I4ZjYwNjZlZDhlYjY3NDdhODA5NTY1NmRkZWU2YWM2MjQyOTNhMTAxNDcxZGQ3YTY5YzM2NGEwODU4NTRjNTUzZjI1NzdkMzJjODA0NWYzYzE0ZTFlZTNhYTYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNVFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet}>
                <Worksheet minDimensions={[6, 6]}/>
            </Spreadsheet>
            <input type="button" value="Select all"
                   onClick={() => spreadsheet.current[0].selectAll()}/>
            <input type="button" value="Select coords (2,2,3,3)"
                   onClick={() => spreadsheet.current[0].updateSelectionFromCoords(2, 2, 3, 3)}/>
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :minDimensions="[6,6]" />
    </Spreadsheet>
    <input type="button" value="Select all" @click="selectAll" />
    <input type="button" value="Select coords (2,2,3,3)" @click="updateSelectionFromCoords(2,2,3,3)" />
</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('ZjhiM2EwMjBiOGYzZWUzNDBjYzUxNGE5NWI4MzllMDgwZjAzN2I4ZjYwNjZlZDhlYjY3NDdhODA5NTY1NmRkZWU2YWM2MjQyOTNhMTAxNDcxZGQ3YTY5YzM2NGEwODU4NTRjNTUzZjI1NzdkMzJjODA0NWYzYzE0ZTFlZTNhYTYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNVFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');


export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        updateSelectionFromCoords() {
            this.$refs.spreadsheet.current[0].updateSelectionFromCoords(...arguments);
        },
        selectAll() {
            this.$refs.spreadsheet.current[0].selectAll();
        },
    }
}
</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('ZjhiM2EwMjBiOGYzZWUzNDBjYzUxNGE5NWI4MzllMDgwZjAzN2I4ZjYwNjZlZDhlYjY3NDdhODA5NTY1NmRkZWU2YWM2MjQyOTNhMTAxNDcxZGQ3YTY5YzM2NGEwODU4NTRjNTUzZjI1NzdkMzJjODA0NWYzYzE0ZTFlZTNhYTYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNVFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@Component({
    standalone: true,
    selector: "app-root",
    template: `
        <div #spreadsheet></div>
        <input type="button" value="Select all" (click)="this.worksheets[0].selectAll()" />
        <input type="button" value="Select coords (2,2,3,3)" (click)="this.worksheets[0].updateSelectionFromCoords(2,2,3,3)" />`
})
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: [6,6],
                }
            ]
        });
    }
}

Implementing Secondary Borders

Here is an example of adding secondary borders within the spreadsheet.

<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<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="Create new red selection" id="btn1" />
<input type="button" value="Create new blue selection" id="btn2" />
<input type="button" value="Clear all selection" id="btn3" /></p>

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

// Create the spreadsheet
let table = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6,6],
    }],
});

document.getElementById("btn1").onclick = () => table[0].setBorder(1,1,2,2,'red-visit','#ff0000')
document.getElementById("btn2").onclick = () => table[0].setBorder(3,3,4,4,'blue-visit','#0000ff')
document.getElementById("btn3").onclick = () => table[0].resetBorders(null, true)
</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('ZjhiM2EwMjBiOGYzZWUzNDBjYzUxNGE5NWI4MzllMDgwZjAzN2I4ZjYwNjZlZDhlYjY3NDdhODA5NTY1NmRkZWU2YWM2MjQyOTNhMTAxNDcxZGQ3YTY5YzM2NGEwODU4NTRjNTUzZjI1NzdkMzJjODA0NWYzYzE0ZTFlZTNhYTYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNVFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet}>
                <Worksheet minDimensions={[6,6]} />
            </Spreadsheet>
            <button onClick={() => spreadsheet.current[0].setBorder(1,1,2,2,'test1','#ff0000')}>Create new red selection</button>
            <button onClick={() => spreadsheet.current[0].setBorder(3,3,4,4,'test2','#0000ff')}>Create new blue selection</button>
            <button onClick={() => spreadsheet.current[0].resetBorders(null, true)}>Clear all selection</button>
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :minDimensions="[6,6]" />
    </Spreadsheet>
    <input type="button" @click="setBorder(1,1,2,2,'test1','#ff0000')" value="Create a new red selection" />
    <input type="button" @click="setBorder(3,3,4,4,'test2','#0000ff')" value="Create a new blue selection" />
    <input type="button" @click="resetBorders" value="Clear all selection" />
</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('ZjhiM2EwMjBiOGYzZWUzNDBjYzUxNGE5NWI4MzllMDgwZjAzN2I4ZjYwNjZlZDhlYjY3NDdhODA5NTY1NmRkZWU2YWM2MjQyOTNhMTAxNDcxZGQ3YTY5YzM2NGEwODU4NTRjNTUzZjI1NzdkMzJjODA0NWYzYzE0ZTFlZTNhYTYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNVFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        setBorder() {
            this.$refs.spreadsheet.current[0].setBorder(...arguments);
        },
        resetBorders() {
            this.$refs.spreadsheet.current[0].resetBorders(null, true);
        },
    },
    data() {
        return {};
    }
}
</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('ZjhiM2EwMjBiOGYzZWUzNDBjYzUxNGE5NWI4MzllMDgwZjAzN2I4ZjYwNjZlZDhlYjY3NDdhODA5NTY1NmRkZWU2YWM2MjQyOTNhMTAxNDcxZGQ3YTY5YzM2NGEwODU4NTRjNTUzZjI1NzdkMzJjODA0NWYzYzE0ZTFlZTNhYTYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNVFl6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@Component({
    standalone: true,
    selector: "app-root",
    template: `
        <div #spreadsheet></div>
        <input type="button" (click)="this.worksheets[0].setBorder(1,1,2,2,'test1','#ff0000')" value="Create a new red selection" />
        <input type="button" (click)="this.worksheets[0].setBorder(3,3,4,4,'test2','#0000ff')" value="Create a new blue selection" />
        <input type="button" (click)="this.worksheets[0].resetBorders(undefined, true)" value="Clear all selection" />`
})
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: [6,6],
                }
            ]
        });
    }
}