Rate this docs

Angular Bootstrap table styles

Angular Table styles - Bootstrap 4 & Material Design

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


          <table class="table table-striped table-responsive-md btn-table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>
                    <button mdbBtn color="indigo" size="sm" mdbWavesEffect type="button" class="m-0">Button</button>
                  </td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Jacob</td>
                  <td>
                    <button mdbBtn color="indigo" size="sm" mdbWavesEffect type="button" class="m-0">Button</button>
                  </td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>
                    <button mdbBtn color="indigo" size="sm" mdbWavesEffect type="button" class="m-0">Button</button>
                  </td>
                </tr>
              </tbody>
            </table>

            

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


              <table class="table table-striped table-responsive-md btn-table">

                <thead>
                  <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                  </tr>
                </thead>

                <tbody>
                  <tr>
                    <th scope="row">1</th>
                    <td>
                      <button mdbBtn color="primary" outline="true" size="sm" mdbWavesEffect type="button" class="m-0">Button</button>
                    </td>
                    <td>Otto</td>
                    <td>@mdo</td>
                  </tr>
                  <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>
                      <button mdbBtn color="primary" outline="true" size="sm" mdbWavesEffect type="button" class="m-0">Button</button>
                    </td>
                    <td>@fat</td>
                  </tr>
                  <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>
                      <button mdbBtn color="primary" outline="true" size="sm" mdbWavesEffect type="button" class="m-0">Button</button>
                    </td>
                  </tr>
                </tbody>

              </table>

              

Rounded buttons MDB Pro component

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

          <table class="table table-striped table-responsive-md btn-table">

              <thead>
                <tr>
                  <th>#</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Username</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>
                    <button mdbBtn color="primary" outline="true" size="sm" type="button" class="m-0" mdbWavesEffect>Button</button>
                  </td>
                  <td>Otto</td>
                  <td>@mdo</td>
                </tr>
                <tr>
                  <th scope="row">2</th>
                  <td>Jacob</td>
                  <td>
                    <button mdbBtn color="primary" outline="true" size="sm" type="button" class="m-0" mdbWavesEffect>Button</button>
                  </td>
                  <td>@fat</td>
                </tr>
                <tr>
                  <th scope="row">3</th>
                  <td>Larry</td>
                  <td>the Bird</td>
                  <td>
                    <button mdbBtn color="primary" outline="true" size="sm" type="button" class="m-0" mdbWavesEffect>Button</button>
                  </td>
                </tr>
              </tbody>

            </table>

                  

Table with checkboxes

See all available options of checkboxes 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>
          <!-- Default unchecked -->
          <div class="custom-control custom-checkbox">
            <mdb-checkbox>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>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>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>Check 4</mdb-checkbox>
          </div>
        </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 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  -->
<table class="table">
    <!-- Table head -->
    <thead>
      <tr>
        <th>#</th>
        <th>
          <mdb-icon icon="leaf" class="mr-2 blue-text" aria-hidden="true">Lorem</mdb-icon>
        </th>
        <th>
          <mdb-icon icon="leaf" class="mr-2 teal-text" aria-hidden="true"></mdb-icon>Ipsum</th>
        <th>
          <mdb-icon 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 icon="diamond" class="mr-2 grey-text" aria-hidden="true"></mdb-icon>Cell 1</td>
        <td>
          <mdb-icon icon="download" class="mr-2 grey-text" aria-hidden="true"></mdb-icon>Cell 2</td>
        <td>
          <mdb-icon 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 icon="gift" class="mr-2 grey-text" aria-hidden="true"></mdb-icon>Cell 5</td>
        <td>
          <mdb-icon 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 icon="magic" class="mr-2 grey-text" aria-hidden="true"></mdb-icon>Cell 7</td>
        <td>
          <mdb-icon icon="table" class="mr-2 grey-text" aria-hidden="true"></mdb-icon>Cell 8</td>
        <td>
          <mdb-icon 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 the available options in the Panels documentation and Cards documentation.

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

<div class="card card-cascade narrower">

  <!--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 type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
        <mdb-icon icon="th-large" class="mt-0"></mdb-icon>
      </button>
      <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
        <mdb-icon icon="columns" class="mt-0"></mdb-icon>
      </button>
    </div>

    <a href="" class="white-text mx-3">Table name</a>

    <div>
      <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
        <mdb-icon icon="pencil" class="mt-0"></mdb-icon>
      </button>
      <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
        <mdb-icon icon="remove" class="mt-0"></mdb-icon>
      </button>
      <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
        <mdb-icon icon="info-circle" class="mt-0"></mdb-icon>
      </button>
    </div>

  </div>
  <!--/Card image-->

  <div class="px-4">

    <div class="table-wrapper">
      <!--Table-->
      <table class="table table-hover mb-0">

        <!--Table head-->
        <thead>
          <tr>
            <th>
              <mdb-checkbox></mdb-checkbox>
            </th>
            <th class="th-lg">
              <a (click)="sortBy('first')">First Name
                <mdb-icon icon="sort" class="ml-1"></mdb-icon>
              </a>
            </th>
            <th class="th-lg">
              <a (click)="sortBy('last')">Last Name
                <mdb-icon icon="th-sort" class="ml-1"></mdb-icon>
              </a>
            </th>
            <th class="th-lg">
              <a (click)="sortBy('username')">Username
                <mdb-icon icon="th-sort" class="ml-1"></mdb-icon>
              </a>
            </th>
            <th class="th-lg">
              <a (click)="sortBy('email')">Email
                <mdb-icon icon="th-sort" class="ml-1"></mdb-icon>
              </a>
            </th>
            <th class="th-lg">
              <a (click)="sortBy('country')">Country
                <mdb-icon icon="th-sort" class="ml-1"></mdb-icon>
              </a>
            </th>
            <th class="th-lg">
              <a (click)="sortBy('city')">City
                <mdb-icon icon="th-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>
</div>
      

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

                          
                    // MDB Angular Pro
                    import { WavesModule, IconsModule, ButtonsModule } from 'ng-uikit-pro-standard';
                    // MDB Angular Free
                    import { WavesModule, IconsModule, ButtonsModule } from 'angular-bootstrap-md';