In this section, you can find information about all the methods, settings, and events related to the data grid toolbar. Additionally, you can explore customizations and other essential settings for the toolbars.
Toolbar icons
The use of Material icons style sheet is required for utilizing the toolbar.
Documentation
Methods
You can use the methods below to display, conceal or customize the toolbar.
Method
Description
getToolbar
Get the toolbar's current settings. getToolbar(settings: Object) : Object
setToolbar
Redefine the toolbar settings.
@param {Object} - Toolbar object, the allowed options are described in the table below.
setToolbar(settings: Object) : void
showToolbar
Show the toolbar using the current settings. showToolbar() : void
hideToolbar
Hide the toolbar. hideToolbar() : void
refreshToolbar
Refresh the toolbar. refreshToolbar(worksheet: Object) : void
Settings
It is possible to customize the toolbar items though the initialization using the following properties.
Property
Description
toolbar?: boolean | 'extended' | function | object
Toolbar Object
It is possible to customize the toolbar items though the initialization using the following properties.
Property
Description
Toolbar general properties
container: boolean
Show the toolbar container border.
badge: boolean
Add a badge container for each toolbar element.
title: boolean
Show title below the icons.
responsive: boolean
Responsive toolbar. Default: false
items: Items[]
Items for the toolbar.
Toolbar item properties
type: string
Element type: icon | divisor | label | select
content: string
Content of the toolbar element
title: boolean
Tooltip for the toolbar element
width: number
Toolbar element width
active: boolean
Initial state for the toolbar element
class: string
CSS Class for each toolbar element
value: number
The initially selected option for the type: select
render: method
Render method parser for the elements in the dropdown when type: select
onclick: method
When an item is clicked
onchange: method
When a new item is selected. Valid for the type: select.
updateState: Function
Create the item state controller. updateState: function(toolbarElement: HTMLElement, toolbarInstance: Object, toolbarItem: HTMLElement, worksheet: Object) => void
Examples
Toolbar visibility
The example below demonstrates how to enable the default toolbar and programmatically show or hide it after initialization.
JavaScript example
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/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="spreadsheet1"></div>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTM4ZTE2ZjFkYWM1ODc0ZGE3ZmNkODI0NTA1OWFmODE5MTM3MjMzNDQwNDQ0MmEzN2NlY2QwNzJmODkxNjhhNGE4OGJhYzg2Y2IxOTkyNGQ5ZDM1YjJjZWFlNDBlNzc3MjhjMWZmODA2ZTNjODNhYTlkYzA4M2QyNzMwNmJiN2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6Tnpnek5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
// Create the spreadsheet
var grid = jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [
{ minDimensions: [8,5] },
],
toolbar: true,
});
</script>
<input type='button' value='Show Toolbar' onclick="grid[0].parent.showToolbar();">
<input type='button' value='Hide Toolbar' onclick="grid[0].parent.hideToolbar();">
</html>
import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTM4ZTE2ZjFkYWM1ODc0ZGE3ZmNkODI0NTA1OWFmODE5MTM3MjMzNDQwNDQ0MmEzN2NlY2QwNzJmODkxNjhhNGE4OGJhYzg2Y2IxOTkyNGQ5ZDM1YjJjZWFlNDBlNzc3MjhjMWZmODA2ZTNjODNhYTlkYzA4M2QyNzMwNmJiN2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6Tnpnek5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
@Component({
selector: "app-root",
template: `
<div #spreadsheet></div>
<input type="button" value="Add new validation" (click)="this.worksheets[0].showToolbar();" />
<input type="button" value="Remove validation" (click)="this.worksheets[0].hideToolbar();" />`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngOnInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [
{ minDimensions: [8,5] },
],
toolbar: true
});
}
}
Custom toolbar method handler
The toolbar property can be set as a function, which allows for the addition of a new custom item to the default toolbar without the need to create a new toolbar from scratch. See the example below.
JavaScript example
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<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://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet-2"></div>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTM4ZTE2ZjFkYWM1ODc0ZGE3ZmNkODI0NTA1OWFmODE5MTM3MjMzNDQwNDQ0MmEzN2NlY2QwNzJmODkxNjhhNGE4OGJhYzg2Y2IxOTkyNGQ5ZDM1YjJjZWFlNDBlNzc3MjhjMWZmODA2ZTNjODNhYTlkYzA4M2QyNzMwNmJiN2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6Tnpnek5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet-2'), {
toolbar: function(toolbar) {
// Add a new custom item in the end of my toolbar
toolbar.items.push({
tooltip: 'My custom item',
content: 'share',
onclick: function() {
alert('Custom click');
}
});
return toolbar;
},
worksheets: [{
minDimensions: [8,10],
}]
});
</script>
</html>
React example
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'OTM4ZTE2ZjFkYWM1ODc0ZGE3ZmNkODI0NTA1OWFmODE5MTM3MjMzNDQwNDQ0MmEzN2NlY2QwNzJmODkxNjhhNGE4OGJhYzg2Y2IxOTkyNGQ5ZDM1YjJjZWFlNDBlNzc3MjhjMWZmODA2ZTNjODNhYTlkYzA4M2QyNzMwNmJiN2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6Tnpnek5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Toolbar handler
const toolbar = (toolbar) => {
// Add a new custom item in the end of my toolbar
toolbar.items.push({
tooltip: 'My custom item',
content: 'share',
onclick: function() {
alert('Custom click');
}
});
return toolbar;
}
// Render component
return (
<Spreadsheet ref={spreadsheet} license={license} toolbar={toolbar}>
<Worksheet minDimensions={[8,10]} />
</Spreadsheet>
);
}
Vue example
<template>
<Spreadsheet ref="spreadsheet" :license="license" toolbar>
<Worksheet :minDimensions={[8,10]} />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
const license = 'OTM4ZTE2ZjFkYWM1ODc0ZGE3ZmNkODI0NTA1OWFmODE5MTM3MjMzNDQwNDQ0MmEzN2NlY2QwNzJmODkxNjhhNGE4OGJhYzg2Y2IxOTkyNGQ5ZDM1YjJjZWFlNDBlNzc3MjhjMWZmODA2ZTNjODNhYTlkYzA4M2QyNzMwNmJiN2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6Tnpnek5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
// Toolbar handler
toolbar(toolbar) {
// Add a new custom item in the end of my toolbar
toolbar.items.push({
tooltip: 'My custom item',
content: 'share',
onclick: function() {
alert('Custom click');
}
});
return toolbar;
}
},
data() {
return {
license,
};
}
}
</script>
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core";
import * as jspreadsheet from "jspreadsheet";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTM4ZTE2ZjFkYWM1ODc0ZGE3ZmNkODI0NTA1OWFmODE5MTM3MjMzNDQwNDQ0MmEzN2NlY2QwNzJmODkxNjhhNGE4OGJhYzg2Y2IxOTkyNGQ5ZDM1YjJjZWFlNDBlNzc3MjhjMWZmODA2ZTNjODNhYTlkYzA4M2QyNzMwNmJiN2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6Tnpnek5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
@Component({
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Worksheets
worksheets: jspreadsheet.worksheetInstance[];
// Create a new data grid
ngOnInit() {
// Create spreadsheet
this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
toolbar: function(toolbar) {
// Add a new custom item in the end of my toolbar
toolbar.items.push({
tooltip: 'My custom item',
content: 'share',
onclick: function() {
alert('Custom click');
}
});
return toolbar;
},
worksheets: [{
minDimensions: [8,10],
}]
});
}
}
Custom toolbar object
The toolbar property can be utilized to customize the items present in the spreadsheet toolbar.
JavaScript example
<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<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://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet-3"></div>
<script>
let customToolbar = {
items: [
{
content: 'save',
onclick: function () {
jspreadsheet.current.download();
}
},
{
type:'divisor',
},
{
type:'select',
width: '160px',
options: [ 'Verdana', 'Arial', 'Courier New' ],
render: function(e) {
return '<span style="font-family:' + e + '">' + e + '</span>';
},
onchange: function(a,b,c,d) {
jspreadsheet.current.setStyle(jspreadsheet.current.getSelected(), 'font-family', d);
}
},
{
type: 'i',
content: 'format_bold',
onclick: function(a,b,c) {
jspreadsheet.current.setStyle(jspreadsheet.current.getSelected(), 'font-weight', 'bold');
}
},
{
type: 'i',
content: 'format_italic',
onclick: function(a,b,c) {
jspreadsheet.current.setStyle(jspreadsheet.current.getSelected(), 'font-style', 'italic');
}
},
{
content: 'search',
onclick: function(a,b,c) {
if (c.children[0].innerText == 'search') {
jspreadsheet.current.showSearch();
c.children[0].innerText = 'search_off';
} else {
jspreadsheet.current.hideSearch();
c.children[0].innerText = 'search';
}
},
tooltip: 'Toggle Search',
updateState: function(a,b,c,worksheet) {
// Call this one when the worksheet is opened and on the selection of any cells
if (worksheet.options.search == true) {
c.children[0].innerText = 'search_off';
} else {
c.children[0].innerText = 'search';
}
}
}
]
}
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('OTM4ZTE2ZjFkYWM1ODc0ZGE3ZmNkODI0NTA1OWFmODE5MTM3MjMzNDQwNDQ0MmEzN2NlY2QwNzJmODkxNjhhNGE4OGJhYzg2Y2IxOTkyNGQ5ZDM1YjJjZWFlNDBlNzc3MjhjMWZmODA2ZTNjODNhYTlkYzA4M2QyNzMwNmJiN2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6Tnpnek5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09');
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet-3'), {
worksheets: [{
worksheetName: 'Toolbar example',
minDimensions: [6,5],
}]
toolbar: customToolbar
});
</script>
</html>
React example
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
const license = 'OTM4ZTE2ZjFkYWM1ODc0ZGE3ZmNkODI0NTA1OWFmODE5MTM3MjMzNDQwNDQ0MmEzN2NlY2QwNzJmODkxNjhhNGE4OGJhYzg2Y2IxOTkyNGQ5ZDM1YjJjZWFlNDBlNzc3MjhjMWZmODA2ZTNjODNhYTlkYzA4M2QyNzMwNmJiN2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6Tnpnek5pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09';
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Toolbar handler
const toolbar = {
items: [{
content: 'save',
onclick: function () {
spreadsheet.current.download();
}
},
{
type:'divisor',
},
{
type:'select',
width: '160px',
options: [ 'Verdana', 'Arial', 'Courier New' ],
render: function(e) {
return '<span style="font-family:' + e + '">' + e + '</span>';
},
onchange: function(a,b,c,d) {
spreadsheet.current.setStyle(spreadsheet.current.getSelected(), 'font-family', d);
}
},
{
type: 'i',
content: 'format_bold',
onclick: function(a,b,c) {
spreadsheet.current.setStyle(spreadsheet.current.getSelected(), 'font-weight', 'bold');
}
},
{
type: 'i',
content: 'format_italic',
onclick: function(a,b,c) {
spreadsheet.current.setStyle(spreadsheet.current.getSelected(), 'font-style', 'italic');
}
},
{
content: 'search',
onclick: function(a,b,c) {
if (c.children[0].innerText == 'search') {
spreadsheet.current.showSearch();
c.children[0].innerText = 'search_off';
} else {
spreadsheet.current.hideSearch();
c.children[0].innerText = 'search';
}
},
tooltip: 'Toggle Search',
updateState: function(a,b,c,worksheet) {
// Call this one when the worksheet is opened and on the selection of any cells
if (worksheet.options.search == true) {
c.children[0].innerText = 'search_off';
} else {
c.children[0].innerText = 'search';
}
}
}
]
}
// Render component
return (
<Spreadsheet ref={spreadsheet} license={license} toolbar={toolbar}>
<Worksheet minDimensions={[6,5]} worksheetName="Toolbar example" />
</Spreadsheet>
);
}