Angular Bootstrap table styles
Angular Table styles - Bootstrap 4 & Material Design
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO
Angular Bootstrap table styles are table components with additional elements like buttons, checkboxes, icons, panels & more.
Note: If you need standard bootstrap tables, have a look at Basic Angular Tables documentation.
Table with checkboxes
See all off the available checkbox options in the Checkbox documentation.
Default checkboxes
|
|
Lorem | Ipsum | Dolor |
|---|---|---|---|
|
|
Cell 1 | Cell 2 | Cell 3 |
|
|
Cell 4 | Cell 5 | Cell 6 |
|
|
Cell 7 | Cell 8 | Cell 9 |
<!-- Table -->
<table class="table table-bordered">
<!-- Table head -->
<thead>
<tr>
<th>
<!-- Default unchecked -->
<div class="custom-control custom-checkbox">
<mdb-checkbox default="true">Check 1</mdb-checkbox>
</div>
</th>
<th>Lorem</th>
<th>Ipsum</th>
<th>Dolor</th>
</tr>
</thead>
<!-- Table head -->
<!-- Table body -->
<tbody>
<tr>
<th scope="row">
<!-- Default unchecked -->
<div class="custom-control custom-checkbox">
<mdb-checkbox default="true">Check 2</mdb-checkbox>
</div>
</th>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<th scope="row">
<!-- Default unchecked -->
<div class="custom-control custom-checkbox">
<mdb-checkbox default="true">Check 3</mdb-checkbox>
</div>
</th>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<th scope="row">
<!-- Default unchecked -->
<div class="custom-control custom-checkbox">
<mdb-checkbox default="true">Check 4</mdb-checkbox>
</div>
</th>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
<!-- Table body -->
</table>
<!-- Table -->
Material checkboxes MDB Pro component
|
|
Lorem | Ipsum | Dolor |
|---|---|---|---|
|
|
Cell 1 | Cell 2 | Cell 3 |
|
|
Cell 4 | Cell 5 | Cell 6 |
|
|
Cell 7 | Cell 8 | Cell 9 |
<!-- Table -->
<table class="table table-bordered">
<!-- Table head -->
<thead>
<tr>
<th>
<mdb-checkbox>Check 1</mdb-checkbox>
</th>
<th>Lorem</th>
<th>Ipsum</th>
<th>Dolor</th>
</tr>
</thead>
<!-- Table head -->
<!-- Table body -->
<tbody>
<tr>
<th scope="row">
<mdb-checkbox>Check 2</mdb-checkbox>
</th>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<th scope="row">
<mdb-checkbox>Check 3</mdb-checkbox>
</th>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
<tr>
<th scope="row">
<mdb-checkbox>Check 4</mdb-checkbox>
</th>
<td>Cell 7</td>
<td>Cell 8</td>
<td>Cell 9</td>
</tr>
</tbody>
<!-- Table body -->
</table>
<!-- Table -->
Table with icons
To learn more about icons, read the Icons usage documentation or the Full list of 600+ icons
| # | Lorem | Ipsum | Dolor |
|---|---|---|---|
| 1 | Cell 1 | Cell 2 | Cell 3 |
| 2 | Cell 4 | Cell 5 | Cell 6 |
| 3 | Cell 7 | Cell 8 | Cell 9 |
<!-- Table -->
<table class="table">
<!-- Table head -->
<thead>
<tr>
<th>#</th>
<th>
<mdb-icon fas icon="leaf" class="mr-2 blue-text" aria-hidden="true">Lorem</mdb-icon>
</th>
<th>
<mdb-icon fas icon="leaf" class="mr-2 teal-text" aria-hidden="true"></mdb-icon>Ipsum</th>
<th>
<mdb-icon fas icon="leaf" class="indigo-text" aria-hidden="true"></mdb-icon>Dolor</th>
</tr>
</thead>
<!-- Table head -->
<!-- Table body -->
<tbody>
<tr>
<th scope="row">1</th>
<td>
<mdb-icon far icon="gem" class="mr-2 grey-text" aria-hidden="true"></mdb-icon>Cell 1</td>
<td>
<mdb-icon fas icon="download" class="mr-2 grey-text" aria-hidden="true"></mdb-icon>Cell 2</td>
<td>
<mdb-icon fas icon="book" class="mr-2 grey-text" aria-hidden="true"></mdb-icon>Cell 3</td>
</tr>
<tr>
<th scope="row">2</th>
<td>
<mdb-icon icon="graduation-cap" class="mr-2 grey-text" aria-hidden="true"></mdb-icon>Cell 4</td>
<td>
<mdb-icon fas icon="gift" class="mr-2 grey-text" aria-hidden="true"></mdb-icon>Cell 5</td>
<td>
<mdb-icon fas icon="image" class="mr-2 grey-text" aria-hidden="true"></mdb-icon>Cell 6</td>
</tr>
<tr>
<th scope="row">3</th>
<td>
<mdb-icon fas icon="magic" class="mr-2 grey-text" aria-hidden="true"></mdb-icon>Cell 7</td>
<td>
<mdb-icon fas icon="table" class="mr-2 grey-text" aria-hidden="true"></mdb-icon>Cell 8</td>
<td>
<mdb-icon fas icon="edit" class="mr-2 grey-text" aria-hidden="true"></mdb-icon>Cell 9</td>
</tr>
</tbody>
<!-- Table body -->
</table>
<!-- Table -->
Table with panel MDB Pro component
See all of the available options in the Panels documentation and the Cards documentation.
<mdb-card cascade="true" narrower="true">
<!--Card image-->
<div class="view view-cascade gradient-card-header blue-gradient narrower py-2 mx-4 mb-3 d-flex justify-content-between align-items-center">
<div>
<button mdbBtn color="white" outline="true" rounded="true" size="sm" type="button" class="px-2" mdbWavesEffect>
<mdb-icon fas icon="th-large" class="mt-0"></mdb-icon>
</button>
<button mdbBtn color="white" outline="true" rounded="true" size="sm" type="button" class="px-2" mdbWavesEffect>
<mdb-icon fas icon="columns" class="mt-0"></mdb-icon>
</button>
</div>
<a href="" class="white-text mx-3">Table name</a>
<div>
<button type="button" mdbBtn color="white" outline="true" rounded="true" size="sm" class="px-2" mdbWavesEffect>
<mdb-icon fas icon="pencil-alt" class="mt-0"></mdb-icon>
</button>
<button type="button" mdbBtn color="white" outline="true" rounded="true" size="sm" class="px-2" mdbWavesEffect>
<mdb-icon fas icon="times" class="mt-0"></mdb-icon>
</button>
<button type="button" mdbBtn color="white" outline="true" rounded="true" size="sm" class="px-2" mdbWavesEffect>
<mdb-icon fas fas icon="info-circle-circle" class="mt-0"></mdb-icon>
</button>
</div>
</div>
<!--/Card image-->
<div class="px-4">
<div class="table-wrapper">
<!--Table-->
<table class="mb-0" mdbTable hover="true">
<!--Table head-->
<thead>
<tr>
<th>
<mdb-checkbox></mdb-checkbox>
</th>
<th class="th-lg">
<a (click)="sortBy('first')">First Name
<mdb-icon fas icon="sort" class="ml-1"></mdb-icon>
</a>
</th>
<th class="th-lg">
<a (click)="sortBy('last')">Last Name
<mdb-icon fas icon="sort" class="ml-1"></mdb-icon>
</a>
</th>
<th class="th-lg">
<a (click)="sortBy('username')">Username
<mdb-icon fas icon="sort" class="ml-1"></mdb-icon>
</a>
</th>
<th class="th-lg">
<a (click)="sortBy('email')">Email
<mdb-icon fas icon="sort" class="ml-1"></mdb-icon>
</a>
</th>
<th class="th-lg">
<a (click)="sortBy('country')">Country
<mdb-icon fas icon="sort" class="ml-1"></mdb-icon>
</a>
</th>
<th class="th-lg">
<a (click)="sortBy('city')">City
<mdb-icon fas icon="sort" class="ml-1"></mdb-icon>
</a>
</th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr *ngFor="let row of tableData;let i = index">
<th scope="row">
<mdb-checkbox></mdb-checkbox>
</th>
<td>{{ row.first }}</td>
<td>{{ row.last }}</td>
<td>{{ row.username }}</td>
<td>{{ row.email }}</td>
<td>{{ row.country }}</td>
<td>{{ row.city }}</td>
</tr>
</tbody>
<!--Table body-->
</table>
<!--Table-->
</div>
</div>
</mdb-card>
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'panel-table',
templateUrl: './panel-table.component.html',
styleUrls: ['./panel-table.component.scss'],
})
export class PanelTableComponent implements OnInit {
tableData: object[] = [
{ first: 'Mark', last: 'Otto', username: '@mdo', email: 'markotto@gmail.com', country: 'USA', city: 'San Francisco' },
{ first: 'Jacob', last: 'Thornton', username: '@fat', email: 'jacobt@gmail.com', country: 'France', city: 'Paris' },
{ first: 'Larry', last: 'the Bird', username: '@twitter', email: 'larrybird@gmail.com', country: 'Germany', city: 'Berlin' },
{ first: 'Paul', last: 'Topolski', username: '@P_Topolski', email: 'ptopolski@gmail.com', country: 'Poland', city: 'Warsaw' },
{ first: 'Anna', last: 'Doe', username: '@andy', email: 'annadoe@gmail.com', country: 'Spain', city: 'Madrid' }
];
private sorted = false;
constructor() { }
ngOnInit() {
}
sortBy(by: string | any): void {
this.tableData.sort((a: any, b: any) => {
if (a[by] < b[by]) {
return this.sorted ? 1 : -1;
}
if (a[by] > b[by]) {
return this.sorted ? -1 : 1;
}
return 0;
});
this.sorted = !this.sorted;
}
}
Advanced table options
For advanced options of the tables have a look at specific documentation pages listed below.
Table responsive
Advanced options of responsive tables
Datatables
MDBootstrap integration with the most popular plugin that enhances the possibilities of standard tables.
Table pagination
Pagination is a simple navigation that lets you split a huge amount of content within the tables into smaller parts.
Table search
The MDBootstrap search box enables super fast searching through all the table data.
Table sort
This functionality lets you sort the table data 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 Sort 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.
import { WavesModule, IconsModule, ButtonsModule } from 'ng-uikit-pro-standard';
import { WavesModule, IconsModule, ButtonsModule } from 'angular-bootstrap-md';