sticky/fixed header scrolling issue

[slecrenski]

I'm using an html table and have a thead which contains multiple tr's. The tr's represent the table header.

How can I get this vs-repeat directive to allow for multi level sticky/fixed table headers (thead)?

I'll give this a whack and submit a pull but since you're more familiar could you take a look at perhaps adding a sticky directive to allow for fixed header?

<table>

<thead > <!--Make this header stick to the top so it's always there when scrolling and move the scroll bar down
<tr>
<tr>
</thead>
<tbody vs-repeat>
<tr ng-repeat="...">

<td ng-repeat-start="..">

</td>
<td ng-repeat-end="..">
</td>
</tr>
</tbody>

I have a relatively complex grid which allows for dynamic number of columns grouped at multiple levels. This is done using nested ng-repeats so no standard off the shelf grid can support this feature.

Rendering large data tables is often useless if you cannot see what the header title is while scrolling.. Especially if you're allowing for real-time data modification directly in the grid.

I noticed none of your examples have thead displayed. This is very important for any real application.

Also be nice if multiple columns on the left could be "fixed" such that the horizontal scrollbar renders only with the columns to the right of the fixed columns.

Can you please look into implementing this/these feature?

[slecrenski]

Got it working with this code. Bit unelegant but works even for horizontal scrolling.

<thead>
<tr>
...
</tr>
<tr>
<td>
col1header
</td>
<td>
col2header
</td>
<td ng-repeat-start="...">
<p>{{...}}</p>
</td>

<td>
<p>{{...}}</p>
</td>

<td ng-repeat-end>
</td>
</tr>

function updateInnerCollection() {
...

                            var $thead = repeatContainer[0].parentNode.children[0];
                            
                            //Determine the scroll bar width since it's silly to render it on the header as well as the bottom.

                            var $thead = repeatContainer[0].parentNode.children[0];

                            if ($thead != null) {

                                $thead.style.position = 'absolute';
                                $thead.style.overflow = 'hidden';

                                var scrollBarWidth = $scrollParent[0].offsetWidth - $scrollParent[0].clientWidth;

                                $thead.style.width = (parseFloat($scrollParent[0].style.width) - scrollBarWidth) + "px";

                                $thead.scrollLeft = $scrollParent[0].scrollLeft;

                                var adjustMargin = 10;

                                $thead.style["margin-top"] = String(-$thead.offsetHeight) + "px";

                                $scrollParent[0].style["margin-top"] = String($thead.offsetHeight + adjustMargin) + "px";

                                if (repeatContainer[0].children[1].tagName == 'TR') {
                                    var index = 0;
                                    var row = repeatContainer[0].children[1];

                                    if (row.children.length > 0) {
                                        for (var index = 0; index <= row.children.length; index++) {
                                            if ($thead.children[1].children[index] != null) {
                                                var col = row.children[index];
                                                if (col != null) {
                                                    $thead.children[1].children[index].style.width = col.offsetWidth + "px";
                                                }
                                            }
                                        }
                                    }
                                }
                            }

...

Removed dependency for perfect alignment. Uses column offsetWidth instead.