Spreadsheet Style

Jspreadsheet is built using real DOM elements, allowing you to apply CSS directly to cells. However, external styling lacks internal tracking, history, or persistence. Built-in settings and methods enable the management of internal styles programmatically, with full tracking and persistence capabilities.

Documentation

Methods

Manage spreadsheet cell styles with the following methods:

Method	Description
`getStyle`	Get styles from cells or entire table `getStyle(cellName?: string, onlyIndexes?: boolean): object`
`setStyle`	Set styles for cells or ranges `setStyle(cell: string \| object, property?: string, value?: string, forceOverwrite?: boolean): void`
`resetStyle`	Remove styles from cells `resetStyle(cellName: string \| string[]): void`
`getStyleId`	Find existing style ID `getStyleId(style: string): number`

Events

Events available to track style changes in your spreadsheet:

Event	Description
`onchangestyle`	Triggered when cell styles change `onchangestyle(worksheet: object, newValue: object, oldValue: object): void`

Initial Settings

The style property operates at two levels: spreadsheet-level defines global CSS arrays, worksheet-level references these by index (starting from zero) or uses direct CSS strings.

Worksheet Level

Property	Description
`style`	Each object property corresponds to a cell name and range, with the value representing either a CSS string or ID for the global style

Spreadsheet Level

Property	Description
`style`	The global style definition is an array of CSS strings to generate the CSS classes that will be used across all worksheets

Note:
When using the Vue.js wrapper, the spreadsheet's style prop is renamed to styles to prevent conflicts with Vue's built-in style attribute.

The following declaration defines the style string that are available in the spreadsheet level, and you can utilize declare the style per cell, column or row.

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [4,4],
        style: {
            'C:C': 0,
            'E1': 1,
        },
    }],
    style: ['background-color: #ccffff; font-weight: bold', 'color: red']
});

Rows and Columns Style

You can now specify a style ID as a property in the column or row initial setting declaration.

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [4,4],
        columns: [{ s: 1 }, { s: 1 }],
    }],
    style: ['background-color: #ccffff; font-weight: bold', 'color: red']
});

CSP Compliance

Jspreadsheet supports Content Security Policy (CSP) compliance through nonce support for dynamic style generation.

Spreadsheet Level

Property	Description
`nonce`	CSP nonce value that will be applied to dynamically generated style elements

Example: Basic CSP + CDN

<head>
<meta charset="utf-8">
<!-- Content Security Policy (example) -->
<meta http-equiv="Content-Security-Policy" content="
    default-src 'self';
    object-src 'none';
    script-src 'self' https://cdn.jsdelivr.net;
    style-src 'self' https://fonts.googleapis.com https://cdn.jsdelivr.net 'nonce-704a9427-e2f5-41e1-ba92-f99256b9638d';
    font-src https://fonts.gstatic.com;
    img-src 'self' data:;">

<title>Jspreadsheet</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet@12/dist/jspreadsheet.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsuites@5/dist/jsuites.min.css" />

<script src="https://cdn.jsdelivr.net/npm/jspreadsheet@12/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jsuites@5/dist/jsuites.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/formula-pro@5/dist/index.min.js"></script>
</head>
<body>
<div id="spreadsheet"></div>

<script>
// Set license and extensions
jspreadsheet.setLicense('NzA0ZTYwOWQ5OTdmYmE1ZDM0ZDExYzYyYjAzODM1ZDNhMmUyOGZmOTk3MmJlNzIwZjIwYjBhOTdlYjZlODE1NTM3NGY4NTQyZDk3YWE0ZjA3ZjJhYzE5NGMzNjQ3OTcyOGZlNDc4NTc0ZDhkYjRkYmEwM2JhOTNmZGU3NTNhZGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');
jspreadsheet.setExtensions({ formula });

// Create the spreadsheet with CSP nonce
jspreadsheet(document.getElementById('spreadsheet'), {
    nonce: '704a9427-e2f5-41e1-ba92-f99256b9638d',
    worksheets: [{
        minDimensions: [4,4],
        style: {
            'A1': 0,
            'B1': 1,
        },
    }],
    style: [
        'background-color: #ccffff; font-weight: bold',
        'color: red; background-color: #ffffcc'
    ]
});
</script>
</body>

Examples

Worksheet Level Styling

Create a spreadsheet with style definitions at the worksheet level:

