Keep updated

Documentation

Examples

jExcel Examples

The Spreadsheet minimalist jQuery Plugin examples shows the usage with various column types such as text, dropdown, autocomplete, checkbox and date.


See this example on jsfiddle


Source code

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="http://cdn.bossanova.uk/js/jquery.jexcel.js"></script>
<script src="http://cdn.bossanova.uk/js/jquery.jcalendar.js"></script>
<link rel="stylesheet" href="http://cdn.bossanova.uk/css/jquery.jexcel.css" type="text/css" />
<link rel="stylesheet" href="http://cdn.bossanova.uk/css/jquery.jcalendar.css" type="text/css" />

<div id="my"></div>

<script>
data = [
    [3, 'Classe A', 'Cheese', 1, '2017-01-12'],
    [1, 'Classe B', 'Apples', 1, '2017-01-12'],
    [2, 'Classe A', 'Carrots', 1, '2017-01-12'],
    [1, 'Classe C', 'Oranges', 0, '2017-01-12'],
];

$('#my').jexcel({
    data:data,
    colHeaders:  [ 'Country', 'Description', 'Type', 'Stock', 'Next purchase' ],
    colWidths: [ 300, 80, 100, 60, 120 ],
    columns: [
        { type: 'autocomplete', url:'/jexcel/countries' },
        { type: 'text' },
        { type: 'dropdown', source:[ {'id':'1', 'name':'Fruits'}, {'id':'2', 'name':'Legumes'}, {'id':'3', 'name':'General Food'} ] },
        { type: 'checkbox' },
        { type: 'calendar' },
    ]
});
</script>
</html>

See more examples