JavaScript Data Grid with Spreadsheet Controls - External Actions

by Spreadsheet Online

HTML

<script src="https://jspreadsheet.com/v12/jspreadsheet.js"></script>
<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://jspreadsheet.com/v12/jspreadsheet.css" type="text/css" />
 
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
 
<div id="spreadsheet"></div>

<br>
 
 <button onclick="update()" class="jss_object">
 Set background color
 </button>
 
<script>
jspreadsheet.setLicense(
  'MjJkZjU3NTI3MTcwOWQ4NzRjYWM3OGViOWQyYmYxYjI3NjEyZWI1NTk0NTQwZWU0YjE4OGE2NWRmY2Q4MTQwNWQyYzUyNWYzNGNkYTlmMjIyNDM1NWJlYTZjZDliYmZjMTNkOWM0ZTQ3NjEzNWJkZGQ3ZjkwZTFlZjk4NDk0ZmIsZXlKamJHbGxiblJKWkNJNklqTTFObUV4T1RKaU56a3hNMkl3TkdNMU5EVTNOR1F4T0dNeU9HUTBObVUyTXprMU5ESTRZV0lpTENKdVlXMWxJam9pVUdGMWJDQkliMlJsYkNJc0ltUmhkR1VpT2pFM09USTNNVEF3TURBc0ltUnZiV0ZwYmlJNld5SnFjMmhsYkd3dWJtVjBJaXdpWTNOaUxtRndjQ0lzSW1wemNISmxZV1J6YUdWbGRDNWpiMjBpTENKalpIQnVMbWx2SWl3aWFXNTBjbUZ6YUdWbGRITXVZMjl0SWl3aWMzUmhZMnRpYkdsMGVpNWpiMjBpTENKM1pXSmpiMjUwWVdsdVpYSXVhVzhpTENKM1pXSmpiMjUwWVdsdVpYSXVhVzhpTENKdmNtZG1ZWEp0TFRabU9URm1ZVFZoWWprdFpHVjJMV1ZrTG1SbGRtVnNiM0F1YkdsbmFIUnVhVzVuTG1admNtTmxMbU52YlNJc0lteHZZMkZzYUc5emRDSmRMQ0p3YkdGdUlqb2lNelFpTENKelkyOXdaU0k2V3lKMk55SXNJblk0SWl3aWRqa2lMQ0oyTVRBaUxDSjJNVEVpTENKMk1USWlMQ0ptYjNKdGRXeGhJaXdpWm05eWJYTWlMQ0p5Wlc1a1pYSWlMQ0p3WVhKelpYSWlMQ0pwYlhCdmNuUmxjaUlzSW5ObFlYSmphQ0lzSW1OdmJXMWxiblJ6SWl3aWRtRnNhV1JoZEdsdmJuTWlMQ0pqYUdGeWRITWlMQ0p3Y21sdWRDSXNJbUpoY2lJc0luTm9aV1YwY3lJc0luTm9ZWEJsY3lJc0luTmxjblpsY2lJc0ltWnZjbTFoZENJc0luUnZjRzFsYm5VaUxDSnBiblJ5WVhOb1pXVjBjeUpkZlE9PQ=='
);

let update = function() {
    table[0].setStyle(table[0].getSelected(), 'background-color', 'red');
}

// Create the spreadsheet
let table = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
    	  data: [[1,2,3]],
          minDimensions: [8,8],
    }],
});
</script>