<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/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('NzA0ZTYwOWQ5OTdmYmE1ZDM0ZDExYzYyYjAzODM1ZDNhMmUyOGZmOTk3MmJlNzIwZjIwYjBhOTdlYjZlODE1NTM3NGY4NTQyZDk3YWE0ZjA3ZjJhYzE5NGMzNjQ3OTcyOGZlNDc4NTc0ZDhkYjRkYmEwM2JhOTNmZGU3NTNhZGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6,4],
        style: {
            'C:C': 'background-color: #ccffff; font-weight: bold',
            'E1': 'background-color: #ccffff;',
        },
    }]
});
</script>
</html>

import React, {useRef} from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzA0ZTYwOWQ5OTdmYmE1ZDM0ZDExYzYyYjAzODM1ZDNhMmUyOGZmOTk3MmJlNzIwZjIwYjBhOTdlYjZlODE1NTM3NGY4NTQyZDk3YWE0ZjA3ZjJhYzE5NGMzNjQ3OTcyOGZlNDc4NTc0ZDhkYjRkYmEwM2JhOTNmZGU3NTNhZGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Style
    const style = {
        'C:C': 'background-color: #ccffff; font-weight: bold',
        'E1': 'background-color: #ccffff;',
    }

    // Render component
    return (<Spreadsheet ref={spreadsheet}>
        <Worksheet style={style} minDimensions={[6, 4]}/>
    </Spreadsheet>);
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :style="style" :minDimensions="[6,4]" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzA0ZTYwOWQ5OTdmYmE1ZDM0ZDExYzYyYjAzODM1ZDNhMmUyOGZmOTk3MmJlNzIwZjIwYjBhOTdlYjZlODE1NTM3NGY4NTQyZDk3YWE0ZjA3ZjJhYzE5NGMzNjQ3OTcyOGZlNDc4NTc0ZDhkYjRkYmEwM2JhOTNmZGU3NTNhZGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    setup() {
        // Style
        const style = {
            'C:C': 'background-color: #ccffff; font-weight: bold',
            'E1': 'background-color: #ccffff;',
        }
        // Return object
        return {
            style
        };
    }
}
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzA0ZTYwOWQ5OTdmYmE1ZDM0ZDExYzYyYjAzODM1ZDNhMmUyOGZmOTk3MmJlNzIwZjIwYjBhOTdlYjZlODE1NTM3NGY4NTQyZDk3YWE0ZjA3ZjJhYzE5NGMzNjQ3OTcyOGZlNDc4NTc0ZDhkYjRkYmEwM2JhOTNmZGU3NTNhZGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [
                {
                    minDimensions: [6,4],
                    style: {
                        'C:C': 'background-color: #ccffff; font-weight: bold',
                        'E1': 'background-color: #ccffff;',
                    },
                }
            ]
        });
    }
}

Global Style Definitions

Utilize the spreadsheet-level style property to easily apply and reuse CSS styles across multiple worksheets:

<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/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('NzA0ZTYwOWQ5OTdmYmE1ZDM0ZDExYzYyYjAzODM1ZDNhMmUyOGZmOTk3MmJlNzIwZjIwYjBhOTdlYjZlODE1NTM3NGY4NTQyZDk3YWE0ZjA3ZjJhYzE5NGMzNjQ3OTcyOGZlNDc4NTc0ZDhkYjRkYmEwM2JhOTNmZGU3NTNhZGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6,4],
        style: {
            'C:C': 0, // first position of the global array
            'E1': 1,
        },
    }],
    style: [
        'background-color: #ccffff; font-weight: bold',
        'background-color: #ccffff'
    ],
});
</script>
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzA0ZTYwOWQ5OTdmYmE1ZDM0ZDExYzYyYjAzODM1ZDNhMmUyOGZmOTk3MmJlNzIwZjIwYjBhOTdlYjZlODE1NTM3NGY4NTQyZDk3YWE0ZjA3ZjJhYzE5NGMzNjQ3OTcyOGZlNDc4NTc0ZDhkYjRkYmEwM2JhOTNmZGU3NTNhZGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Style
    const globalStyle = [
        'background-color: #ccffff; font-weight: bold',
        'background-color: #ccffff'
    ]
    const style = {
        'C:C': 0, // first position of the global array
        'E1': 1,
    }
    // Render component
    return (
        <Spreadsheet ref={spreadsheet} style={globalStyle}>
            <Worksheet style={style} minDimensions={[6,4]} />
        </Spreadsheet>
    );
}

<template>
    <Spreadsheet ref="spreadsheet" :styles="globalStyle">
        <Worksheet :style="style" :minDimensions="[6,4]" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzA0ZTYwOWQ5OTdmYmE1ZDM0ZDExYzYyYjAzODM1ZDNhMmUyOGZmOTk3MmJlNzIwZjIwYjBhOTdlYjZlODE1NTM3NGY4NTQyZDk3YWE0ZjA3ZjJhYzE5NGMzNjQ3OTcyOGZlNDc4NTc0ZDhkYjRkYmEwM2JhOTNmZGU3NTNhZGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    setup() {
        // Style
        const globalStyle = [
            'background-color: #ccffff; font-weight: bold',
            'background-color: #ccffff'
        ]
        const style = {
            'C:C': 0, // first position of the global array
            'E1': 1,
        }
        // Return object
        return {
            globalStyle,
            style
        };
    }
}
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzA0ZTYwOWQ5OTdmYmE1ZDM0ZDExYzYyYjAzODM1ZDNhMmUyOGZmOTk3MmJlNzIwZjIwYjBhOTdlYjZlODE1NTM3NGY4NTQyZDk3YWE0ZjA3ZjJhYzE5NGMzNjQ3OTcyOGZlNDc4NTc0ZDhkYjRkYmEwM2JhOTNmZGU3NTNhZGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@Component({
    standalone: true,
    selector: "app-root",
    template: `<div #spreadsheet></div>`
})
export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                minDimensions: [6,4],
                style: {
                    'C:C': 0, // first position of the global array
                    'E1': 1,
                },
            }],
            style: [
                'background-color: #ccffff; font-weight: bold',
                'background-color: #ccffff'
            ],
        });
    }
}

Programmatic Updates

Define cell styles during initialization and change them programmatically. Even after initialization, cell styles can be managed programmatically through the getStyle() and setStyle() methods:

<html>
<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<script src="https://jsuites.net/v6/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v6/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('NzA0ZTYwOWQ5OTdmYmE1ZDM0ZDExYzYyYjAzODM1ZDNhMmUyOGZmOTk3MmJlNzIwZjIwYjBhOTdlYjZlODE1NTM3NGY4NTQyZDk3YWE0ZjA3ZjJhYzE5NGMzNjQ3OTcyOGZlNDc4NTc0ZDhkYjRkYmEwM2JhOTNmZGU3NTNhZGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

// 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: 'https://jspreadsheet.com/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("btn1").onclick = () => w[0].setStyle('A2', 'background-color', 'yellow');
document.getElementById("btn2").onclick = () => w[0].setStyle({ A3:'font-weight: bold;', B3:'background-color: yellow;' });
document.getElementById("btn3").onclick = () => document.getElementById('console').innerHTML = w[0].getStyle('A1');
document.getElementById("btn4").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>

<input type="button" value="Set A2 background" id="btn1">
<input type="button" value="Change A3, B3 style" id="btn2">
<input type="button" value="Get A1 style" id="btn3">
<input type="button" value="Get the table style" id="btn4">
</html>

import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzA0ZTYwOWQ5OTdmYmE1ZDM0ZDExYzYyYjAzODM1ZDNhMmUyOGZmOTk3MmJlNzIwZjIwYjBhOTdlYjZlODE1NTM3NGY4NTQyZDk3YWE0ZjA3ZjJhYzE5NGMzNjQ3OTcyOGZlNDc4NTc0ZDhkYjRkYmEwM2JhOTNmZGU3NTNhZGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    const console = useRef();
    const 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'],
    ];
    const columns = [
        {
            type: 'dropdown',
            title: 'Product Origin',
            width: 300,
            url: 'https://jspreadsheet.com/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
        },
    ];
    const style = {
        A1:'background-color: orange;',
        B1:'background-color: orange;',
    };
    // Render component
    return (
        <>
            <Spreadsheet ref={spreadsheet}>
                <Worksheet data={data} columns={columns} style={style} />
            </Spreadsheet>
            <textarea ref={console} style={{ width: '100%', maxWidth: '600px', height: '100px'}}></textarea>
            <input type="button" value="Set A2 background"
                onClick={() => spreadsheet.current[0].setStyle('A2', 'background-color', 'yellow')} />
            <input type="button" value="Change A3, B3 style"
                onClick={() => spreadsheet.current[0].setStyle({ A3:'font-weight: bold;', B3:'background-color: yellow;' })} />
            <input type="button" value="Get A1 style"
                onClick={() => console.current.innerHTML = spreadsheet.current[0].getStyle('A1')} />
            <input type="button" value="Get the table style"
                onClick={() => console.current.innerHTML = JSON.stringify(spreadsheet.current[0].getStyle())} />
        </>
    );
}

