Spreadsheet Style

It is possible to apply CSS to the spreadsheet cell DOM elements. That would be faster and sometimes useful, but there would not be an internal tracking, history, or persistence for those cases. For that reason, the initialization property style is available to define the initial cell style, and changes on the Object would 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 multiple cells.
spreadsheet.setStyle(cellName: Mixed | Array, comments: String=)
@param {string|Object} - Identication of an cell or an array of objects with multiple comments
@param {string=} comments - string with the comments if mixed is a string.
resetStyle Set a single cell style by name, or set multiple cells.
spreadsheet.setStyle(cellName: Mixed | Array, comments: String=)
@param {string|Object} - Identication of an cell or an array of objects with multiple comments
@param {string=} comments - string with the comments if mixed is a string.


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 programatically using the following example.

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





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>
var 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'],
];

var spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets [{
        data: data,
        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;',
        },
    }],
    license: 'MWEzMTE4MGFkNWY5YzQzNjE4NjZiNmE1NThhM2M0Yjc1NmUyNGM2N2YzZjU2NDQ5ZjM1MGFiYWNmOTFkNTkwODFiYmYwNDE1YjhhM2ViNGUyMzM2YjYzY2Q4NTcyMWE4MGQ4YjVjNjI2NWY4NWYyMTBjMWU5M2ZmNTU4OGI1MDQsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5UZzVOakk0TURBc0ltUnZiV0ZwYmlJNld5SnFjM0J5WldGa2MyaGxaWFF1WTI5dElpd2lZM05pTG1Gd2NDSXNJbXB6YUdWc2JDNXVaWFFpTENKc2IyTmhiR2h2YzNRaVhTd2ljR3hoYmlJNklqSWlMQ0p6WTI5d1pTSTZXeUoyTnlJc0luWTRJaXdpY0dGeWMyVnlJaXdpYzJobFpYUnpJaXdpWm05eWJYTWlMQ0p5Wlc1a1pYSWlMQ0ptYjNKdGRXeGhJbDE5',
});
</script>

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

<button type="button" onclick="spreadsheet.setStyle('A2', 'background-color', 'yellow');">Set A2 background</button>
<button type="button" onclick="spreadsheet.setStyle({ A3:'font-weight: bold; color:red;', B3:'background-color: yellow;', C3:'text-decoration: underline;', A4:'text-align:left;' });">Change A3, B3, C3, A4 style</button>
<button type="button" onclick="document.getElementById('console').innerHTML = spreadsheet.getStyle('A1');">Get A1 style</button>
<button type="button" onclick="document.getElementById('console').innerHTML = JSON.stringify(spreadsheet.getStyle());">Get the table style</button>
</html>

CSS styling

The following example uses a 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>
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets [{
        minDimensions: [8, 10],
    }],
    license: 'MWEzMTE4MGFkNWY5YzQzNjE4NjZiNmE1NThhM2M0Yjc1NmUyNGM2N2YzZjU2NDQ5ZjM1MGFiYWNmOTFkNTkwODFiYmYwNDE1YjhhM2ViNGUyMzM2YjYzY2Q4NTcyMWE4MGQ4YjVjNjI2NWY4NWYyMTBjMWU5M2ZmNTU4OGI1MDQsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5UZzVOakk0TURBc0ltUnZiV0ZwYmlJNld5SnFjM0J5WldGa2MyaGxaWFF1WTI5dElpd2lZM05pTG1Gd2NDSXNJbXB6YUdWc2JDNXVaWFFpTENKc2IyTmhiR2h2YzNRaVhTd2ljR3hoYmlJNklqSWlMQ0p6WTI5d1pTSTZXeUoyTnlJc0luWTRJaXdpY0dGeWMyVnlJaXdpYzJobFpYUnpJaXdpWm05eWJYTWlMQ0p5Wlc1a1pYSWlMQ0ptYjNKdGRXeGhJbDE5',
});
</script>

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