I am using ag-grid for generating some tables. So far it has been great. But I am experiencing some difficulty in sorting because my table has some data which are in lowercase and I want my sorting function to ignore the case and sort them just has case sensitive.
The two features that can do this job are cellRenderer and sort function.
cellRenderer function:
cellRenderer: function(params) {
if (params.value=='Police') {
return 'POLICE';
} else {
return params.value.toUpperCase();
}
}
sorting function:
$scope.sortByAthleteAsc = function() {
var sort = [
{field: 'athlete', sort: 'asc'}
];
$scope.gridOptions.api.setSortModel(sort);
};
These are the two examples provided. How can I connect these two functions to produce my table case insensitive sorting?
cellRenderer doesn't actually have anything to do with sorting; as Niall points out, what you need is to modify the column definition to use a custom sorting function. From the example code, let's say you're working with the first example, so your columnDef for athlete looks like this:
You need to add a comparator to that columnDef:
and then add your function for sorting below.
Note that you pass nodes and isInverted, even though you don't have to use them, because that's the signature that ag-grid expects.
A case where you would use the isInverted flag is if you need to handle certain values like blanks or nulls separately. Here's a more detailed function that sorts those values to the bottom, regardless of direction:
You could also set that comparator as part of a column type and then apply the column type to the columnDef; this way, you can easily use the same sort function across multiple columns.
I have a significantly more complicated example that I've just used on my current project at work; as time permits, I'll narrow it down a bit for a plunkr so you can see how the whole thing works. The ag-grid documentation is pretty useful once you know what you're doing, but the information it has is frequently spread out among several pages, and there aren't many examples that show you exactly what you need to know.