UI-Grid allows you to sort rows. The feature is on by default. You can set the enableSorting flag in your grid options to enable/disable it.
Sorting can be disabled at the column level by setting enableSorting: false in the column def. See the last column below for an example.
Multiple columns can be sorted by shift-clicking on the 2-n columns. To see it in action, sort Gender then shift-click Name.
This feature can be disabled by setting suppressMultiSort: true. When combined with the suppressRemoveSort, it allows you to at most sort one extra
column beyond those with suppressRemoveSort turned on. This way, any column that is meant to stay sorted will not be modified.
When sorting using the menus, the sorts are additive. So if you have one column sorted and you pick another sort from a column menu, it will add on to the existing sort rather than replacing it. You need to use the 'remove sort' option on the existing column if you don't want to sort by it any more.
When sorting using the headers, clicking on a header removes all other sorts unless you shift-click.
The sort is automatically recalculated when you edit a field (the edit feature calls the dataChange api to notify of a data change). If
you change the data "behind the scenes" and want the sort to be recalculated, you can notify the grid that your
data has changed by calling gridApi.core.notifyDataChange( uiGridConstants.dataChange.EDIT )
If you set a default sort, you can prevent the user from removing that sort by setting suppressRemoveSort: true
for that column. This will let the user change the direction of the sort, but take away the option to remove the sort.
When clicking on a column heading the sort direction will cycle to ascending, then descending, then back to unsorted. You may rearrange this cycle or skip part of it by setting the sortDirectionCycle columnDef option.
The sort algorithm is chosen based on the column type. ui-grid will guess the type based on the data, although if you load data
asynchronously after the columns it will often decide all your columns are string. You can explicitly set the column type in the
column def using type='number'. Valid types are documented in columnDef, and
include string, number, numberStr and date. If you use date be aware the code expects a javascript date object.
You can pass in a custom sorting algorithm to a column by setting the sortingAlgorithm columnDef option. The sorting algorithm function takes 'a' and 'b' parameters like any normal sorting function with additional 'rowA', 'rowB', and 'direction' parameters that are the row objects and the current direction of the sort respectively.
By default the sorting algorithm will be applied to the row value before any cellFilters are applied. The sortCellFiltered
columnDef option will cause sorting to be applied after the cellFilters are applied. For an example of this see the "Month Joined" column in the AllFeatures tutorial.
For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
<script src="/release/ui-grid.core.min.js"></script>