Spreadsheet Layout Customization

This section provides insights into configuring and customizing the visual appearance of your spreadsheets. Using native classes, thematic elements, or external CSS, you can refine your spreadsheet's overall look and feel to align with your application's design.

For customizing individual cell styles, visit our comprehensive cell style documentation: Cell Style Documentation

Theme Builder: Use the interactive Theme Builder to create custom themes with live preview and export ready-to-use CSS.

Appearance Configuration

Layout Attributes

Configure the visual appearance of your spreadsheet using these attributes:

Method	Description
`gridline: boolean`	Toggles the visibility of the grid lines

Theme Classes

Apply these CSS classes to the spreadsheet container for different visual themes:

Class	Description
`jss_modern`	Modern flat design with subtle shadows

Examples

Change the Visual Style

Jspreadsheet supports two built-in visual layouts: default and modern. To apply the modern layout, add the jss_modern class to the DIV container of the spreadsheet, as demonstrated in the example below:

<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> <p><input type="button" id="btn1" value="Toggle Style" /></p> <script> // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); let root = document.getElementById('spreadsheet'); jspreadsheet(root, { worksheets: [ { minDimensions: [6,6] }, ] }); document.getElementById("btn1").onclick = function() { if (root.classList.contains('jss_modern')) { root.classList.remove('jss_modern'); } else { root.classList.add('jss_modern'); } } </script> </html>

import React, {useRef} from "react"; import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); export default function App() { const spreadsheet = useRef(); const toggle = () => { const element = spreadsheet.current[0].element; if (element.classList.contains("jss_modern")) { element.classList.remove("jss_modern"); } else { element.classList.add("jss_modern"); } }; return ( <> <Spreadsheet ref={spreadsheet}> <Worksheet /> </Spreadsheet> <button type="button" onClick={toggle}> Toggle </button> </> ); }

<template> <Spreadsheet ref="spreadsheet"> <Worksheet /> </Spreadsheet> <button type="button" @click="toggle">Toggle</button> </template> <script> import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); export default { components: { Spreadsheet, Worksheet, }, methods: { toggle() { if (this.$refs.spreadsheet.el.classList.contains('jss_modern')) { this.$refs.spreadsheet.el.classList.remove('jss_modern'); } else { this.$refs.spreadsheet.el.classList.add('jss_modern'); } } } } </script>

import { Component, ViewChild, ElementRef } from "@angular/core"; import jspreadsheet from "jspreadsheet"; import "jspreadsheet/dist/jspreadsheet.css"; import "jsuites/dist/jsuites.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // Create component @Component({ selector: "app-root", template: `<div #spreadsheet></div> <button type="button" (click)="toggle()">Toggle</button>`, }) export class AppComponent { @ViewChild("spreadsheet") spreadsheet: ElementRef; // Worksheets worksheets: jspreadsheet.worksheetInstance[]; // Create a new data grid ngAfterViewInit() { // Create spreadsheet this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, { worksheets: [{ minDimensions: [10,10] }], }); } toggle() { if (this.spreadsheet.nativeElement.classList.contains('jss_modern')) { this.spreadsheet.nativeElement.classList.remove('jss_modern'); } else { this.spreadsheet.nativeElement.classList.add('jss_modern'); } } }

Update the Spreadsheet Gridlines

The example below demonstrates how to add or remove the worksheet gridlines.

<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> <p><input type="button" value="Toggle Gridline" id="btn1"></p> <script> const toggle = function(worksheet) { if (worksheet.table.classList.contains('jss_nogridline')) { worksheet.table.classList.remove('jss_nogridline'); } else { worksheet.table.classList.add('jss_nogridline'); } } // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // Create a new spreadsheet let worksheets = jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ data: [ ['Mazda', 2001, 2000, 1], ['Peugeot', 2010, 5000, 1], ['Honda Fit', 2009, 3000, 1], ['Honda CRV', 2010, 6000, 0], ], gridline: false, }] }); document.getElementById("btn1").onclick = () => toggle(worksheets[0]); </script> </html>

