Angular Bootstrap table

Angular Table - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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 table styles.

You can enhance your tables by adding buttons, checkboxes, panels, and many other additional elements.

You can also use 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 that 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 @twitter 
        
            
          <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 the .text-white class.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
        
            
          <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 @twitter 
        
            
          <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 @twitter 
        
            
          <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 @twitter 
        
            
          <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 @twitter 
        
            
          <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 the cell padding in half.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
        
            
          <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'];

          }

Captions

caption functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
        
            
          <table mdbTable>
            <caption>List of users</caption>
            <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-caption',
            templateUrl: './table-caption.component.html',
            styleUrls: ['./table-caption.component.scss'],
          })
          export class TableCaptionComponent {
            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 a 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 table options have a look at specific documentation pages listed below.

Datatables

MDBootstrap integration with the most popular plugin that enhances 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

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 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, TableModule } from 'ng-uikit-pro-standard';
        
        
    
        
            
          import { WavesModule, TableModule } from 'angular-bootstrap-md';
Import Example Modules List

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)"