Keep updated

Documentation

Examples

Sorting your table

You can reorder your table by double clicking in the header or by selecting the desired option in the context menu. The example shows how to change reorder your table programmatically.


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/1.5.7/js/jquery.jexcel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.5.7/css/jquery.jexcel.min.css" type="text/css" />

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

<script>
data = [
    ['Mazda', 2001, 2000, '2006-01-01'],
    ['Pegeout', 2010, 5000, '2005-01-01'],
    ['Honda Fit', 2009, 3000, '2004-01-01'],
    ['Honda CRV', 2010, 6000, '2003-01-01'],
];

$('#my').jexcel({
    data:data,
    colHeaders: ['Model', 'Year', 'Price', 'Date'],
    colWidths: [ 300, 80, 100, 100 ],
    columns: [
        { type: 'text' },
        { type: 'text' },
        { type: 'text' },
        { type: 'text' },
    ]
});
</script>

<p>
<input type='button' value='Order by' onclick="$('#my').jexcel('orderBy', $(this).next().val())">
<select>
<option value='0'>Column 1</option>
<option value='1'>Column 2</option>
<option value='2'>Column 3</option>
<option value='3'>Column 4</option>
</select>
</p>

</html>

Programmatically sorting

<script>
$('#my').jexcel('orderBy', 1); // Order by the second column (The column number starts on zero)
</script>