esvit / ng-table

Simple table with sorting and filtering on AngularJS
http://esvit.github.io/ng-table
BSD 3-Clause "New" or "Revised" License
2.77k stars 851 forks source link

Dynamic column using ng-if #718

Open StealthyDev opened 9 years ago

StealthyDev commented 9 years ago

I would like to show columns dynamically based on some attribute. It appears that the column header parser doesn't respect the ng-if attribute.

If I inspect elements, td's are not generated, but there is the header.

<table ng-table="tableParams" class="table table-bordered">
  <tr ng-repeat="employee in $data">
    <td data-title="'Name'" sortable="'env_type'" >
      {{employee.name}}
    </td>
    <td data-title="'Salary'" sortable="'path'" ng-if="org.employed">
      {{employee.salary}}
    </td>
  </tr>
</table>
ccrowhurstram commented 9 years ago

This should work. See the following codepen

rgstephens commented 8 years ago

I'm having this problem when using Bootstrap and the hidden-* options. Here's @ccrowhurstram codepen with Bootstrap and the hidden option added to the Money field. The data is hidden but the title still shows as reported by @StealthyDev.

Add Bootstrap to the project and add class="hidden-xs hidden-sm" to one of the columns like this:

<td data-title="demo.cols[2].title" sortable="'money'" ng-if="demo.cols[2].show"
    class="hidden-xs hidden-sm">{{row.money}}</td>

When you reduce the size of the browser the data column will disappear but the title remains