Sorting behavior and headers styling

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 )

[kitloong]

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

[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