Data Grid Selection

This section covers the technical aspects of cell selection and the management of selection borders in the Jspreadsheet data grid, detailing the relevant properties, events, and methods.

What's new in Version 11?

Version 11 of Jspreadsheet introduces significant developments, notably the ability to make non-consecutive selections. This addition extends the data grid's versatility, facilitating user interactions akin to those in familiar spreadsheet tools such as Excel and Google Sheets.

Due to the new non-consecutive and multiple selection features, various methods have been revised to align with these capabilities:

getSelected It has a different signature and return; It does not include filtered cells.

updateSelection it has been dropped. Please use updateSelectionFromCoords.

getSelectedRows it does not include filtered rows on the result.

getHighlighted return an array of selections.

getSelection returns the main selection order or without order.

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

In version 11, the methods getSelected and getSelectedRows exclude the 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 the use of getBorders is when the developer needs the coordinates of the marching ants border during a copy.

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

Programmatically Data Grid Selection

Demonstrates how to select all cells within a worksheet in the grid programmatically.

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

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

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

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

// 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 } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YzU1MjMxMzAxZGQ5MTY0MjUwMzViMmViNDI2YzIyZGZlYWUyYzRmYzI5MTRiNDA2YzM3NGQ2OGJkZDgzNGY5YTRmNDQ1NzI1ODcyOTUwZTcwZDgxMmRkYzhhZmFjNThlOTE0YjY3Yjg3N2JlODdmYzg5ZWU1YmVjMzk3NjY1MGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EWTROall5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet} license={license}>
                <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" :license="license">
        <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 } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YzU1MjMxMzAxZGQ5MTY0MjUwMzViMmViNDI2YzIyZGZlYWUyYzRmYzI5MTRiNDA2YzM3NGQ2OGJkZDgzNGY5YTRmNDQ1NzI1ODcyOTUwZTcwZDgxMmRkYzhhZmFjNThlOTE0YjY3Yjg3N2JlODdmYzg5ZWU1YmVjMzk3NjY1MGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EWTROall5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        updateSelectionFromCoords() {
            this.$refs.spreadsheet.current[0].updateSelectionFromCoords(...arguments);
        },
        selectAll() {
            this.$refs.spreadsheet.current[0].selectAll();
        },
    },
    data() {
        return {
            license: license,
        };
    }
}
</script>

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

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

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

@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/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

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

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

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

// 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()
</script>
</html>

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

const license = 'YzU1MjMxMzAxZGQ5MTY0MjUwMzViMmViNDI2YzIyZGZlYWUyYzRmYzI5MTRiNDA2YzM3NGQ2OGJkZDgzNGY5YTRmNDQ1NzI1ODcyOTUwZTcwZDgxMmRkYzhhZmFjNThlOTE0YjY3Yjg3N2JlODdmYzg5ZWU1YmVjMzk3NjY1MGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EWTROall5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

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

<template>
    <Spreadsheet ref="spreadsheet" :license="license">
        <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 } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

const license = 'YzU1MjMxMzAxZGQ5MTY0MjUwMzViMmViNDI2YzIyZGZlYWUyYzRmYzI5MTRiNDA2YzM3NGQ2OGJkZDgzNGY5YTRmNDQ1NzI1ODcyOTUwZTcwZDgxMmRkYzhhZmFjNThlOTE0YjY3Yjg3N2JlODdmYzg5ZWU1YmVjMzk3NjY1MGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EWTROall5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        setBorder() {
            this.$refs.spreadsheet.current[0].setBorder(...arguments);
        },
        resetBorders() {
            this.$refs.spreadsheet.current[0].resetBorders();
        },
    },
    data() {
        return {
            // License
            license: license,
        };
    }
}
</script>

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

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

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

@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('', 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],
                }
            ]
        });
    }
}