fixed-table-header
fixed-table-header copied to clipboard
daniel-nagy
May not work with ngIf
This does not work if there is an ng-if directive on the <table> element or the <thead> element. This may be only when a directive in the header requires another directive on the table. For example my data table module.
It doesn't work if any parent of the table has an ng-if directive. In your demo codepen I just added ng-if="true" to the ng-card element and it no longer works. I've been trying all sorts of things to get it to work, but have been unsuccessful so far.
When the code was added to fix ng-repeat, you can no longer have the table inside an element with ng-if. Previous versions, like 0.1, work fine with ng-if. It seems the cloning that exists in the compile function makes it work with ng-repeat, but not ng-if. Not sure how to fix this.
My pull request #15 now allows a table's parent element to have ng-if, but I believe it still doesn't like a ng-if on the actual table. I haven't looked into getting it to work on the table yet, but it's closer now.
A workaround I've found to this issue, is to use ng-include to include the table markup. It's not the prettiest but it works fine.
Say this is your code before
<div ng-if="someCondition">
<div style="overflow: auto; max-height: 300px;">
<table>
<thead fix-head>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{contact.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
You'll now change this to something like,
<div ng-if="someCondition">
<div style="overflow: auto; max-height: 300px;" ng-include="'some-template-name.html'">
<script type="text/ng-template" id="some-template-name.html">
<table>
<thead fix-head>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{contact.name}}</td>
</tr>
</tbody>
</table>
</script>
</div>
</div>
Of course, you can have the template anywhere in the file, or even reference a separate file, but I like to keep it right there because I'm doing this just to avoid this ng-if issue.
Can the library be altered to use this as a solution automatically? Again, it wouldn't be the prettiest, but we just want something that works. It's a huge problem that this otherwise fantastic library, doesn't work with something as basic as an ng-if
So any suggestions for this? I tried to wrap it in a div with ng-include but it doesnt seems to work either.
As a workaround, I had to wrap the table in a div and use ng-hide on the wrapping div. The table is still rendered but not displayed. You can't put the ng-hide on the table itself because the column headers still show up if you do it that way.
