jExcel Examples
The Spreadsheet minimalist jQuery Plugin examples shows the usage with various column types such as text, dropdown, autocomplete, checkbox and date.
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
- Programmaticaly data changes: Insert, remove and move columns and rows
Insert, remove and move columns and rows - Fixed headers and scrollings: data overflow: fixed headers and scrolling
Overflow table and scrolling - Custom table design: Custom table design, bootstrap like, colours
Create a custom table design. For example a bootstrap-like spreadsheet table. - Table styling: Background and colours
Table styling - Loading remote data: Loading data from a CSV or JSON source
How to load the data from an external CSV file into a jExcel grid or table. - Exporting data: Export data table as JSON OR CSV
How to export the data from your jquery table. - Masking and formating: How to mask or format a cell content
Handling currency types and masking numbers. - Formulas: How to use formula in your table
Adding formulas on your spreadsheet - Calendar picker: Date and datetime picker extensions
How to handle a calendar with date and datetime picker. - Sorting: Learn the different ways to sort a table
Sorting your jExcel spreadsheet - Create custom cells: Integrate third party plugins
How to create custom column types based on a third party jquery plugin - Advanced dropdown: How to use dropdown examples
Full examples on how to handle simple, advanced, autocomplete and conditional dropdowns. - Autocomplete column: Native autocomplete comlumn type
Full examples how to load a autocomplete dropdown. - Handling events: Integrating your table via callbacks
Handling events on your spreadsheet - Readonly options: Working with readonly cells
Understanding how to set a readonly column or multiple custom cells - Multiple instances: Using multiple tables in the same application
How to create multiple table instances in the same page - Wrapping compatibility: Wrapping the text in a column
How to wrap the text in a jExcel column - Nested headers: Nested headers
Creating a jExcel table with nested headers.