daniel-nagy / fixed-table-header

Fixed table header directive.
MIT License
88 stars 36 forks source link

Issue with dynamic columns #21

Open nOuSEfORanAME75 opened 7 years ago

nOuSEfORanAME75 commented 7 years ago

Hi, I'm having an issue with (i think) dynamic columns, Getting this error:

angular.js:13920 TypeError: Cannot read property '0' of undefined
     at http://localhost/MyApp/Scripts/fixed-table-header.js:86:52
     at Array.forEach (native)
     at updateCells (http://localhost/MyApp/Scripts/fixed-table-header.js:77:21)
     at Scope.$digest (http://localhost/MyApp/Scripts/angular.js:17524:23) ....

Not sure where to look, or what to fix. Any help?

var cell = cells.original[index];
var style = $window.getComputedStyle(cell[0]);  **// **This line fails.****

here is the header

<thead fix-head>
  <tr>
    <th class="tableLabelHeaderInputs">
      <input type="checkbox" ng-click="ToggleAllItems(!listtoggle)" style="vertical-align: middle" />
    </th>
    <th class="tableLabelHeaderInputs">
      Compare
    </th>
    <th data-ng-repeat="x in ColumnNames" ng-if="x.ShouldDisplayColumn" ng-hide="HiddenColumns[x.ColumnName]" class="tableLabelHeader">

      <span ng-click="setOrderBy(x.ColumnName)" class="tableLabelTitle">
        {{GetColumnHeader(x.ColumnName)}}<span class="glyphicon sort-icon sortArrow"
                                               ng-show="orderBy==x.ColumnName"
                                               ng-class="{'glyphicon-chevron-up':!PagerHandler.reverse,'glyphicon-chevron-down':PagerHandler.reverse}"></span>
      </span>

      <span class="fa fa-times topRightRemove grey" ng-click="HideColumn(x.ColumnName)"></span>

    </th>
  </tr>
  <tr ng-show="ToggleQuickFilters">
    <th>
      &nbsp;
    </th>
    <th>
      &nbsp;
    </th>
    <th data-ng-repeat="x in ColumnNames" ng-hide="HiddenColumns[x.ColumnName]">
      <input ng-model="Search[x.ColumnName]" class="form-control input-xs" style="width: 100px">
    </th>
  </tr>
</thead>
marko-kelava commented 7 years ago

Hi, I have the same problem.

I have debugged your script a little, and concluded that the problem is here:

function updateCells() { var cells = { clone: getCells(header.clone), original: getCells(header.original) };

For some reason, the method getCells populates the clone property of cells correctly, but not original. Original is undefined, and when you try to access it by index, it throws an error. Tried debugging getCells method, but unfortunately, I'm new to angular and couldn't figure it out.

Really love your plugin, it's exactly what I need, and it's trivial to use, but unfortunately, have to disable it for now. The original header is hidden (when I remove visibility hidden, I can see it is rendered correctly), but the cloned header is not rendered in the ::before pseudoelement due to the script breaking.

Edit: Also, I have just noticed, on page load, your minified script throws an error that angular is not defined.