Adding columns dynamically to ngTable

Question

I have the following ngTable, and I want to add columns dynamically:

    <table ng-table="tableParams" show-filter="showFilter" class="table table-bordered">
        <tbody>
            <tr ng-repeat="d in $data" >
                <td ng-repeat="col in cols" title="'col.nm'" 
                      filter="{ col.nm: 'text' }">{{ col.nm }}</td>
            </tr>
        </tbody>
    </table>

$data contains the data itself, but I have the columns definition in a different array:

$scope.cols = [ {nm:'col0'}, {nm:'col1'}, {nm:'col2'} ];

and $data:

$scope.data = [ {col0: "0", col1: "1", col2: "2"} ] ...

When I run the code the table is empty without any columns. I tried to look online to see if this is possible but couldn't find an example. Any ideas?

Added PLUNK

plis can you put some example in jsfiddle? and.. why u put $data? just use data without $ :S — Javierif, Jun 27 '16 at 11:26
don't ask me why, but declaring $scope.data and $data works (I took it from an example) that's how I defined all my ngTables... — ps0604, Jun 27 '16 at 11:35
http://plnkr.co/edit/KQEGq8dzd1hx7dhnQv9w?p=preview - that was exactly what I corrected below when u said it doesnt solve problem. — RaV, Jun 27 '16 at 11:45

score 0 · Answer 1 · answered Jun 27 '16 at 11:33

0

Problem is with your ng-repeat. You are using Wrong variable syntax Change this

 <tr ng-repeat="d in $data" >

to

 <tr ng-repeat="d in data" >

answered Jun 27 '16 at 11:33

Keyur Shah

536
6
20

1

'When I run the code the table is empty without any columns' By changing $data to data will show table. and u need to ng-repeat again in td for dynamic columns. – Keyur Shah Jun 27 '16 at 11:40

Javierif · Answer 2 · 2016-06-27T12:17:13.990

0

Lel... i check PLUNK and i see you no declare cols in SCOPE! and how u want take it from html?! xD check change this:

    var app = angular.module('app', ['ngTable']);

app.controller('myCtl', function($scope,NgTableParams) {
          $scope.cols = [ {nm:'col0'}, {nm:'col1'}, {nm:'col2'} ];

          $scope.data = [ 
            { col0: 'User 1', col1: 'Name 1', col2: 'Group 1'},
            { col0: 'User 2', col1: 'Name 2', col2: 'Group 2'}
          ];

          $scope.tableParams = new NgTableParams({dataset: $scope.data});

});

And voila

EDIT V2:

Check this html, i added columns name with one ng-repeat and value in another.

 <table ng-table="tableParams" class="table table-bordered table-hover">
    <tbody>
        <td ng-repeat="col in cols">{{ col.nm }}</td>
        <tr ng-repeat="u in data">
            <td ng-repeat="(key, value) in u">
              {{value}}
            </td>
        </tr>
    </tbody>
</table>

Hope this help

edited Jun 27 '16 at 12:17

answered Jun 27 '16 at 11:45

Javierif

632
1
6
18

That was a typo, still doesn't work, check the fixed plunk, it shows column names instead of data http://plnkr.co/edit/RRwCH7eJS9zXidSva8s9?p=preview – ps0604 Jun 27 '16 at 11:54
uf so ugly and hard, but check it renew – Javierif Jun 27 '16 at 12:15
you have a `td` outside a `tr` – ps0604 Jun 27 '16 at 15:52
well, u can set this td in a tr, but u try this solution? this worked well to me – Javierif Jun 28 '16 at 06:08

RaV · Answer 3 · 2016-06-27T12:43:48.263

-1

Cols:

$scope.cols = [ {nm:'col0'}, {nm:'col1'}, {nm:'col2'} ];

Data:

$scope.data = [ {col0: "0", col1: "1", col2: "2"} ] ...

Template:

<div ng-controller="myCtl" ng-app="app">
    <table ng-table="tableParams" class="table table-bordered table-hover">
      <tbody>
        <tr><td ng-repeat="name in names">{{ name.nm }}</td></tr>
        <tr ng-repeat="u in data">
          <td ng-repeat="value in u">
            {{value}}
          </td>
        </tr>
      </tbody>
    </table>
</div>

Try this.

edited Jun 27 '16 at 12:43

answered Jun 27 '16 at 11:26

RaV

1,029
1
9
25

I still have the same problem – ps0604 Jun 27 '16 at 11:34
Alright, I'll show you example with different approach. You need to use only one object. – RaV Jun 27 '16 at 11:36
see that I added a plunk to the question – ps0604 Jun 27 '16 at 11:41
Please check this plunk, it shows column names instead of data http://plnkr.co/edit/RRwCH7eJS9zXidSva8s9?p=preview – ps0604 Jun 27 '16 at 11:55
Yes, as I said before, you need to rebuild your data object. `{{ col.nm }}` - thats what you're showing to user. Check in your data what is `col.nm`. – RaV Jun 27 '16 at 12:21
http://www.w3schools.com/angular/angular_tables.asp - see how it is usually done. – RaV Jun 27 '16 at 12:30
http://plnkr.co/edit/7wXS1Gsj2y9mWFPV40h2?p=preview - it should work the way you need. – RaV Jun 27 '16 at 12:41

Adding columns dynamically to ngTable

3 Answers3