Angular Fixed Table Header Glitch

Question

This is a continuation of my previous post found here.

The fixed headers work fine but I'm having a problem on initial load.
When the table first loads it looks like this:

But then once I click on of the column heads to sort it by that value everything snaps into place and ends up looking like this:

Like I said in my previous post, I'm using the anguFixedHeaderTable plugin. The headers stick fine but I'm just getting this glitch. I can provide details on all the resources I use in this project if that helps to debug the problem. I can provide more info but I just don't know what to provide at this point.

Additionally, when I click on the column to sort the list the table flickers in that it expands to full size before coming back to a height of 300px with a scroll bar. If I click it a few more times it sorts without any table flickers. If I click on a new column header to sort by that it again flickers once but a few more clicks of the same header results in a smooth and clean ordering. Any idea what's causing this flicker?

Edit 1: Based on Code Wizard's advice I took the working code from the demo and put it into the github .js file. Here's what I have now:

function tableDataLoaded() {
    // first cell in the tbody exists when data is loaded but doesn't have a width
    // until after the table is transformed
    return $elem.find("tbody").is(':visible');
    /*var firstCell = elem.querySelector('tbody tr:first-child td:first-child');
    return firstCell && !firstCell.style.width;*/
}

This actually works perfectly on first load. The only problem is I have two tables that the user can switch between with a click of a button. Those tables are controlled with a simple ng-show expression to detect which view the user selected. So when the table first loads, the look exactly like they should in both views. But then if you keep toggling back and forth the columns start messing up again. Until you click the column to sort it, then it snaps back into place.

Edit 2: I tried going the css route and I mostly got it working. Only problem is the columns are slightly misaligned. The main issue is that the columns widths aren't dynamic. Here's a plunker to reproduce my issue. As you can see, the first row's first column content spills into the adjacent column. I want the columns to be dynamic and aligned

Answer 1

Since i dont have your code i can only try to help you out by pointing out some issues that might cause this problem.

When HTML engine render out tables it has to loop over all the cells and to calculate the max width of each cell in order to find the max width per table column.

The anguFixedHeaderTable use this code:

function tableDataLoaded() {
    // first cell in the tbody exists when data is loaded but doesn't have a width
    // until after the table is transformed
    var firstCell = elem.querySelector('tbody tr:first-child td:first-child');
    return firstCell && !firstCell.style.width;
    }

And this function is fired here:

// wait for data to load and then transform the table
$scope.$watch(tableDataLoaded, function(isTableDataLoaded) {
    if (isTableDataLoaded) {
        transformTable();
        }
    });

If the table is not loaded yet when this code is executed the table will "fix" its width and it will use the default width which the HTML engine set to it.

What i suggest to do in order to fix it is to load the table and only After its loaded (to be sure that the function is called after the table was loaded) is to use java script code which will append the directive to the table of to re-write this module to fix this issue.

---

Updates after playing with the code and trying to fix the problem.

Note

On the demo site the code is different than the one in GitHub

Demo code: - http://pointblankdevelopment.com.au/plnks/angularjs-fixed-header-scrollable-table-directive/app.js

GitHub code - https://github.com/cornflourblue/angu-fixed-header-table/blob/master/angu-fixed-header-table.js

And the difference is this:

 # The working code in the demo
 $scope.$watch(function () { return $elem.find("tbody").is(':visible') },


# The "buggy" code on git hub
// wait for data to load and then transform the table
$scope.$watch(tableDataLoaded, 
    function(isTableDataLoaded) {
        if (isTableDataLoaded) {
            transformTable();
        }
    }
);

Grab the code from the demo and it will work as expected.

Good Luck.

Answer 2

have you try adding width:100%; in table and tr ?

table,tr {
    width:100%;
}

Demo here

Answer 3

Your issue is mostly fixed, and I think you just need to apply fixes from CSS to complete it. How about we wrap the first column like this:

table tr th:first-child, table tr td:first-child{
  word-wrap: break-word;
  white-space: inherit!important;
}

Preview on Plunker

The TDs in your table are already responsive, we just need to modify to make the content is not overflow by applying the wrap in every th, td that you might think it would happen.

The above code I applied it to the first child, but you can customize to entire table.

Answer 4

Try adding this CSS:

.table {
  width: 100%;
  height: 200px;
}

Please see this modified CodePen: CodePen for fixed Header & Footer