Ngx-datatable: Sorting behavior and headers styling

[polacofede]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
Feature request 1:
When sorting by multiple columns the datatable keeps the order in which the sort columns where selected. I mean lets suppose I have 4 columns in this order: name | lastname | ssn | dob.
If I press dob and then lastname, the sort will be done first by dob then by lastname.
This becomes even weirder when the table is by default sorted by several columns and the user changes the sort of one of them, the result is quite unpredictable for the end user.

Feature request 2:
When there is no sort criteria applied to a sortable column there is no icon displayed that indicates that the column is sortable.

Expected behavior
Feature request 1:
Usually people reads the tables from left to right, so in my opinion it would have sense to sort the table in the order columns are displayed for instance lastname, dob. An option to perform this at this moment is to use external sorting, that's what i did.

Feature request 2:
The proposal is to use a style like .datatable-icon-expand:before i mean the glyph content "63" of the font-family: "data-table".
When the column is not sortable ( sortable: false in the column config ) then that style shall not be displayed.

Reproduction of the problem
Check your sort examples they behave like explained.

What is the motivation / use case for changing the behavior?
Improving usability

Please tell us about your environment:
Windows 7-10

• Table version: 0.8.x
  "@swimlane/ngx-datatable": "9.3.0"

• Angular version: 4.0.0
  This has nothing to do with angular.

• Browser:
  IE11, Chrome, Firefox ( is a browser independent feature )

• Language:
  TypeScript ( is a language independent feature )

[polacofede]

sample of the expected icons all columns are sortable except for sex.
Middle initial and DOB has no sort applied.

[jcphlux]

Feature request 2:
When there is no sort criteria applied to a sortable column there is no icon displayed that indicates that the column is sortable.
just add a style for .sort-btn{} .sort-btn.datatable-icon-down {}, and .sort-btn.datatable-icon-up {} to solve this problem.

[manish-kumar9a9]

It seems while sorting by click on header to sort, unable to add class datatable-icon-down , and .sort-btn.datatable-icon-up. Please let me know if there is any issue from my side. I follow the complete documentation.

<span class="sort-btn sort-desc undefined">
      </span>

[ochebotar]

You can add "two arrow" icon like:
.sort-btn:after { font-family: data-table; content: "c"; }

But the problem is after compiling the source (ng build --prod --aot) you'll see only the "two arrow" icon even if you click to sort.

The issue is still not solved...

[jcphlux]

I have created a plunker that does all the needed styles for the headers. The last column in the example is not sortable to demo that it will not show the arrows on non-sortable columns.
I have created the styles below that will only show on headers that have the sortable class.

.sortable .sort-btn:after {
font-family: data-table;
content: "c";
}
.sortable .sort-btn.datatable-icon-down:after {
content: "f";
}
.sortable .sort-btn.datatable-icon-up:after {
content: "e";
}

In any column that I don't want sorting I add the input of sortable: false

[kitloong]

@ochebotar
Try this, works for me
.sort-btn:not([class*="datatable-icon-"]):before { font-family: data-table; content: "c"; }

[katemcloughlin]

@kitloong Thanks so much for your fix! Exactly what I needed for my project, and saved me so much time trying to find a solution.

[lanxuexing]

@ochebotar
Try this, It looks great.
.sortable .sort-btn:before { font-family: data-table; content: "c"; } .sortable .sort-btn.datatable-icon-down:before { content: "f"; } .sortable .sort-btn.datatable-icon-up:before { content: "e"; }

[ahsanahmad22]

@ochebotar I tried the style you have shared but this is showing "c", "f" and "e" in place of sort icon(up and down icon) and same for up arrow icon and down arrow icon.

[HackPoint]

sample of the expected icons all columns are sortable except for sex.
Middle initial and DOB has no sort applied.

So do you have the code example for this?

[ahsanahmad22]

sorry @HackPoint to bother you. I didn't added css icon.css because of which css for icons was not coming.
Thanks

[sagarbehal08]

@jcphlux it works fine for up and down but for both, it's not working