Spreadsheet Style

It is possible to apply CSS to the spreadsheet cell DOM elements. That is faster and sometimes useful, but there won’t be any internal tracking, history, or persistence for those cases. For that reason, the initialization property style is available to define the initial cell style. Changes in the Style will be tracked and included in the persistence and history.

Documentation

Methods

You can manage the spreadsheet cell style with the following methods.

Method	Description
getStyle	Get style from one or multiple cells. `spreadsheet.getStyle(cellName: String \| null)` @Param mixed - cell identification or null for the whole table.
setStyle	Set a single cell style by name, or set the style for multiple cells. `spreadsheet.setStyle(cellName: String \| Object, property: String, value: String, force: Boolean)` @param {string\|Object} - ID of a cell or an object with multiple cells and the style definitions. @param {string} property - Style property @param {string} value - Style value @param {boolean} force - Force the style (do not toggle style)
resetStyle	Reset the style for one or multiple cells `spreadsheet.resetStyle(cellName: Mixed \| Array)` @param {string\|Object} - String to identify a cell or an array of cell identifications (A1, A2... etc)

Events

Spreadsheet style related events.

Event	Description
onchangestyle	`onchangestyle(worksheet: Object, newValue: Object, oldValue: Objectd) : void` The method will return an object with the cells and the properties applied.

Initial Settings

The following property is available through the initialization of the online spreadsheet.

Property	Description
style: object	Each property of the object represents a cellName and its value for the style.

Examples

Basic cell styling

Define cell style on initialization and programmatically using the following example.

After initialization, it is still possible to manage the cell style programmatically using the getStyle or setStyle methods.

<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/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>

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

// Create the spreadsheet
let w = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['US', 'Cheese', 'Yes', '2019-02-12'],
            ['CA;US;UK', 'Apples', 'Yes', '2019-03-01'],
            ['CA;BR', 'Carrots', 'No', '2018-11-10'],
            ['BR', 'Oranges', 'Yes', '2019-01-12'],
        ],
        columns: [
            {
                type: 'dropdown',
                title: 'Product Origin',
                width: 300,
                url: '/jspreadsheet/countries', // Remote source for your dropdown
                autocomplete: true,
                multiple: true
            },
            {
                type: 'text',
                title: 'Description',
                width: 200
            },
            {
                type: 'dropdown',
                title: 'Stock',
                width: 100 ,
                source: ['No','Yes']
            },
            {
                type: 'calendar',
                title: 'Best before',
                width: 100
            },
        ],
        style: {
            A1:'background-color: orange;',
            B1:'background-color: orange;',
        },
    }]
});

document.getElementById("setbackgroundbtn").onclick = () => w[0].setStyle('A2', 'background-color', 'yellow');
document.getElementById("changestylebtn").onclick = () => w[0].setStyle({ A3:'font-weight: bold;', B3:'background-color: yellow;' });
document.getElementById("geta1stylebtn").onclick = () => document.getElementById('console').innerHTML = w[0].getStyle('A1');
document.getElementById("gettablestylebtn").onclick = () => document.getElementById('console').innerHTML = JSON.stringify(w[0].getStyle());
</script>

<p><textarea id='console' style='width:100%;max-width:600px;height:100px;'></textarea></p>

<button type="button" id="setbackgroundbtn">Set A2 background</button>
<button type="button" id="changestylebtn">Change A3, B3 style</button>
<button type="button" id="geta1stylebtn">Get A1 style</button>
<button type="button" id="gettablestylebtn">Get the table style</button>
</html>

CSS styling

The following example uses global CSS to apply a background color on even rows.

<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/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>

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

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [8, 10],
    }]
});
</script>

<style>
#spreadsheet tbody tr:nth-child(even) {
  background-color: #eee;
}
</style>
</html>

Edit this page on GitHub