SpringBot sorting on custom columns Data table list view
Assumptions
This lesson builds on the details covered in SpringBot add related entities to Data table list view.
Model
As this lesson builds on the SpringBot add related entities to Data table list view lesson we will be using the same model.

Background
Client-side
Sorting is built into the Data table extension, therefore the client-side supports sorting on all new columns.
Looking at the HeaderOption
interface in our collection.component.ts
found at clientside/src/app/lib/components/collection/collection.component.ts
.
export interface HeaderOption {
name: string;
displayName: string;
sortable: boolean;
sourceDirectFromModel: boolean;
valueSource?: string | (() => string);
valueFunction?: (() => string) | ((any) => Observable<any>);
// Type of the field. Used in the date/datetime/time
type?: ModelPropertyType;
doHide?: boolean;
// % protected region % [Add additional properties to our header option here] off begin
// % protected region % [Add additional properties to our header option here] end
}
Sorting is based on the name
property. For bot written headers, each header name
directly relates to an attribute on our entities.
Following on from this idea, we can also use related entities for sorting purposes, as was shown in the previous lesson, by adding a Species
column. You would have noted that sorting works for the Species
column and this is why.
Server-side
Sorting is managed by the entity services. In the case of our example, the FishService.java
as found at serverside/src/main/java/<projectName>/services/FishService.java
.
There are two methods of note in the FishService.java
.
-
findSortedPageWithQuery
, and getSort
findSortedPageWithQuery

Placing a debugger inside this method and exploring the values of sortBy
we something like the following:

This value is parsed to the getSort
method.
getSort
All sorting is handled here, custom sorting can be defined by returning QSort
. The QSort class is a QueryDSL utility which allows us to define more complex sorting.
Task
In the same manner that we added the new column in the previous article, lets add a new column which transforms the Name
attribute of our Fish
entity to be all upper case.
The primary file we will be working with for this task will be the fish-tile-crud-list.component.ts
which can be found at clientside/src/app/tiles/crud/fish/list/fish-tile-crud-list.component.ts
.
-
Find our
sortedHeaderOptions
method and place the following inside of it.headerOpts.push({ name: 'customColumn', displayName: 'Upper Case Name', sortable: true, sourceDirectFromModel: true, type: ModelPropertyType.STRING, valueFunction: (model) => { return model.name.toUpperCase(); } } as HeaderOption);
Four properties which are imported to note on this,
Property Description name The name of the column, this is used as the key for sorting so take note of it. sortable Set to true to enable the client-side sorting. type Set to ModelPropertyType.STRING
to allow for a sync string type.valueFunction This is where we transform our model. -
We now need to show the server-side how to sort on the key
customColumn
. OpenFishService.java
found atserverside/src/main/java/<projectName>/services/FishService.java
and activate the protected region in thegetSort
method calledCustomise your sort method here by returning early
. -
Place the following inside it:
// % protected region % [Customise your sort method here by returning early] on begin var direction = currentOrder.getDirection(); var key = currentOrder.getProperty(); if (key.equals("customColumn")) { var fishEntity = QFishEntity.fishEntity; return (direction.isAscending()) ? QSort.by(fishEntity.name.asc()) : QSort.by(fishEntity.name.desc()); } // % protected region % [Customise your sort method here by returning early] end
Our
sortBy
method will now appear as follows:private Sort getSort (Sort sortBy) { Iterator it = sortBy.iterator(); while (it.hasNext()) { Sort.Order currentOrder = (Sort.Order)it.next(); // % protected region % [Customise your sort method here by returning early] on begin var direction = currentOrder.getDirection(); var key = currentOrder.getProperty(); if (key.equals("customColumn")) { var fishEntity = QFishEntity.fishEntity; return (direction.isAscending()) ? QSort.by(fishEntity.name.asc()) : QSort.by(fishEntity.name.desc()); } // % protected region % [Customise your sort method here by returning early] end } return sortBy; }
We have now enabled sorting for our custom column.
Was this article helpful?