Sorting Columns
Sorting Columns
Sorting is disabled by default, but it's quite straightforward to give your users sorting options.
To enable it, add the allowSort option to your grid config and set it to true. The Context Menu will then include two extra menu items: "Sort A to Z" and "Sort Z to A". Right-click a column header to make the Context Menu appear, then select one of the sort menu items.
By default the grid will not display any arrows to indicate the sort direction. That's not a bug; it is actually similar to Excel and G. Sheets.
If you do want to show an arrow in the column header to represent the sort direction, add showSortIndicator: true to your grid config. An up-arrow represents "asc" (A to Z), while a down-arrow represents "desc" (Z to A). Just keep in mind that these arrows might add more confusion than clarity when your user starts modifying the row structure manually (i.e. removing or re-ordering rows).
Sort methods
To sort the grid by code, use the sort method. This method takes 2 parameters: the coordinate/index (colCoord) of the column you want to sort, then the sortDirection ("asc" or "desc"). Leaving out the sortDirection parameter will toggle the sort direction of the column:
- grid.sort(2, "asc");
Sorts 3rd column ascending. - grid.sort(3, "desc");
Sorts 4th column descending. - grid.sort(0);
Sort 1st column "desc" when it was "asc"; "asc" when it was "desc" or unsorted.
Clearing sort
To clear any sorting, use the clearSort method: the grid will be set back to its original row order. Any rows that have been added since the sorting started, will be positioned at the bottom.
Code
<style>
#grid {
height: 400px;
}
</style>
<div id="grid"></div>
<script src="https://code.datagridxl.com/datagridxl.js"></script>
<script>
var data = [
{"common_name":"Tracy's Thistle","science_name":"Cirsium undulatum (Nutt.) Spreng. var. tracyi (Rydb.) S.L. Welsh","family":"Asteraceae"},
{"common_name":"Orthotrichum Moss","science_name":"Orthotrichum exiguum Sull.","family":"Orthotrichaceae"},
{"common_name":"Lime Fern","science_name":"Cyclopeltis semicordata (Sw.) J. Sm.","family":"Dryopteridaceae"},
{"common_name":"Ravenel's Bruchia Moss","science_name":"Bruchia ravenelii Wilson","family":"Bruchiaceae"},
{"common_name":"Common Pussypaws","science_name":"Cistanthe monandra (Nutt.) Hershkovitz","family":"Portulacaceae"},
{"common_name":"Sarvis Holly","science_name":"Ilex amelanchier M.A. Curtis ex Chapm.","family":"Aquifoliaceae"},
{"common_name":"Astrothelium Lichen","science_name":"Astrothelium versicolor Müll. Arg.","family":"Trypetheliaceae"},
{"common_name":"Sierra Wildrye","science_name":"Elymus sierrus Gould","family":"Poaceae"},
{"common_name":"Arizona Rosewood","science_name":"Vauquelinia californica (Torr.) Sarg.","family":"Rosaceae"},
{"common_name":"Linguam","science_name":"Capparis indica (L.) Druce","family":"Capparaceae"},
{"common_name":"Alps Wormwood","science_name":"Artemisia umbelliformis Lam.","family":"Asteraceae"},
{"common_name":"Saltlover","science_name":"Halogeton C.A. Mey.","family":"Chenopodiaceae"},
{"common_name":"Engelmann's Hedgehog Cactus","science_name":"Echinocereus engelmannii (Parry ex Engelm.) Lem. var. chrysocentrus (Engelm. & J.M. Bigelow) Rümpler","family":"Cactaceae"},
{"common_name":"Pallid Larkspur","science_name":"Delphinium parishii A. Gray ssp. pallidum (Munz) Warnock","family":"Ranunculaceae"},
{"common_name":"Solenospora Lichen","science_name":"Solenospora A. Massal.","family":"Bacidiaceae"},
{"common_name":"Horseeye Bean","science_name":"Mucuna sloanei Fawc. & Rendle var. sloanei","family":"Fabaceae"},
{"common_name":"Toothed Midsorus Fern","science_name":"Blechnum serrulatum Rich.","family":"Blechnaceae"},
{"common_name":"Ceratodon Moss","science_name":"Ceratodon purpureus (Hedw.) Brid. var. purpureus","family":"Ditrichaceae"},
{"common_name":"Glacial Sedge","science_name":"Carex glacialis Mack.","family":"Cyperaceae"},
{"common_name":"Lead Lichen","science_name":"Parmeliella triptophylla (Ach.) Müll. Arg.","family":"Pannariaceae"}
];
var grid = new DataGridXL("grid", {
data: data,
// column width
defaultColWidth: 200,
// for this demo, show IDs as row headers
rowHeaderLabelType: "id",
rowHeaderLabelPrefix: "id",
// sort feature
allowSort: true
});
</script>
