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>