import React, { useRef } from "react"; import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // Toggle the data gridlines const toggle = function(worksheet) { if (worksheet.table.classList.contains('jss_nogridline')) { worksheet.table.classList.remove('jss_nogridline'); } else { worksheet.table.classList.add('jss_nogridline'); } } // Create the component export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Data const data = [ ['Mazda', 2001, 2000, 1], ['Peugeot', 2010, 5000, 1], ['Honda Fit', 2009, 3000, 1], ['Honda CRV', 2010, 6000, 0], ] // Render data grid component return ( <> <Spreadsheet ref={spreadsheet} toolbar={true} gridline={true}> <Worksheet data={data} /> </Spreadsheet> <input type="button" value="toggle()" onClick={() => toggle(spreadsheet.current[0])} /> </> ); }

<template> <Spreadsheet ref="spreadsheet" :toolbar="true"> <Worksheet :data="data" /> </Spreadsheet> <input type="button" value="toggle()" @click="toggle" /> </template> <script> import { Spreadsheet, Worksheet } from "@jspreadsheet/vue"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); export default { components: { Spreadsheet, Worksheet, }, methods: { toggle() { let worksheet = this.$refs.spreadsheet.current[0]; if (worksheet.table.classList.contains('jss_nogridline')) { worksheet.table.classList.remove('jss_nogridline'); } else { worksheet.table.classList.add('jss_nogridline'); } } }, data() { const data = [ ['Mazda', 2001, 2000, 1], ['Peugeot', 2010, 5000, 1], ['Honda Fit', 2009, 3000, 1], ['Honda CRV', 2010, 6000, 0], ]; return { data } } } </script>

import { Component, ViewChild, ElementRef } from "@angular/core"; import jspreadsheet from "jspreadsheet"; import "jspreadsheet/dist/jspreadsheet.css"; import "jsuites/dist/jsuites.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); @Component({ standalone: true, selector: "app-root", template: `<div #spreadsheet></div> <input type="button" value="toggle()" (click)="toggle()" />`, }) export class AppComponent { @ViewChild("spreadsheet") spreadsheet: ElementRef; // Worksheets worksheets: jspreadsheet.worksheetInstance[]; // Create a new data grid ngAfterViewInit() { // Create spreadsheet this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, { toolbar: true, worksheets: [{ minDimensions: [8,0], data: [ ['Mazda', 2001, 2000, 1], ['Peugeot', 2010, 5000, 1], ['Honda Fit', 2009, 3000, 1], ['Honda CRV', 2010, 6000, 0], ], }] }); } toggle() { if (this.worksheets[0].table.classList.contains('jss_nogridline')) { this.worksheets[0].table.classList.remove('jss_nogridline'); } else { this.worksheets[0].table.classList.add('jss_nogridline'); } } }

Dark mode

<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 style="background-color: black" class="lm-dark-mode"> <div id="spreadsheet"></div> </div> <script> // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); let root = document.getElementById('spreadsheet'); jspreadsheet(root, { tabs: true, toolbar: true, bar: true, tableOverflow: true, tableWidth: 600, worksheets: [ { minDimensions: [100,100] }, ] }); </script> </html>

import React, {useRef} from "react"; import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); export default function App() { const spreadsheet = useRef(); return ( <div style={{backgroundColor: 'black'}} className="lm-dark-mode"> <Spreadsheet ref={spreadsheet} tabs={true} toolbar={true} bar={true} tableOverflow={true} tableWidth={600}> <Worksheet minDimensions={[100,100]} /> </Spreadsheet> </div> ); }

<template> <div style="background-color: black" class="lm-dark-mode"> <Spreadsheet ref="spreadsheet" :tabs="true" :toolbar="true" :bar="true" :tableOverflow="true" :tableWidth="600"> <Worksheet :minDimensions="[100,100]" /> </Spreadsheet> </div> </template> <script> import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); export default { components: { Spreadsheet, Worksheet, } } </script>

import { Component, ViewChild, ElementRef } from "@angular/core"; import jspreadsheet from "jspreadsheet"; import "jspreadsheet/dist/jspreadsheet.css"; import "jsuites/dist/jsuites.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); @Component({ standalone: true, selector: "app-root", template: `<div #spreadsheet style="background-color: black" class="lm-dark-mode"></div>`, }) export class AppComponent { @ViewChild("spreadsheet") spreadsheet: ElementRef; // Worksheets worksheets: jspreadsheet.worksheetInstance[]; // Create a new data grid ngAfterViewInit() { // Create spreadsheet this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, { tabs: true, toolbar: true, bar: true, tableOverflow: true, tableWidth: 600, worksheets: [ { minDimensions: [100,100] }, ] }); } }

Creating Custom Themes

