columns are not aligned

[noagr1]

I want a bordered table. I need to draw my body rows (because sometimes it has checkbox, buttons etc) So I can't use the syntax: template: <ng-table [config]="config" [columns]="columns" [rows]="rows" > </ng-table>

So I am using the syntax:

template: <ng-table [config]="config" [columns]="columns"> </ng-table>
 <table class="table table-bordered">
 <tbody> 
   <tr *ngFor="let row of rows"> 
       <td *ngFor="let column of columns">
               {{row[column["name"]]}}
       </td>
    </tr> </tbody>
</table>

The problem is that with this syntax the columns are not aligned. How can I draw my own body rows with aligned columns? I guessed it might have something with style="width:100%" or style="width:auto" but I have tried and with no success.

Please see a plnkr

Thanks in advance for any code, idea etc. Noa

[themese]

Any progress on this? I'm running the same exact issue. I want a table with checkbox and buttons that can be filtered an sorted. I'll share what I tried in case it helps someone and/or get some help with it.

Because I need my own rows I ended separating them from ng-table, but this caused the columns not to be aligned. What I did was just creating a normal table and use the ng-table api, managed to get the filter work, but not the sorting. Any help would be appreciated. Template: <ng-table [config]="config"> </ng-table>

<input class="col-md-4 pull-left" type="text" placeholder="Filter by User Id and Password" [ngTableFiltering]="config.filtering" (tableChanged)="onChangeTable(config)">

<table class="table"> <thead> <tr> <th *ngFor="let col of columns">{{col.title}}</th> <th></th> </tr> </thead> <tbody> <tr *ngFor="let row of rows"> <td>{{row.userId}}</td> <td>{{row.password}}</td> <td><i class="fa" [ngClass]="{'fa-check': row.active, 'fa-times': !row.active}"></i></td> <td><button [routerLink]="row.userId" title="Edit" type="submit" class="btn btn-search" allow-update><i class="glyphicon glyphicon-edit"></i></button></td> </tr> </tbody> </table>

Component private data: any[] = []; private rows: any[] = []; private columns = [ { title: "UserID", name: "userId" }, { title: "Password", name: "password" }, { title: "Description", name: "description" }, { title: "MemberID", name: "memberId" }, { title: "Active", name: "active" } ]; private onChangeTable(config: any): void { let filteredData = this.changeFilter(this.data, config); this.rows = filteredData; } private changeFilter(data: any, config: any): any { return data.filter((item: any) => item["userId"].toLowerCase().match(this.config.filtering.filterString.toLowerCase()) || item["password"].match(this.config.filtering.filterString) ); }