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.
MethodDescription
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.
EventDescription
onchangestyleonchangestyle(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.
PropertyDescription
style: objectEach 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.





Source code

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

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

<script>
// Set the JSS spreadsheet license
jspreadsheet.setLicense('ZDI4Y2IwZWJmNWMyZjE2NjY4ZGFlYWMxZGMzMGYxNmMwZTU4ZTBlNmZjMjQxZDU1YWU2NTk2MzQ4N2UyNGNlOWNkNTVmYTg3NDdlMDNjZGUwZTU5OWFiYTRkODYwNWIwOTVlZWYxM2E0ZGEwZTI0YzRjM2JjMzVjNDE3OThjZjAsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTNNRFkyTmpnd015d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=');

// Create the spreadsheet
var 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;',
        },
    }]
});
</script>

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

<button type="button" onclick="w[0].setStyle('A2', 'background-color', 'yellow');">
Set A2 background
</button>

<button type="button" onclick="w[0].setStyle({ A3:'font-weight: bold;', B3:'background-color: yellow;' });">
Change A3, B3 style
</button>

<button type="button" onclick="document.getElementById('console').innerHTML = w[0].getStyle('A1');">
Get A1 style
</button>

<button type="button" onclick="document.getElementById('console').innerHTML = JSON.stringify(w[0].getStyle());">
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/v8/jspreadsheet.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

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

<script>
// Set the JSS spreadsheet license
jspreadsheet.setLicense('ZDI4Y2IwZWJmNWMyZjE2NjY4ZGFlYWMxZGMzMGYxNmMwZTU4ZTBlNmZjMjQxZDU1YWU2NTk2MzQ4N2UyNGNlOWNkNTVmYTg3NDdlMDNjZGUwZTU5OWFiYTRkODYwNWIwOTVlZWYxM2E0ZGEwZTI0YzRjM2JjMzVjNDE3OThjZjAsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTNNRFkyTmpnd015d2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=');

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

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