A thin wrapper around the native <table> element that applies Bootstrap table styling. Toggle [responsive] to wrap the table in a horizontally scrollable container on narrow viewports.
| # | First name | Last name | Nickname | Occupation | Date of birth | Place of birth | Date of death | Place of death |
|---|---|---|---|---|---|---|---|---|
| 1 | Tim | Bergling | Avicii | Music artist | 1989/09/08 | Stockholm | 2018/04/20 | Muscat |
| 2 | Ivan | Petunin | Walkie | Rapper | 1995/05/24 | Russia | 2022/09/30 | Krasnodar |
| 3 | Michael | Jackson | Michael Jackson | Singer | 1958/08/29 | Gary | 2009/06/25 | Los Angeles |
<bs-table [responsive]="true">
<thead>
<tr>
<th>#</th>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
@for (person of people; track person.id) {
<tr>
<th scope="row">{{ person.id }}</th>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
</tr>
}
</tbody>
</bs-table>
import { Component } from '@angular/core';
import { BsTableComponent } from '@mintplayer/ng-bootstrap/table';
interface Person {
id: number;
firstName: string;
lastName: string;
}
@Component({
selector: 'my-table-demo',
templateUrl: './my-table-demo.component.html',
imports: [BsTableComponent],
})
export class MyTableDemoComponent {
protected readonly people: Person[] = [
{ id: 1, firstName: 'Tim', lastName: 'Bergling' },
{ id: 2, firstName: 'Ivan', lastName: 'Petunin' },
{ id: 3, firstName: 'Michael', lastName: 'Jackson' },
];
}