Back to Documentation

Spreadsheet appearance

Jspreadsheet Pro brings a few different ways to change the appearance of your spreadsheets, such as:

The skin classes

There are two skin classes that can be added to the spreadsheet container: jexcel_default, jexcel_modern.

function skin(o) {
    if (document.getElementById('spreadsheet').classList.contains('jexcel_modern')) {
        // Back to the default skin
        document.getElementById('spreadsheet').classList.remove('jexcel_modern');
    } else {
        // Change to the modern skin
        document.getElementById('spreadsheet').classList.add('jexcel_modern');
    }
}

The CSS themes

A few CSS variables are available so the user can customize the spreadsheet. There is a theme editor to do some testing using those variables.

<link rel="stylesheet" href="/v7/theme.css" type="text/css" />
<style>
    :root {
    --jexcel_header_color: #000;
    --jexcel_header_color_highlighted: #000;
    --jexcel_header_background: #f3f3f3;
    --jexcel_header_background_highlighted: #dcdcdc;
    --jexcel_content_color: #000;
    --jexcel_content_color_highlighted: #000;
    --jexcel_content_background: #fff;
    --jexcel_content_background_highlighted: rgba(0,0,0,0.05);
    --jexcel_menu_background: #fff;
    --jexcel_menu_background_highlighted: #ebebeb;
    --jexcel_menu_color: #555;
    --jexcel_menu_color_highlighted: #555;
    --jexcel_menu_box_shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
    --jexcel_border_color: #ccc;
    --jexcel_border_color_highlighted: #000;
    --active_color: #007aff;
}
</style>

Programmatically updates

It is possible to manage the cell style using the following methods: setStyle, resetStyle, destroyStyle.

table.setStyle('A1', 'background-color', 'red');

Working example

External CSS

External CSS can be used, and normally are much faster. But, it is important to bear in mind external CSS are not taken in consideration when using the copy and paste shortcuts. A very good example is to create an odd/even background colors in the spreadsheet rows.

.jexcel tbody tr:nth-child(even) {
  background-color: #EEE9F1 !important;
}