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="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.0.0/js/jquery.jexcel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.0.0/js/jquery.jdropdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.0.0/js/jquery.jcalendar.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.0.0/css/jquery.jexcel.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.0.0/css/jquery.jdropdown.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.0.0/css/jquery.jcalendar.min.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
- Advanced dropdowns: Autocomplete, multiple and filters
Full examples on how to handle simple, advanced, autocomplete and conditional dropdowns. - 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: Programmatically and manual table design
Table styling - Manage cell comments: Get or set comments from a cell
Manage a table cell comments - Custom meta information: Get or set custom meta information
Manage the table meta information - Custom toolbars: Enabled toolbars on your spreasheet
Full examples how to load a autocomplete dropdown. - 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 - Handling events: Track the changes from your tables
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 - Text wrap: Text wrap for a column
How to change the text wrap behavior in a jExcel column - Nested headers: Nested headers
Creating a jExcel table with nested headers. - Add images on your cells: Images on your cell
Add images on your spreasheet cells