Other resources

  • jExcel v3
    Javascript Vanilla Edition
  • Jtools
    Javascript web components bundle

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="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jexcel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jdropdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/js/jquery.jcalendar.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jexcel.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.0/css/jquery.jdropdown.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/2.1.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
    Full examples on how to handle simple, advanced, autocomplete and conditional dropdowns.

  • Programmaticaly data changes
    Insert, remove and move columns and rows

  • Fixed headers and scrollings
    Overflow table and scrolling

  • Custom table design
    Create a custom table design. For example a bootstrap-like spreadsheet table.

  • Table styling
    Table styling

  • Manage cell comments
    Manage a table cell comments

  • Custom meta information
    Manage the table meta information

  • Custom toolbars
    Full examples how to load a autocomplete dropdown.

  • Loading remote data
    How to load the data from an external CSV file into a jExcel grid or table.

  • Masking and formating
    Handling currency types and masking numbers.

  • Calendar picker
    How to handle a calendar with date and datetime picker.

  • Sorting
    Sorting your jExcel spreadsheet

  • Create custom cells
    How to create custom column types based on a third party jquery plugin

  • Handling events
    Handling events on your spreadsheet

  • Readonly options
    Understanding how to set a readonly column or multiple custom cells

  • Multiple instances
    How to create multiple table instances in the same page

  • Text wrap
    How to change the text wrap behavior in a jExcel column

  • Nested headers
    Creating a jExcel table with nested headers.

  • Add images on your cells
    Add images on your spreasheet cells