I'm trying to use the ng-table directive. Having a really hard time just getting the demo code to work properly in my local project.

In my controller, I set up my data.

    var dataset = [
        {name: "Moroni50", age: 50},
        {name: "Moroni49", age: 49},
        {name: "Moroni48", age: 48},
        {name: "Moroni47", age: 47},
        {name: "Moroni46", age: 46},
    ];

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

When I console.log($scope.tableParams) it seems the object has been created successfully. However the it shows data is an empty array with 0 length.

The render code then just shows the table header with no data.

<table ng-table="tableParams" class="table" show-filter="true">
    <tr ng-repeat="user in $data">
        <td title="'Name'" sortable="'name'">{{ user.name }}</td>
        <td title="'Age'" sortable="'age'">{{ user.age }}</td>
    </tr>
</table>

No idea what's going on, is there something simple I'm missing?

I'm trying to use the ng-table directive. Having a really hard time just getting the demo code to work properly in my local project.

http://ng-table.

In my controller, I set up my data.

    var dataset = [
        {name: "Moroni50", age: 50},
        {name: "Moroni49", age: 49},
        {name: "Moroni48", age: 48},
        {name: "Moroni47", age: 47},
        {name: "Moroni46", age: 46},
    ];

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

When I console.log($scope.tableParams) it seems the object has been created successfully. However the it shows data is an empty array with 0 length.

The render code then just shows the table header with no data.

<table ng-table="tableParams" class="table" show-filter="true">
    <tr ng-repeat="user in $data">
        <td title="'Name'" sortable="'name'">{{ user.name }}</td>
        <td title="'Age'" sortable="'age'">{{ user.age }}</td>
    </tr>
</table>

No idea what's going on, is there something simple I'm missing?

• javascript
• angularjs
• ngtable

Share Improve this question Follow asked Jan 14, 2016 at 10:40 RobRob 11.4k2222 gold badges7272 silver badges114114 bronze badges 2

• 1 Just a tip, take a look at ui-grid. It's easy and you have so many functions. – RiesvGeffen Commented Jan 14, 2016 at 10:44
• Can you create a plunkr for your issue? – Prashant Commented Jan 14, 2016 at 11:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

I think the documentation may be out of date. I got it working changing "dataset" to "data", like this (using v0.8.3):

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

You can also add a count (otherwise it just displays one item per page).

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

Working demo: http://plnkr.co/edit/Sbaqgzo6QT3sjxEduRFO?p=preview

As Rob said, it looks like the documentation is referencing the latest 1.x beta versions. At 1.0.0-beta.4 they changed settings().data to settings().dataset. So, if you're using an older version use data.

https://github./esvit/ng-table/releases?after=1.0.0-beta.5