In a list, set the default sort column in jhipster

Viewed 1260

sorry for simple question, but I'm new both to spring, JPA and Jhipster. I'm following a video tutorial, and in one step the teacher was "customizing" the default view to sort on a custom column. He did so by changing the method in the repository class, to a query that ordered by one of the columns. This works, but I noticed that doing that the UI sort (the sort the UI impose clicking on the column) stopped working.

Debugging i noticed that the reason is that the query filter first by date, then by "pageable". What is the best practice to apply the "byDate" sort just as a default, in case the pageable is empty?

I managed to "hack" the system by deep inspecting the page object and with an "if there is an UI sort use repository method A (the one that is natively unsorted), if there is not use repository method B (the one that is already sorted)". What I'm looking for is the "right way", the best practice, because I want to learn to program the way it is supposed to be, and I'm pretty sure that to have a default sort column is not a such exotic request

Here it is the link to the video

many thanks

2 Answers

You can set the default sorting column of any view in the [component-name].route.ts. In that file you will see something like this:

// ...
export const fooRoute: Routes = [
  {
    path: '',
    component: FooComponent,
    resolve: {
      pagingParams: JhiResolvePagingParams
    },
    data: {
      authorities: ['ROLE_USER'],
      defaultSort: 'id,asc',      // <- Look at this line :)
      pageTitle: 'jhipsterApp.foo.home.title'
    },
    canActivate: [UserRouteAccessService]
  },
  // ...

The default order set by JHipster is by column id in ascending order. If you want to set the default order by column name descending (just as an example) just change that line to the following:

      defaultSort: 'name,desc',

My app is generated via recent JHipster 7.4.1 and uses Vue frontned. There are no [component-name].route.ts files generated. I tried to add defaultSort into entities.ts but no luck.

This is working here: In the [entity-name].components.ts, change

    public propOrder = 'id';

into

    public propOrder = '[your default sort column, e.g. name]';
Related