<template>
    <Spreadsheet ref="spreadsheet">
        <Worksheet :data="data" :columns="columns" :style="style" />
    </Spreadsheet>
    <textarea ref="consoleRef" style="width:100%;max-width:600px;height:100px;"></textarea>
    <input type="button" value="Set A2 background" @click="setStyle1" />
    <input type="button" value="Change A3, B3 style" @click="setStyle2" />
    <input type="button" value="Get A1 style" @click="setStyle3" />
    <input type="button" value="Get the table style" @click="setStyle4" />
</template>

<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import { ref } from "vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzA0ZTYwOWQ5OTdmYmE1ZDM0ZDExYzYyYjAzODM1ZDNhMmUyOGZmOTk3MmJlNzIwZjIwYjBhOTdlYjZlODE1NTM3NGY4NTQyZDk3YWE0ZjA3ZjJhYzE5NGMzNjQ3OTcyOGZlNDc4NTc0ZDhkYjRkYmEwM2JhOTNmZGU3NTNhZGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

export default {
    components: { Spreadsheet, Worksheet },
    setup() {
        const 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"]
        ];
        const columns = [
            {
                type: "dropdown",
                title: "Product Origin",
                width: 300,
                url: "https://jspreadsheet.com/jspreadsheet/countries",
                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 }
        ];
        const style = {
            A1: "background-color: orange;",
            B1: "background-color: orange;"
        };

        const consoleRef = ref();

        return { data, columns, style, consoleRef };
    },
    methods: {
        setStyle1() {
            this.$refs.spreadsheet[0].setStyle("A2", "background-color", "yellow");
        },
        setStyle2() {
            this.$refs.spreadsheet[0].setStyle({
                A3: "font-weight: bold;",
                B3: "background-color: yellow;"
            });
        },
        setStyle3() {
            this.$refs.consoleRef.value =
                this.$refs.spreadsheet[0].getStyle("A1");
        },
        setStyle4() {
            this.$refs.consoleRef.value = JSON.stringify(
                this.$refs.spreadsheet[0].getStyle()
            );
        }
    }
};
</script>

import { Component, ViewChild, ElementRef, AfterViewInit } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzA0ZTYwOWQ5OTdmYmE1ZDM0ZDExYzYyYjAzODM1ZDNhMmUyOGZmOTk3MmJlNzIwZjIwYjBhOTdlYjZlODE1NTM3NGY4NTQyZDk3YWE0ZjA3ZjJhYzE5NGMzNjQ3OTcyOGZlNDc4NTc0ZDhkYjRkYmEwM2JhOTNmZGU3NTNhZGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVNU56azJNamt4TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5');

@Component({
    standalone: true,
    selector: "app-root",
    template: `
      <div #spreadsheet></div>
      <textarea #consoleRef style="width:100%;max-width:600px;height:100px;"></textarea>
        <input type="button" value="Set A2 background"
          (click)="worksheets[0].setStyle('A2', 'background-color', 'yellow')" />
        <input type="button" value="Change A3, B3 style"
          (click)="worksheets[0].setStyle({ A3: 'font-weight: bold;', B3: 'background-color: yellow;' })" />
        <input type="button" value="Get A1 style" (click)="getA1Style()" />
        <input type="button" value="Get the table style" (click)="getTableStyle()" />
    `
  })
  export class AppComponent implements AfterViewInit {
    @ViewChild("spreadsheet") spreadsheet!: ElementRef;
    @ViewChild("consoleRef") consoleRef!: ElementRef<HTMLTextAreaElement>;
  
    worksheets: jspreadsheet.worksheetInstance[];
  
    ngAfterViewInit() {
      this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
        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: "https://jspreadsheet.com/jspreadsheet/countries",
                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;"
            },
            tableOverflow: true,
            minDimensions: [4, 4]


          }
        ]
      });
    }
  
    getA1Style() {
      this.consoleRef.nativeElement.value = this.worksheets[0].getStyle('A1') as string;
    }
  
    getTableStyle() {
      this.consoleRef.nativeElement.value = JSON.stringify(this.worksheets[0].getStyle());
    }
  }

Row or Column style using ranges

Starting with version 11.1.0, you can programmatically apply styles to entire rows or columns using ranges.

// Apply style to the first column
instance.setStyle('A:A', 'background-color', 'pink');
// Apply style to the first row
instance.setStyle('1:1', 'background-color', 'blue');

Reset All Style

The following script can be used to reset the style of the entire data grid.

instance.resetStyle(Object.keys(instance.getStyle()));

External CSS styling

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

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

<script>
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [8, 10],
    }]
});
</script>
<style>
#spreadsheet tbody tr:nth-child(even) {
    background-color: #eee;
}
</style>

Edit this page on GitHub