Angular Bootstrap table
Angular Table - Bootstrap 4 & Material Design
Angular Bootstrap Tables are component with basic tables features. They allow you to organize multiple data in an elegant way.
Bootstrap tables provide additional benefits like responsiveness and the possibility of manipulating the styles of the tables.
You can enhance your tables by adding buttons, checkboxes, panels, and many other additional elements.
You can also use an advanced datatables options like sort, search or pagination.
If you want to use basic bootstrap tables have a look at the documentation below.
For more advanced options go to the specific documentation pages listed below:
Basic table
Using the most basic table markup, here’s how
.table
-based tables look in Bootstrap.
All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the
same manner as
the parent.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table mdbTable>
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'basic-table',
templateUrl: './basic-table.component.html',
styleUrls: ['./basic-table.component.scss'],
})
export class BasicTableComponent {
elements: any = [
{id: 1, first: 'Mark', last: 'Otto', handle: '@mdo'},
{id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat'},
{id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter'},
];
headElements = ['ID', 'First', 'Last', 'Handle'];
}
Table head options
To change a background-color of
<thead>
(or any other element) use our
color classes
. If you are going to use a dark background you should also consider white text (to provide a proper contrast)
by adding
.text-white
class.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table mdbTable>
<thead class="black white-text">
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
<table mdbTable>
<thead class="grey lighten-1 black-text">
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'table-head-options',
templateUrl: './table-head-options.component.html',
styleUrls: ['./table-head-options.component.scss'],
})
export class TableHeadOptionsComponent {
elements: any = [
{id: 1, first: 'Mark', last: 'Otto', handle: '@mdo'},
{id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat'},
{id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter'},
];
headElements = ['ID', 'First', 'Last', 'Handle'];
}
Striped rows
Use
striped="true"
to add zebra-striping to any table row within the
<tbody>
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table mdbTable striped="true">
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'table-striped',
templateUrl: './table-striped.component.html',
styleUrls: ['./table-striped.component.scss'],
})
export class TableStripedComponent {
elements: any = [
{id: 1, first: 'Mark', last: 'Otto', handle: '@mdo'},
{id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat'},
{id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter'},
];
headElements = ['ID', 'First', 'Last', 'Handle'];
}
Bordered table
Add
bordered="true"
for borders on all sides of the table and cells.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table mdbTable bordered="true">
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'table-bordered',
templateUrl: './table-bordered.component.html',
styleUrls: ['./table-bordered.component.scss'],
})
export class TableBorderedComponent {
elements: any = [
{id: 1, first: 'Mark', last: 'Otto', handle: '@mdo'},
{id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat'},
{id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter'},
];
headElements = ['ID', 'First', 'Last', 'Handle'];
}
Borderless table
Add
borderless="true"
for a table without borders.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table mdbTable borderless="true">
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'table-borderless',
templateUrl: './table-borderless.component.html',
styleUrls: ['./table-borderless.component.scss'],
})
export class TableBorderlessComponent {
elements: any = [
{id: 1, first: 'Mark', last: 'Otto', handle: '@mdo'},
{id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat'},
{id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter'},
];
headElements = ['ID', 'First', 'Last', 'Handle'];
}
Hoverable rows
Add
hover="true"
to enable a hover state on table rows within a
<tbody>
.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table mdbTable hover="true">
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'table-hover',
templateUrl: './table-hover.component.html',
styleUrls: ['./table-hover.component.scss'],
})
export class TableHoverComponent {
elements: any = [
{id: 1, first: 'Mark', last: 'Otto', handle: '@mdo'},
{id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat'},
{id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter'},
];
headElements = ['ID', 'First', 'Last', 'Handle'];
}
Small table
Add
small="true"
to make tables more compact by cutting cell padding in half.
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry the Bird |
<table mdbTable small="true">
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.first}}</td>
<td>{{el.last}}</td>
<td>{{el.handle}}</td>
</tr>
</tbody>
</table>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'table-small',
templateUrl: './table-small.component.html',
styleUrls: ['./table-small.component.scss'],
})
export class TableSmallComponent {
elements: any = [
{id: 1, first: 'Mark', last: 'Otto', handle: '@mdo'},
{id: 2, first: 'Jacob', last: 'Thornton', handle: '@fat'},
{id: 3, first: 'Larry', last: 'the Bird', handle: '@twitter'},
];
headElements = ['ID', 'First', 'Last', 'Handle'];
}
Responsive table
Create responsive table by wrapping any
.table
in
.table-responsive
to make them scroll horizontally on small devices (under 768px). When viewing on
anything larger than 768px wide, you
will not see any difference in these tables.
Vertical clipping/truncation
Responsive tables make use of
overflow-y: hidden
, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.
Note: For more advanced options of responsive tables have a look at Responsive Tables documentation .
# | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
---|---|---|---|---|---|---|---|---|---|
1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
<table mdbTable responsive="true">
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{head}} </th>
</tr>
</thead>
<tbody>
<tr mdbTableCol *ngFor="let el of elements">
<th scope="row">{{el.id}}</th>
<td>{{el.heading1}}</td>
<td>{{el.heading2}}</td>
<td>{{el.heading3}}</td>
<td>{{el.heading4}}</td>
<td>{{el.heading5}}</td>
<td>{{el.heading6}}</td>
<td>{{el.heading7}}</td>
<td>{{el.heading8}}</td>
<td>{{el.heading9}}</td>
</tr>
</tbody>
</table>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'table-responsive',
templateUrl: './table-responsive.component.html',
styleUrls: ['./table-responsive.component.scss'],
})
export class TableResponsiveComponent {
elements: any = [
{
id: 1, heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell'
},
{
id: 2, heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell'
},
{
id: 3, heading1: 'Cell',
heading2: 'Cell',
heading3: 'Cell',
heading4: 'Cell',
heading5: 'Cell',
heading6: 'Cell',
heading7: 'Cell',
heading8: 'Cell',
heading9: 'Cell'
},
];
headElements = ['ID', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading', 'Heading'];
}
Advanced table options
For advanced options of the tables have a look at specific documentation pages listed below.
Datatables
MDBootstrap integration with the most popular plugin enhancing the possibilities of standard tables.
Table pagination
Pagination is a simple navigation which lets you split a huge amount of content within the tables into smaller parts.
Table search
MDBootstrap search box enables super fast searching among all the data of the table.
Table sort
This functionality lets you sort the data of the tables according to any specific columns.
Table editable
Table editable allows you to edit existing data within the table and add new data to the table.
Angular Tables - API
In this section you will find advanced information about the Table component. You will find out which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
// MDB Angular Pro
import { WavesModule, TableModule } from 'ng-uikit-pro-standard';
// MDB Angular Free
import { WavesModule, TableModule } from 'angular-bootstrap-md';
Directive
MdbTableDirective
Selector: mdbTable
Type: MdbTableDirective
Export as: mdbTable
Inputs
Name | Type | Default | Description | Example |
---|---|---|---|---|
striped |
boolean | false | Adds a striped effect to the table. Striped is an effect similar to zebra - every second row is colored. | striped="true" |
bordered |
boolean | false | Adds a border to the entire table. | bordered="true" |
borderless |
boolean | false | Removes all borders from the table. | borderless="true" |
hover |
boolean | false | Adds a highlighting effect to the line on which the mouse cursor is located. | hover="true" |
small |
boolean | false | Changes the size of the table. Reduces row spacing to make the table narrower. | small="true" |
responsive |
boolean | false | Adds responsiveness to the table so that the table behaves correctly at lower resolutions. | responsive="true" |
stickyHeader |
boolean | false | Adds the ability to stick the header to the top edge of the table so that the header moves with the scrolling of the table. | stickyHeader="true" |
stickyHeaderBgColor |
string | ' ' | Adds the ability to change the background color of the table header. The default background color is #f2f2f2f2. | stickyHeaderBgColor="#303030" |
stickyHeaderTextColor |
string | ' ' | Adds the ability to change the text color of the table header. The default text color is #f000000. | stickyHeaderTextColor="#ffffff" |
Directive
MdbTableRowDirective
Selector: mdbTableRow
Type: MdbTableRowDirective
Outputs
Name | Type | Description | Example |
---|---|---|---|
rowCreated |
EventEmitter<any> | Emits an event rowCreated which contains an object with properties created: boolean and el: ElementRef | (rowCreated)="onRowCreate($event)" |
rowRemoved |
EventEmitter<any> | Emits an event rowRemoved which contains an object with properties removed: boolean. | (rowRemoved)="onRowRemove($event)" |