AngularJS dynamic table with unknown number of columns

Question

I'm new to Angular and I need some start point for my project. How can I create new table from ajax data by mouse click on the background? I know that ajax data has unknown number of columns and can be different from time to time.

For example:

the first click on background = table 1, ajax request to /api/table
| A | B | C |
| 1 | 2 | 3 |
| 5 | 7 | 9 |

the second click on background = table 2 and server returns new data from the same url /api/table
| X | Y |
| 5 | 3 |
| 8 | 9 |

Solution 1

You could basically use two nested ng-repeats in the following way:

<table border="1" ng-repeat="table in tables">
  <tr>
      <th ng-repeat="column in table.cols">{{column}}</th>
  </tr>
  <tr ng-repeat="row in table.rows">
    <td ng-repeat="column in table.cols">{{row[column]}}</td>
  </tr>
</table>

In the controller:

function MyCtrl($scope, $http) {
    $scope.index = 0;
    $scope.tables = [];
    $scope.loadNew = function() {
        $http.get(/*url*/).success(function(result) {
            $scope.tables.push({rows: result, cols: Object.keys(result)});
        });
        $scope.index++;
    }
}

Then call loadNew() somewhere, eg. <div ng-click="loadNew()"></div>

Example: http://jsfiddle.net/v6ruo7mj/1/

Solution 2

register the ng-click directive on your background element to load data via ajax, and use ng-repeat to display data of uncertain length

<div ng-click="loadData()">
    <table ng-repeat="t in tables">
        <tr ng-repeat="row in t.data.rows">
            <td ng-repeat="col in row.cols">
                {{col.data}}
            </td>
        </tr>
    </table>
</div>

in the controller:

$scope.tables = [];

$scope.loadData = function() {
    // ajax call .... load into $scope.data

    $.ajax( url, {
        // settings..
    }).done(function(ajax_data){
        $scope.tables.push({
            data: ajax_data
        });
    });

};

Solution 3

I have an array of column names named columns and a 2D array of rows called rows. This solution works with an arbitrary number of rows and columns. In my example each row has an element called 'item' which contains the data. It is important to note that the number of columns is equal to the number of items per row we want to display.

<thead> 
    <tr>
        <th ng-repeat="column in columns">{{column}}</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="row in rows">
        <td ng-repeat="column in columns track by $index"> {{row.item[$index]}} </td>
    </tr>
</tbody>

Hope this helps

Comments

[Max Tkachenko]

thanks a lot! But how can I create a table by mouse click dynamically? I need multiple tables (one per each click)...

[Max Tkachenko]

thanx! and what if I need multiple tables: one new per each click?

[benri]

add ng-repeat to table: <table ng-repeat="t in tables"></table>, change the loadData to append to tables array, and each table is an object containing the tables data. (edited answer)

[Nikhil Mahajan]

Hi. Thanks for this. But What if I have to format data of a particular column like date fields. How hat can be done?

[David Frank]

@NikhilMahajan You either retrieve the data already formatted, or format it in the loadNew() function, or rewrite ng-repeat="column.." manually, rendering each column as you wish.