Nested Headers
This section will discuss how to create spreadsheets with nested headers
and how to modify them programmatically.
Documentation
Methods
You can use the following methods to update the nested headers programmatically:
Method |
Description |
getNestedCell(number,number) |
Get a nested header cell (DOM element).
getNestedCell(x: Number, y: Number) : DOMElement |
setNestedCell(number,number,object) |
Define the nested header cell attributes @param {Number} x - coordinate x @param {Number} y - coordinate y @param {Object} properties - Possible attributes: { title: String, align: String, colspan: Number, tooltip: String, frozen: Boolean } setNestedCell(x: Number, y: Number, properties: Object) : void |
setNestedCell(object[]) |
Define the nested header cell attributes @param {Object[]} updates - array of objects { x,y,properties }
setNestedCell(updates: Number|Object[]) : void |
getNestedHeaders |
Return the nested header definitions.
getNestedHeaders() : [] |
setNestedHeaders(array) |
Set the nested header definitions.
setNestedHeaders(config: []) : void |
resetNestedHeaders() |
Reset the nested header definitions.
resetNestedHeaders() : void |
Initial Settings
Learn how to generate a new spreadsheet containing nested headers.
Property |
Description |
nestedHeaders: array of items |
Worksheet nested header definitions. Possible attributes: { title: String, colspan: Number, tooltip: String, frozen: Boolean } |
Available Events
Event |
Description |
onchangenested |
When changing the nested headers definitions
onchangenested(worksheet: Object, config: Object) : void |
onchangeheadercell |
Update the properties of a nested header cell.
onchangeheadercell(worksheet: Object, positionXOrArrayOfUpdates: Number|Object[], positionY?: Number, config?: Object) : void |
Examples
Nested header example
The following example demonstrates a basic configuration for nested headers in the JSS spreadsheet.
See a working example of a JSS spreadsheet with nested headers that updates programmatically on JSFiddle.
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<br/>
<input type='button' value='Update' id="setnested">
<script>
jspreadsheet.setLicense('YTA1ZjlhMjdiZmFlNjI4OTQyM2Q5OTlhMmI1OGM5MzBiZjgxMTk1ZTRlOWNiMTkwYjBiZTc5M2FmNWQ3YmIzZGIwMmViMTE1YTc1NTU4MGVmZDQ1NWNmNzA2ZmQ0OTVkZThmYzRhNTllZDBhYmJjNmVkY2Y0N2RiODlhZTU5NDUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EYzRNelExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
let table = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
data: [
['BR', 'Cheese', 1],
['CA', 'Apples', 0],
['US', 'Carrots', 1],
['GB', 'Oranges', 0],
],
columns: [
{
type: 'autocomplete',
title: 'Country',
width: '200px',
url: '/jspreadsheet/countries'
},
{
type: 'dropdown',
title: 'Food',
width: '100px',
source: ['Apples','Bananas','Carrots','Oranges','Cheese']
},
{
type: 'checkbox',
title: 'Stock',
width: '100px'
},
{
type: 'number',
title: 'Price',
width: '100px'
},
],
minDimensions: [8,4],
nestedHeaders:[
[
{
title: 'Supermarket information',
colspan: '8',
},
],
[
{
title: 'Location',
colspan: '1',
},
{
title: ' Other Information',
colspan: '2'
},
{
title: ' Costs',
colspan: '5'
}
],
]
}]
});
document.getElementById("setnested").onclick = () => table[0].setNestedCell(0, 0, { title:'New title',tooltip:'New tooltip' })
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'YTA1ZjlhMjdiZmFlNjI4OTQyM2Q5OTlhMmI1OGM5MzBiZjgxMTk1ZTRlOWNiMTkwYjBiZTc5M2FmNWQ3YmIzZGIwMmViMTE1YTc1NTU4MGVmZDQ1NWNmNzA2ZmQ0OTVkZThmYzRhNTllZDBhYmJjNmVkY2Y0N2RiODlhZTU5NDUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EYzRNelExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default function App() {
const spreadsheet = useRef();
const data = [
['BR', 'Cheese', 1],
['CA', 'Apples', 0],
['US', 'Carrots', 1],
['GB', 'Oranges', 0],
];
const columns = [
{
type: 'autocomplete',
title: 'Country',
width: '200px',
url: '/jspreadsheet/countries'
},
{
type: 'dropdown',
title: 'Food',
width: '100px',
source: ['Apples','Bananas','Carrots','Oranges','Cheese']
},
{
type: 'checkbox',
title: 'Stock',
width: '100px'
},
{
type: 'number',
title: 'Price',
width: '100px'
},
];
const nestedHeaders = [
[
{
title: 'Supermarket information',
colspan: '8',
},
],
[
{
title: 'Location',
colspan: '1',
},
{
title: ' Other Information',
colspan: '2'
},
{
title: ' Costs',
colspan: '5'
}
],
];
return (
<>
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet data={data} columns={columns} nestedHeaders={nestedHeaders} minDimensions={[8,4]} />
</Spreadsheet>
<input type='button' value='Update'
onClick={() => spreadsheet.current[0].setNestedCell(0, 0, { title: 'New', tooltip: 'Tooltip' })} />
</>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :data="data" :columns="columns" :nestedHeaders="nestedHeaders" :minDimensions="[8,4]" />
</Spreadsheet>
<input type='button' value='Update'
@click="this.$refs.spreadsheet.current[0].setNestedCell(0, 0, { title:'New', tooltip:'Tooltip' })" />
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'YTA1ZjlhMjdiZmFlNjI4OTQyM2Q5OTlhMmI1OGM5MzBiZjgxMTk1ZTRlOWNiMTkwYjBiZTc5M2FmNWQ3YmIzZGIwMmViMTE1YTc1NTU4MGVmZDQ1NWNmNzA2ZmQ0OTVkZThmYzRhNTllZDBhYmJjNmVkY2Y0N2RiODlhZTU5NDUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EYzRNelExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
const data = [
['BR', 'Cheese', 1],
['CA', 'Apples', 0],
['US', 'Carrots', 1],
['GB', 'Oranges', 0],
];
const columns = [
{
type: 'autocomplete',
title: 'Country',
width: '200px',
url: '/jspreadsheet/countries'
},
{
type: 'dropdown',
title: 'Food',
width: '100px',
source: ['Apples','Bananas','Carrots','Oranges','Cheese']
},
{
type: 'checkbox',
title: 'Stock',
width: '100px'
},
{
type: 'number',
title: 'Price',
width: '100px'
},
];
const nestedHeaders = [
[
{
title: 'Supermarket information',
colspan: '8',
},
],
[
{
title: 'Location',
colspan: '1',
},
{
title: ' Other Information',
colspan: '2'
},
{
title: ' Costs',
colspan: '5'
}
],
];
return {
data,
columns,
nestedHeaders,
license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
import jSuites from "jSuites";
jspreadsheet.setLicense('YTA1ZjlhMjdiZmFlNjI4OTQyM2Q5OTlhMmI1OGM5MzBiZjgxMTk1ZTRlOWNiMTkwYjBiZTc5M2FmNWQ3YmIzZGIwMmViMTE1YTc1NTU4MGVmZDQ1NWNmNzA2ZmQ0OTVkZThmYzRhNTllZDBhYmJjNmVkY2Y0N2RiODlhZTU5NDUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EYzRNelExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>
<input type='button' value='Update'
(click)="this.worksheets[0].setNestedCell(0, 0, { title:'New title',tooltip:'New tooltip' })">`,
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
worksheets: jspreadsheet.worksheetInstance[];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
data: [
['BR', 'Cheese', 1],
['CA', 'Apples', 0],
['US', 'Carrots', 1],
['GB', 'Oranges', 0],
],
columns: [
{
type: 'autocomplete',
title: 'Country',
width: '200px',
url: '/jspreadsheet/countries'
},
{
type: 'dropdown',
title: 'Food',
width: '100px',
source: ['Apples','Bananas','Carrots','Oranges','Cheese']
},
{
type: 'checkbox',
title: 'Stock',
width: '100px'
},
{
type: 'number',
title: 'Price',
width: '100px'
},
],
minDimensions: [8,4],
nestedHeaders:[
[
{
title: 'Supermarket information',
colspan: '8',
},
],
[
{
title: 'Location',
colspan: '1',
},
{
title: ' Other Information',
colspan: '2'
},
{
title: ' Costs',
colspan: '5'
}
],
]
}]
});
}
}
Frozen nested headers
The following example starts the spreadsheet with a basic nested headers configuration.
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<br/><input type='button' value='Update' id="updatebtn" />
<script>
jspreadsheet.setLicense('YTA1ZjlhMjdiZmFlNjI4OTQyM2Q5OTlhMmI1OGM5MzBiZjgxMTk1ZTRlOWNiMTkwYjBiZTc5M2FmNWQ3YmIzZGIwMmViMTE1YTc1NTU4MGVmZDQ1NWNmNzA2ZmQ0OTVkZThmYzRhNTllZDBhYmJjNmVkY2Y0N2RiODlhZTU5NDUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EYzRNelExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
let table = jspreadsheet(document.getElementById('spreadsheet'), {
tabs: true,
toolbar: true,
worksheets: [{
minDimensions: [22,10],
freezeColumns: 2,
tableOverflow: true,
tableWidth: 600,
nestedHeaders:[
[
{
title: 'Location',
colspan: 2,
frozen: true,
},
{
title: ' Information',
colspan: '10'
},
{
title: ' Another information',
colspan: '10'
}
],
]
}]
});
document.getElementById('updatebtn').onclick = () => table[0].setNestedCell(0, 0, { title:'New title',tooltip:'New tooltip' });
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'YTA1ZjlhMjdiZmFlNjI4OTQyM2Q5OTlhMmI1OGM5MzBiZjgxMTk1ZTRlOWNiMTkwYjBiZTc5M2FmNWQ3YmIzZGIwMmViMTE1YTc1NTU4MGVmZDQ1NWNmNzA2ZmQ0OTVkZThmYzRhNTllZDBhYmJjNmVkY2Y0N2RiODlhZTU5NDUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EYzRNelExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default function App() {
const spreadsheet = useRef();
const nestedHeaders = [
[
{
title: 'Location',
colspan: 2,
frozen: true,
},
{
title: ' Information',
colspan: '10'
},
{
title: ' Another information',
colspan: '10'
}
],
];
return (
<Spreadsheet ref={spreadsheet} license={license} toolbar tabs>
<Worksheet nestedHeaders={nestedHeaders} minDimensions={[22,10]} freezeColumns="2" tableOverflow tableWidth="600" />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license" toolbar tabs>
<Worksheet :nestedHeaders="nestedHeaders" :minDimensions="[22,10]"
freezeColumns="2" tableOverflow tableWidth="600" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'YTA1ZjlhMjdiZmFlNjI4OTQyM2Q5OTlhMmI1OGM5MzBiZjgxMTk1ZTRlOWNiMTkwYjBiZTc5M2FmNWQ3YmIzZGIwMmViMTE1YTc1NTU4MGVmZDQ1NWNmNzA2ZmQ0OTVkZThmYzRhNTllZDBhYmJjNmVkY2Y0N2RiODlhZTU5NDUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EYzRNelExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
data() {
const nestedHeaders = [
[
{
title: 'Location',
colspan: 2,
frozen: true,
},
{
title: ' Information',
colspan: '10'
},
{
title: ' Another information',
colspan: '10'
}
],
];
return {
nestedHeaders,
license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"
import jSuites from "jSuites";
jspreadsheet.setLicense('YTA1ZjlhMjdiZmFlNjI4OTQyM2Q5OTlhMmI1OGM5MzBiZjgxMTk1ZTRlOWNiMTkwYjBiZTc5M2FmNWQ3YmIzZGIwMmViMTE1YTc1NTU4MGVmZDQ1NWNmNzA2ZmQ0OTVkZThmYzRhNTllZDBhYmJjNmVkY2Y0N2RiODlhZTU5NDUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRME1EYzRNelExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>
<input type='button' value='Update'
(click)="this.worksheets[0].setNestedCell(0, 0, { title:'New title',tooltip:'New tooltip' })">`,
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
worksheets: jspreadsheet.worksheetInstance[];
ngAfterViewInit() {
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
data: [
['BR', 'Cheese', 1],
['CA', 'Apples', 0],
['US', 'Carrots', 1],
['GB', 'Oranges', 0],
],
columns: [
{
type: 'autocomplete',
title: 'Country',
width: '200px',
url: '/jspreadsheet/countries'
},
{
type: 'dropdown',
title: 'Food',
width: '100px',
source: ['Apples','Bananas','Carrots','Oranges','Cheese']
},
{
type: 'checkbox',
title: 'Stock',
width: '100px'
},
{
type: 'number',
title: 'Price',
width: '100px'
},
],
minDimensions: [8,4],
nestedHeaders:[
[
{
title: 'Supermarket information',
colspan: '8',
},
],
[
{
title: 'Location',
colspan: '1',
},
{
title: ' Other Information',
colspan: '2'
},
{
title: ' Costs',
colspan: '5'
}
],
]
}]
});
}
}