Currently there are two native layouts: the default and the modern. The latter can be selected by adding the jss_modern class to the spreadsheet DIV container.
<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v4/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<div id="spreadsheet"></div>
<script>
var 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');
}
}
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzBkYmJhZDZmMzNmYzY2ODRkOTJkODBiNDhjYTZiMGU4MTQ0M2UzYjUxMjIxMTYyZGJkNzI2NmVkOTczNDEwMjliMTEzYzRlZWI3ZTAyNWU0YmJkODMwODNjMTU1MmRhMDcyMDI1ZmRhNjAxMjRkMGQwOTE4NDEzNTI5Mjg0YTUsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTRNRGsxTVRFd09Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=');
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [
{ minDimensions: [10,10] },
]
});
</script>
<button type="button" onclick="toggle()">Toggle skin </button>
</html>
Create applications with spreadsheet-like controls
