Primeng: DataTable scrollable doesn't show the header of the sorted field

[ribizli]

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

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/IRC4IN

Current behavior
The sorted column header is not shown.

Expected behavior
Should be shown.

Minimal reproduction of the problem with instructions
See plunkr. Initially sorted by col1, only col2 header is visible. If you click the col2 to sort by, it will disapear and col1 header will be shown.

What is the motivation / use case for changing the behavior?
bug

Please tell us about your environment:

• Angular version: 2.3.1

• PrimeNG version: 1.1.0

• Browser: [all]

• Language: [all]

• Node (for AoT issues): node --version =

[anugoyal12]

Yes, this was working until few days back. I too tested the same scenario and the column on which sort is applied, header doesnt show up.

[benjamincharity]

I've noticed the same thing happening across several tables in our app. Scrollable and responsive tables.

Looks like the <th> is being removed from the DOM. Possible offending line:

*ngIf="sortField!==col.field"

https://github.com/primefaces/primeng/blob/master/components/datatable/datatable.ts#L228

[pmeems]

We've got this issue too, very annoying.
How to upvote this issue?

[benjamincharity]

Yeah it's definitely a pretty drastic UI bug imo. Giving the original post a 👍 is about the only way to upvote an issue.

If, like me, you can't deploy with a bug like this, you can take a look at the quick patch fix I did for our project.

I couldn't figure out how to get a build to work (simply generated a bunch of JS files in the config folder 1.js, 2.js, etc) so I had to edit the generated JS files.

Commit is here: https://github.com/kli-remedy/primeng-compiled/commit/4f33ae49f199a49a9d4f0c379e02e0f5db77895e

It is an _ugly_ diff. The easiest way to find the exact change is to search for ui-datatable-scrollable-header then look a couple lines below it. There is a *ngIf that you need to remove:

I am not sure what use-case that *ngIf was introduced to cover, so I didn't feel confident to create a PR. I would be more than happy to create a PR if someone with core knowledge can shed some light on a) why that was introduced, and b) how to build the darn project locally.

[ribizli]

Couldn't make it for 1.1.1 ;(
We need to stick to 1.0.1 and using the workaround of the other issue with rowExpansion (#1413).

[benjamincharity]

What's the status on this?

Our project cannot have disappearing column headers so we are forced to a) not upgrade anymore which means we get no more bugfixes (like https://github.com/primefaces/primeng/pull/1182) or b) re-fix this bug each time we upgrade 😞

[ribizli]

I'm also desperately waiting for the fix, this is a blocking issue for us, too, keeping us on version 1.0.1. I hope this wasn't forgotten just it is holiday season now.

[pmeems]

I've just updated to PrimeNg v1.1.3 and this very annoying issue still persists.

[Mrtcndkn]

Hi,

It's now fixed for 2.0 sorry for the annoyance.

[benjamincharity]

Any reason this isn't released as a patch? Or an idea as to when 2.0 will be released? Just trying to figure out if I need to replace this library in my app as I have to release soon.

[Mrtcndkn]

2.0 is soon that's why it isn't a patch at first but we decided to release it as a patch 1.1.4 this week. @benjamincharity

[cagataycivici]

1.1.4 is released now just containing this fix.

[pmeems]

I've just checked with v1.1.4 and I can confirm this issue has been fixed.

[Nattujessy]

whether the 2.0 release includes the bug fixes for #1494 ?