Custom Theme Example

Create a simple dark theme by targeting key elements:

/* Dark Theme */ .jss_dark table.jss > thead > tr > th { background-color: #2d3748; color: white; border-color: #4a5568; } .jss_dark table.jss > tbody > tr > td { background-color: #1a202c; color: #e2e8f0; border-color: #4a5568; } .jss_dark table.jss > tbody > tr > td:first-child { background-color: #2d3748; } .jss_dark .jss_toolbar { background-color: #2d3748; border-color: #4a5568; color: white; }

Framework Examples

<html> <script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" /> <script src="https://jsuites.net/v6/jsuites.js"></script> <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" /> <style> /* Dark Theme */ .jss_dark table.jss > thead > tr > th { background-color: #2d3748; color: white; border-color: #4a5568; } .jss_dark table.jss > tbody > tr > td { background-color: #1a202c; color: #e2e8f0; border-color: #4a5568; } .jss_dark table.jss > tbody > tr > td:first-child { background-color: #2d3748; } .jss_dark .jss_toolbar { background-color: #2d3748; border-color: #4a5568; color: white; } .jss_dark .jss_border_main { border-color: #25fffa; } </style> <div id="spreadsheet" class="jss_dark"></div> <script> // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); // Create a new spreadsheet jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ data: [ ['Product', 'Quantity', 'Price'], ['Apple', 100, 1.25], ['Banana', 75, 0.89], ['Orange', 50, 1.50], ], minDimensions: [6, 6] }] }); </script> </html>

import React, { useRef } from "react"; import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); export default function App() { // Spreadsheet array of worksheets const spreadsheet = useRef(); // Data const data = [ ['Product', 'Quantity', 'Price'], ['Apple', 100, 1.25], ['Banana', 75, 0.89], ['Orange', 50, 1.50], ]; // Render data grid component return ( <> <div className="jss_dark"> <Spreadsheet ref={spreadsheet}> <Worksheet data={data} /> </Spreadsheet> </div> </> ); }

<template> <div class="jss_dark"> <Spreadsheet ref="spreadsheet"> <Worksheet :data="data" /> </Spreadsheet> </div> </template> <script> import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue"; import "jsuites/dist/jsuites.css"; import "jspreadsheet/dist/jspreadsheet.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); export default { components: { Spreadsheet, Worksheet, }, data() { // Data const data = [ ['Product', 'Quantity', 'Price'], ['Apple', 100, 1.25], ['Banana', 75, 0.89], ['Orange', 50, 1.50], ]; return { data, }; } } </script>

import { Component, ViewChild, ElementRef } from "@angular/core"; import jspreadsheet from "jspreadsheet"; import "jspreadsheet/dist/jspreadsheet.css"; import "jsuites/dist/jsuites.css"; // You can use the following license for quick testing on localhost, StackBlitz, or CodeSandbox. // The license is valid for one day, after which the spreadsheet will become read-only. // For a longer trial period, you can create a free account and generate a demo license with an extended expiration date. jspreadsheet.setLicense('NzcyNTQ1NzNlYjc0YzFkOTc3MDczMjVjMTQxOTU0Y2I4YzVmY2EyNDIzMzMzYzJiM2FkODMyNzI2NmQyZjI4MTU2Y2RmYmI3YmNhZjk4YzY1ZTkwMjMzZWZmY2FmYjY3MTRjNTZjMDA1OWY1YThmNjA0ZTQyMGM4ZTZkMTZlMTcsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpjME1qTXpNalF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6TkNJc0luTmpiM0JsSWpwYkluWTNJaXdpZGpnaUxDSjJPU0lzSW5ZeE1DSXNJbll4TVNJc0luWXhNaUlzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElpd2ljR2wyYjNRaVhTd2laR1Z0YnlJNmRISjFaWDA9'); @Component({ standalone: true, selector: "app-root", template: `<div #spreadsheet class="jss_dark"></div>`, }) export class AppComponent { @ViewChild("spreadsheet") spreadsheet: ElementRef; // Worksheets worksheets: jspreadsheet.worksheetInstance[]; // Create a new data grid ngAfterViewInit() { // Create spreadsheet this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, { worksheets: [{ data: [ ['Product', 'Quantity', 'Price'], ['Apple', 100, 1.25], ['Banana', 75, 0.89], ['Orange', 50, 1.50], ], minDimensions: [6, 6] }] }); } }