Sorting

The sorting feature makes it possible to change the order of elements presented in the data table. The feature is easy to activate, just click on chosen column header and the data cells will be rearranged. The first click on the column header enables the ascending sorting, the second one triggers descending sort and lastly the third click turns off the function.

The example below demonstrates the sorting feature. Simply click on one of the column headers and see how the values reorganize depending on the sort type.



This code shows how to enable the sorting inside the guiGrid jQuery function:

$('#jquery-sorting-grid').guiGrid({
	columns: columns,

	source: source,

	sorting: true
});

Sorting - options

OptionsTypeDefaultDescription
sortingArray<{}>[] Config object for sorting.
enabledbooleanfalse Enabled / disabled sorting for the grid.

Multi sorting

Generic UI data grid for jQuery has a built-in multi sorting feature. It allows you to sort the data in several columns at once. To enable the multi sorting, you have to add it to the guiGrid configuration option: sorting: { enabled: true, multiSorting: true }.

The multi sorting makes it possible to sort more than one column at once. Simply click on one of the column headers and then active sorting on the another one. The arrow placed in the header indicates that the data inside the column is rearranged. It will help you keep track of the activated sorting mechanism.

Multi-sorting gives the ability to arrange data in a meaningful way.

$('#jquery-multi-sorting-grid').guiGrid({
	columns: columns,

	source: source,

	sorting: {
		enabled: true,
		multiSorting: true
	}
});

Multi sorting - options

OptionsTypeDefaultDescription
sortingArray<{}>[] Config object for sorting.
multiSortingbooleanfalse Enabled / disabled multi sorting for the grid.

Related articles: