How to fix positions of elements of angular js table

Question

I am binding json data to ng-table using angular js

if any value is zero, then the positions for all columns are broken, can someone help me correct the data with the column heading?

see this plunker http://plnkr.co/edit/Ixvp8B0dRwOBDHflmu2j?p=preview

Description must be null , but all values ​​are shifted to the left.

 Or If all values are null for any property hide that particular column 

Answer 1

To determine if a column is empty, you need some kind of column configuration that is created by iterating over the data to see if all rows contain data for any of the headers (object keys).

Then you can use this column configuration array as a repeater for <th> and <td> .

Configuration Example:

 [ { "heading": "Id", "display": true }, { "heading": "Title", "display": true }, { "heading": "Description", "display": true }, { "heading": "Test", "display": false } ] 

HTML

 <thead> <tr> <th ng-repeat="col in colConfig" ng-if="col.display">{{col.heading}}</th> </tr> </thead> <tbody> <tr ng-repeat="item in data"> <td ng-repeat="col in colConfig" ng-if="col.display"> {{item[col.heading]}} </td> </tr> </tbody> 

Config create example

  var keys = Object.keys(data[0]); function createConfig() { var validKeyCounts = {}; var colConfig; keys.forEach(function (key) { validKeyCounts[key] = 0; }) data.forEach(function (row, idx) { keys.forEach(function (key) { if (row.hasOwnProperty(key) && row[key] !== null) { validKeyCounts[key]++; } }) }); colConfig = keys.map(function (key) { return { heading: key, display: validKeyCounts[key] > 0 } }); return colConfig } 

I'm sure it can be optimized, but it's just a way to get started with the functionality.

Demo