Tables examples

Angular Bootstrap table styles

Angular Bootstrap table styles are components with examples of the tables 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 buttons

Have a look at Buttons documentation to learn more about all available buttons.

Add .m-0 class to the button within the table to remove unnecessary margins.

Regular buttons

#	First Name	Last Name	Username
1		Otto	@mdo
2	Jacob		@fat
3	Larry	the Bird

Outline buttons

Add .waves-effect class to the outline button to make waves more visible.

#	First Name	Last Name	Username
1		Otto	@mdo
2	Jacob		@fat
3	Larry	the Bird

Rounded buttons MDB Pro component

#	First Name	Last Name	Username
1		Otto	@mdo
2	Jacob		@fat
3	Larry	the Bird

Table with checkboxes

See all available options of checkboxes in the Checkbox documentation.

Default checkboxes

Check 1	Lorem	Ipsum	Dolor
Check 2	Cell 1	Cell 2	Cell 3
Check 3	Cell 4	Cell 5	Cell 6
Check 4	Cell 7	Cell 8	Cell 9

Material checkboxes MDB Pro component

Check 1	Lorem	Ipsum	Dolor
Check 2	Cell 1	Cell 2	Cell 3
Check 3	Cell 4	Cell 5	Cell 6
Check 4	Cell 7	Cell 8	Cell 9

Table with icons

To learn more about icons read Icons usage documentation or 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 with panel MDB Pro component

See all the available options in the Panels documentation and Cards documentation.

Table name

First Name	Last Name	Username	Username	Username	Username
Mark	Otto	@mdo	Mark	Otto	@mdo
Jacob	Thornton	@fat	Jacob	Thornton	@fat
Larry	the Bird	@twitter	Larry	the Bird	@twitter
Paul	Topolski	@P_Topolski	Paul	Topolski	@P_Topolski
Larry	the Bird	@twitter	Larry	the Bird	@twitter




  
  

    
      
      
    

    Table name

    
      
      
      
    

  
  

  

    
      
      

        
        
          
            
              
            
            
              First Name
                
              
            
            
              Last Name
                
              
            
            
              Username
                
              
            
            
              Email
                
              
            
            
              Country
                
              
            
            
              City
                
              
            
          
        
        

        
        
          
            
              
            
            {{row.first}}
            {{row.last}}
            {{row.username}}
            {{row.email}}
            {{row.country}}
            {{row.city}}

	First Name	Last Name	Username	Email	Country	City
	{{row.first}}	{{row.last}}	{{row.username}}	{{row.email}}	{{row.country}}	{{row.city}}


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