Column types
For each column type there are several other properties to customize the behavior, those properties and configurations should be refer to jSuites documentation.
- text
- numeric
- hidden
- dropdown
- checkbox
- radio
- calendar
- image
- color
- url
- progressbar
- rating
- autonumber
- richtext
- percent
- notes
Source code
<html> <script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" /> <div id="spreadsheet"></div> <script> var data = [ ['Jazz', 'Honda', '2019-02-12', '', true, 2000.00, '#777700'], ['Civic', 'Honda', '2018-07-11', '', true, 4000.01, '#007777'], ]; jspreadsheet(document.getElementById('spreadsheet'), { data:data, filters: true, columns: [ { type:'text', title:'Car', width:120 }, { type: 'dropdown', title:'Make', width:180, source:[ "Alfa Romeo", "Audi", "Bmw", "Chevrolet", "Chrystler", "Dodge", "Ferrari", "Fiat", "Ford", "Honda", "Hyundai", "Jaguar", "Jeep", "Kia", "Mazda", "Mercedez-Benz", "Mitsubish", "Nissan", "Peugeot", "Porsche", "Subaru", "Suzuki", "Toyota", "Volkswagen" ] }, { type: 'calendar', title:'Available', width:120, options:{ format:'DD/MM/YYYY' } }, { type: 'image', title:'Photo', width:120 }, { type: 'checkbox', title:'Stock', width:80 }, { type: 'number', title:'Price', mask:'$ #.##0,00', width:100, decimal:',', disabledMaskOnEdition: true }, { type: 'color', width:100, render:'square', }, ], license: 'NDhhOGQ5YmZiYjQxZDRmNzQ4ZmQyZjQ4NzllNmRkMzY3ZjhlODU5NTMwNTczMGVjZGJiNmJlYzAxMGY3YzkxNGIzYWY2NzZiMDc4ODU1ODU2YzNjMmI1ZGNiYzRmZWVkZjg4MDUzOTAxODlhMjJlZGIxMmE1ZDRiYTQ0OTEwZTksZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGczTnpnek5Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09', }); </script> </html>