Table

Angular Bootstrap table / material design table

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	@twitter



        
          
            
              {{head}} 
            
          
          
            
              {{el.id}}
              {{el.first}}
              {{el.last}}
              {{el.handle}}

{{head}}
{{el.id}}	{{el.first}}	{{el.last}}	{{el.handle}}


        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	@twitter

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter


        
          
            
              {{head}} 
            
          
          
            
              {{el.id}}
              {{el.first}}
              {{el.last}}
              {{el.handle}}
            
          
        

        
          
            
              {{head}} 
            
          
          
            
              {{el.id}}
              {{el.first}}
              {{el.last}}
              {{el.handle}}

{{head}}
{{el.id}}	{{el.first}}	{{el.last}}	{{el.handle}}

{{head}}
{{el.id}}	{{el.first}}	{{el.last}}	{{el.handle}}


        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



        
          
            
              {{head}} 
            
          
          
            
              {{el.id}}
              {{el.first}}
              {{el.last}}
              {{el.handle}}

{{head}}
{{el.id}}	{{el.first}}	{{el.last}}	{{el.handle}}


        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



        
          
            
              {{head}} 
            
          
          
            
              {{el.id}}
              {{el.first}}
              {{el.last}}
              {{el.handle}}

{{head}}
{{el.id}}	{{el.first}}	{{el.last}}	{{el.handle}}


        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



        
          
            
              {{head}} 
            
          
          
            
              {{el.id}}
              {{el.first}}
              {{el.last}}
              {{el.handle}}

{{head}}
{{el.id}}	{{el.first}}	{{el.last}}	{{el.handle}}


        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



        
          
            
              {{head}} 
            
          
          
            
              {{el.id}}
              {{el.first}}
              {{el.last}}
              {{el.handle}}

{{head}}
{{el.id}}	{{el.first}}	{{el.last}}	{{el.handle}}


        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		@twitter



        
          
            
              {{head}} 
            
          
          
            
              {{el.id}}
              {{el.first}}
              {{el.last}}
              {{el.handle}}

{{head}}
{{el.id}}	{{el.first}}	{{el.last}}	{{el.handle}}


        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



        
          List of users
          
            
              {{head}} 
            
          
          
            
              {{el.id}}
              {{el.first}}
              {{el.last}}
              {{el.handle}}

List of users
{{head}}
{{el.id}}	{{el.first}}	{{el.last}}	{{el.handle}}


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



        
          
            
              {{head}} 
            
          
          
            
              {{el.id}}
              {{el.heading1}}
              {{el.heading2}}
              {{el.heading3}}
              {{el.heading4}}
              {{el.heading5}}
              {{el.heading6}}
              {{el.heading7}}
              {{el.heading8}}
              {{el.heading9}}

{{head}}
{{el.id}}	{{el.heading1}}	{{el.heading2}}	{{el.heading3}}	{{el.heading4}}	{{el.heading5}}	{{el.heading6}}	{{el.heading7}}	{{el.heading8}}	{{el.heading9}}


        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.