Spreadsheet Layout Customization
This section offers insights into configuring and tailoring the visual appearance of your spreadsheets. Through native classes, thematic elements, or external CSS, you can refine your spreadsheet's overall look and feel to align with your application's aesthetic.
Are you interested in customizing cell styles? Visit our dedicated section for comprehensive details on cell style. Cell Style Documentation
Data Grid Layout Attributes
Below are some attributes that pertain to the visual configuration of the data grid.
Method | Description |
---|---|
gridline: boolean | Toggles the visibility of the grid lines |
Examples
Change the Visual Style
Jspreadsheet supports two inherent visual layouts: default and modern. To apply the modern layout
, add the jss_modern class to the DIV container of the spreadsheet as shown in the example below:
<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="jspreadsheet"></div>
<p><input type="button" id="btn1" value="Toggle Style" /></p>
<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YjU4NWQ5OTMyYzFhOGU5MmFiNDBjZGE4ZDdhMjc1MTQ0N2VmYzUzZjMxMWM3MGI5ZmZmNjFlMTA3NDFhZDY1NzQyYWM3MmZhYmUxMjIyZTkyZmRjYTU0MDg5MTYyZWFhMWZmZTk4MjdlY2E2NzZhMDNmMTQ0MmE2N2Q4MDJjMWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTNOVFF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
jspreadsheet(document.getElementById('jspreadsheet'), {
worksheets: [
{ minDimensions: [6,6] },
]
});
document.getElementById("btn1").onclick = function() {
if (document.getElementById('jspreadsheet').classList.contains('jss_modern')) {
document.getElementById('jspreadsheet').classList.remove('jss_modern');
} else {
document.getElementById('jspreadsheet').classList.add('jss_modern');
}
}
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'YjU4NWQ5OTMyYzFhOGU5MmFiNDBjZGE4ZDdhMjc1MTQ0N2VmYzUzZjMxMWM3MGI5ZmZmNjFlMTA3NDFhZDY1NzQyYWM3MmZhYmUxMjIyZTkyZmRjYTU0MDg5MTYyZWFhMWZmZTk4MjdlY2E2NzZhMDNmMTQ0MmE2N2Q4MDJjMWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTNOVFF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
const toggle = function() {
if (document.getElementById('spreadsheet').classList.contains('jss_modern')) {
document.getElementById('spreadsheet').classList.remove('jss_modern');
} else {
document.getElementById('spreadsheet').classList.add('jss_modern');
}
}
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Render component
return (
<>
<Spreadsheet ref={spreadsheet} license={license}>
<Worksheet />
</Spreadsheet>
<button type="button" onClick={() => toggle()}>Toggle</button>
</>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet />
</Spreadsheet>
<button type="button" @click="toggle">Toggle</button>
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'YjU4NWQ5OTMyYzFhOGU5MmFiNDBjZGE4ZDdhMjc1MTQ0N2VmYzUzZjMxMWM3MGI5ZmZmNjFlMTA3NDFhZDY1NzQyYWM3MmZhYmUxMjIyZTkyZmRjYTU0MDg5MTYyZWFhMWZmZTk4MjdlY2E2NzZhMDNmMTQ0MmE2N2Q4MDJjMWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTNOVFF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
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');
}
}
},
data() {
return {
license,
};
}
}
</script>
import { Component, ViewChild, ElementRef } 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('YjU4NWQ5OTMyYzFhOGU5MmFiNDBjZGE4ZDdhMjc1MTQ0N2VmYzUzZjMxMWM3MGI5ZmZmNjFlMTA3NDFhZDY1NzQyYWM3MmZhYmUxMjIyZTkyZmRjYTU0MDg5MTYyZWFhMWZmZTk4MjdlY2E2NzZhMDNmMTQ0MmE2N2Q4MDJjMWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTNOVFF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// 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 Grid line
The example below shows how to add or remove the worksheet grid line
.
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/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>
let toggle = function(worksheet) {
if (worksheet.table.classList.contains('jss_nogridline')) {
worksheet.table.classList.remove('jss_nogridline');
} else {
worksheet.table.classList.add('jss_nogridline');
}
}
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YjU4NWQ5OTMyYzFhOGU5MmFiNDBjZGE4ZDdhMjc1MTQ0N2VmYzUzZjMxMWM3MGI5ZmZmNjFlMTA3NDFhZDY1NzQyYWM3MmZhYmUxMjIyZTkyZmRjYTU0MDg5MTYyZWFhMWZmZTk4MjdlY2E2NzZhMDNmMTQ0MmE2N2Q4MDJjMWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTNOVFF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// 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 } from "@jspreadsheet/react";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
// Set the license
const license = 'YjU4NWQ5OTMyYzFhOGU5MmFiNDBjZGE4ZDdhMjc1MTQ0N2VmYzUzZjMxMWM3MGI5ZmZmNjFlMTA3NDFhZDY1NzQyYWM3MmZhYmUxMjIyZTkyZmRjYTU0MDg5MTYyZWFhMWZmZTk4MjdlY2E2NzZhMDNmMTQ0MmE2N2Q4MDJjMWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTNOVFF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
// Toggle the data grid line
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} license={license} toolbar gridline>
<Worksheet data={data} />
</Spreadsheet>
<input type="button" value="toggle()" onClick={() => toggle(spreadsheet.current[0])} />
</>
);
}
<template>
<Spreadsheet ref="spreadsheet" :license="license" toolbar>
<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";
// Set the license
const license = 'YjU4NWQ5OTMyYzFhOGU5MmFiNDBjZGE4ZDdhMjc1MTQ0N2VmYzUzZjMxMWM3MGI5ZmZmNjFlMTA3NDFhZDY1NzQyYWM3MmZhYmUxMjIyZTkyZmRjYTU0MDg5MTYyZWFhMWZmZTk4MjdlY2E2NzZhMDNmMTQ0MmE2N2Q4MDJjMWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTNOVFF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
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,
license,
}
}
}
</script>
import { Component, ViewChild, ElementRef } 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('YjU4NWQ5OTMyYzFhOGU5MmFiNDBjZGE4ZDdhMjc1MTQ0N2VmYzUzZjMxMWM3MGI5ZmZmNjFlMTA3NDFhZDY1NzQyYWM3MmZhYmUxMjIyZTkyZmRjYTU0MDg5MTYyZWFhMWZmZTk4MjdlY2E2NzZhMDNmMTQ0MmE2N2Q4MDJjMWIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUTNOVFF3TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
@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');
}
}
}