Examples
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/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v4/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: 'NWJkZTQyMzc4MGI4N2JmYzE3OTY1ZWJiZGZlZjEzZjQ0YjVhZDJkOGQ5NzI3NDdmMGYyNjI4YTc3NGM3NDQ0YWFjMDJlNmIwN2I2YWIyZTQ1MjU1MjU2ZTQ5MzRkYjc5MWUzMjIyZWI1Njk3MzU3MzU5MDlkODVkNzc5MDgyYWEsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTNOakF3TURnNU5Td2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=', }); </script> </html>