Column types
Jexcel Pro brings a few exclusive native column type implementations as below. There are several other properties to change the behavior of those columns, those are describe in more details in other examples.
text
numeric
hidden
dropdown
checkbox
radio
calendar
image
color
email New
url New
progressbar New
rating New
autonumber New
richtext New
percent New
Source code
<html>
<script src="https://jexcel.net/v5/jexcel.js"></script>
<script src="https://jexcel.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jexcel.net/v5/jexcel.css" type="text/css" />
<link rel="stylesheet" href="https://jexcel.net/v5/jsuites.css" type="text/css" />
<div id="spreadsheet"></div>
<script>
var data = [
['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
];
jexcel(document.getElementById('spreadsheet'), {
data:data,
columns: [
{ type: 'text', title:'Car', width:'120px' },
{ type: 'dropdown', title:'Make', width:'200px', source:[ "Alfa Romeo", "Audi", "Bmw" ] },
{ type: 'calendar', title:'Available', width:'200px', options:{ format:'DD/MM/YYYY' } },
{ type: 'image', title:'Photo', width:'120px' },
{ type: 'checkbox', title:'Stock', width:'80px' },
{ type: 'numeric', title:'Price', width:'100px', mask:'$ #.##,00', decimal:',' },
{ type: 'color', width:'100px', render:'square', }
],
license: '39130-64ebc-bd98e-26bc4',
});
</script>
</html>