Angular2 - How to create a simple table

Question

I need to know the correct practice to use in this scenario:

I have a WebApi that returns a tabular dataset and I have to show it using bootstrap tables...

How to implement it? Which bootstrap component should I use?

The table is very simple, it expose just few data and a button to go in the row detail...

Answer 1

Here's an example of simple table that will redirect you to details on row click:

<table class="table table-hover">
    <thead>
        <tr>
            <td>Id</td>
            <td>Title</td>
            <td>Amount</td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let transfer of transfers" [routerLink]="['/transfer']" [queryParams]="{ id: transfer.id }">
            <td>{{transfer.id}}</td>
            <td>{{transfer.title}}</td>
            <td>{{transfer.amount}}</td>
        </tr>
    </tbody>
</table> 

I assumed you're working with transfers array and redirect based on id.

Answer 2

You can use Bootstrap angular 2 data tables. check this URL

If you like to test another solution go with teradata covalent data table. Check this link

By using you can get responsive design with some more additional features such as: search facility, Pagination