Tables examples

Vue Bootstrap table styles

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

        <template>
          <tbl btn responsive striped>
            <tbl-head>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </tbl-head>
  
            <tbl-body>
              <tr>
                <th scope="row">1</th>
                <td>
                  <button type="button" class="btn btn-indigo btn-sm m-0">Button</button>
                </td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>
                  <button type="button" class="btn btn-indigo btn-sm m-0">Button</button>
                </td>
                <td>@fat</td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>
                  <button type="button" class="btn btn-indigo btn-sm m-0">Button</button>
                </td>
              </tr>
            </tbl-body>    
          </tbl>
        </template>

        <script>
          import { Tbl, TblHead, TblBody } from 'mdbvue';
          
          export default {
            name: 'TableAdditionalPage',
            components: {
              Tbl,
              TblHead,
              TblBody
            }
          };
        </script>
        
        <!-- Add "scoped" attribute to limit CSS to this component only -->
        <style scoped>
        
        </style>
      

Outline buttons

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

        <template>
          <tbl btn responsive striped>
            <tbl-head>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </tbl-head>
  
            <tbl-body>
              <tr>
                <th scope="row">1</th>
                <td>
                  <button type="button" class="btn btn-outline-indigo btn-sm m-0">Button</button>
                </td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>
                  <button type="button" class="btn btn-outline-indigo btn-sm m-0">Button</button>
                </td>
                <td>@fat</td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>
                  <button type="button" class="btn btn-outline-indigo btn-sm m-0">Button</button>
                </td>
              </tr>
            </tbl-body>    
          </tbl>
        </template>

        <script>
          import { Tbl, TblHead, TblBody } from 'mdbvue';
          
          export default {
            name: 'TableAdditionalPage',
            components: {
              Tbl,
              TblHead,
              TblBody
            }
          };
        </script>

      

Rounded buttons MDB Pro component

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

        <template>
          <tbl btn responsive striped>
            <tbl-head>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </tbl-head>
  
            <tbl-body>
              <tr>
                <th scope="row">1</th>
                <td>
                  <button type="button" class="btn btn-teal btn-rounded btn-sm m-0">Button</button>
                </td>
                <td>Otto</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>
                  <button type="button" class="btn btn-teal btn-rounded btn-sm m-0">Button</button>
                </td>
                <td>@fat</td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>
                  <button type="button" class="btn btn-teal btn-rounded btn-sm m-0">Button</button>
                </td>
              </tr>
            </tbl-body>    
          </tbl>
        </template>

        <script>
          import { Tbl, TblHead, TblBody } from 'mdbvue';
          
          export default {
            name: 'TableAdditionalPage',
            components: {
              Tbl,
              TblHead,
              TblBody
            }
          };
        </script>
      

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


       <template>
          <!-- Table  -->
        <tbl responsive bordered>
            <!-- Table head -->
            <tbl-head>
                <tr>
                    <th>
                        <!-- Default unchecked -->
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="tableDefaultCheck1">
                            <label class="custom-control-label" for="tableDefaultCheck1">Check 1</label>
                        </div>
                    </th>
                    <th>Lorem</th>
                    <th>Ipsum</th>
                    <th>Dolor</th>
                </tr>
              </tbl-head>
            <!-- Table head -->

            <!-- Table body -->
            <tbl-body>
                <tr>
                    <th scope="row">
                        <!-- Default unchecked -->
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="tableDefaultCheck2" checked>
                            <label class="custom-control-label" for="tableDefaultCheck2">Check 2</label>
                        </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">
                            <input type="checkbox" class="custom-control-input" id="tableDefaultCheck3">
                            <label class="custom-control-label" for="tableDefaultCheck3">Check 3</label>
                        </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">
                            <input type="checkbox" class="custom-control-input" id="tableDefaultCheck4">
                            <label class="custom-control-label" for="tableDefaultCheck4">Check 4</label>
                        </div>
                    </th>
                    <td>Cell 7</td>
                    <td>Cell 8</td>
                    <td>Cell 9</td>
                </tr>
            </tbl-body>
            <!-- Table body -->
          </tbl>
        <!-- Table  -->
       </template>

        <script>
            import { Tbl, TblHead, TblBody } from 'mdbvue';
            
            export default {
              name: 'TableAdditionalPage',
              components: {
                Tbl,
                TblHead,
                TblBody
              }
            };
        </script>
        
        <!-- Add "scoped" attribute to limit CSS to this component only -->
        <style scoped>
        
        </style>

      

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

        <template>
          <!-- Table  -->
          <tbl>
              <!-- Table head -->
              <tbl-head>
                <tr>
                  <th>
                    <!-- Material unchecked -->
                    <div class="form-check">
                      <input type="checkbox" class="form-check-input" id="tableMaterialCheck1">
                      <label class="form-check-label" for="tableMaterialCheck1">Check 1</label>
                    </div>
                  </th>
                  <th>Lorem</th>
                  <th>Ipsum</th>
                  <th>Dolor</th>
                </tr>
              </tbl-head>
              <!-- Table head -->

              <!-- Table body -->
              <tbl-body>
                <tr>
                  <th scope="row">
                    <!-- Material unchecked -->
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="tableMaterialCheck2">
                        <label class="form-check-label" for="tableMaterialCheck2">Check 2</label>
                      </div>
                  </th>
                  <td>Cell 1</td>
                  <td>Cell 2</td>
                  <td>Cell 3</td>
                </tr>
                <tr>
                  <th scope="row">
                    <!-- Material unchecked -->
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="tableMaterialCheck3">
                        <label class="form-check-label" for="tableMaterialCheck3">Check 3</label>
                      </div>
                  </th>
                  <td>Cell 4</td>
                  <td>Cell 5</td>
                  <td>Cell 6</td>
                </tr>
                <tr>
                  <th scope="row">
                    <!-- Material unchecked -->
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="tableMaterialCheck4">
                        <label class="form-check-label" for="tableMaterialCheck4">Check 4</label>
                      </div>
                  </th>
                  <td>Cell 7</td>
                  <td>Cell 8</td>
                  <td>Cell 9</td>
                </tr>
              </tbl-body>
              <!-- Table body -->
            </tbl>
            <!-- Table  -->
          </template>

          <script>
            import { Tbl, TblHead, TblBody } from 'mdbvue';
            
            export default {
              name: 'TableAdditionalPage',
              components: {
                Tbl,
                TblHead,
                TblBody
              }
            };
          </script>
          
          <!-- Add "scoped" attribute to limit CSS to this component only -->
          <style scoped>
          
          </style>
        

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


        <template>
          <!-- Table  -->
          <tbl>
            <!-- Table head -->
            <tbl-head>
              <tr>
                <th>#</th>
                <th><i class="fa fa-leaf mr-2 blue-text" aria-hidden="true"></i>Lorem</th>
                <th><i class="fa fa-leaf mr-2 teal-text" aria-hidden="true"></i>Ipsum</th>
                <th><i class="fa fa-leaf mr-2 indigo-text" aria-hidden="true"></i>Dolor</th>
              </tr>
            </tbl-head>
            <!-- Table head -->

            <!-- Table body -->
            <tbl-body>
              <tr>
                <th scope="row">1</th>
                <td><i class="fa fa-diamond mr-2 grey-text" aria-hidden="true"></i>Cell 1</td>
                <td><i class="fa fa-download mr-2 grey-text" aria-hidden="true"></i>Cell 2</td>
                <td><i class="fa fa-book mr-2 grey-text" aria-hidden="true"></i>Cell 3</td>
              </tr>
              <tr>
                <th scope="row">2</th>
                <td><i class="fa fa-graduation-cap mr-2 grey-text" aria-hidden="true"></i>Cell 4</td>
                <td><i class="fa fa-gift mr-2 grey-text" aria-hidden="true"></i>Cell 5</td>
                <td><i class="fa fa-image mr-2 grey-text" aria-hidden="true"></i>Cell 6</td>
              </tr>
              <tr>
                <th scope="row">3</th>
                <td><i class="fa fa-magic mr-2 grey-text" aria-hidden="true"></i>Cell 7</td>
                <td><i class="fa fa-table mr-2 grey-text" aria-hidden="true"></i>Cell 8</td>
                <td><i class="fa fa-edit mr-2 grey-text" aria-hidden="true"></i>Cell 9</td>
              </tr>
            </tbl-body>
            <!-- Table body -->
          </tbl>
          <!-- Table  -->
        </template>

        <script>
          import { Tbl, TblHead, TblBody } from 'mdbvue';
          
          export default {
            name: 'TableAdditionalPage',
            components: {
              Tbl,
              TblHead,
              TblBody
            }
          };
        </script>
        
        <!-- Add "scoped" attribute to limit CSS to this component only -->
        <style scoped>
        
        </style>
      

Table with panel

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


        <template>

          <!-- Table with panel -->
          <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">
                          <i class="fa fa-th-large mt-0"></i>
                      </button>
                      <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
                          <i class="fa fa-columns mt-0"></i>
                      </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">
                          <i class="fa fa-pencil mt-0"></i>
                      </button>
                      <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
                          <i class="fa fa-remove mt-0"></i>
                      </button>
                      <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
                          <i class="fa fa-info-circle mt-0"></i>
                      </button>
                  </div>
        
              </div>
              <!--/Card image-->
        
        
              <div class="px-4">
        
                  <div class="table-wrapper">
                      <!--Table-->
                      <tbl class="table table-hover mb-0">
        
                          <!--Table head-->
                          <tbl-head>
                              <tr>
                                  <th>
                                      <input class="form-check-input" type="checkbox" id="checkbox">
                                      <label class="form-check-label mr-2" for="checkbox"></label>
                                  </th>
                                  <th class="th-lg">
                                      <a>First Name
                                          <i class="fa fa-sort ml-1"></i>
                                      </a>
                                  </th>
                                  <th class="th-lg">
                                      <a href="">Last Name
                                          <i class="fa fa-sort ml-1"></i>
                                      </a>
                                  </th>
                                  <th class="th-lg">
                                      <a href="">Username
                                          <i class="fa fa-sort ml-1"></i>
                                      </a>
                                  </th>
                                  <th class="th-lg">
                                      <a href="">Username
                                          <i class="fa fa-sort ml-1"></i>
                                      </a>
                                  </th>
                                  <th class="th-lg">
                                      <a href="">Username
                                          <i class="fa fa-sort ml-1"></i>
                                      </a>
                                  </th>
                                  <th class="th-lg">
                                      <a href="">Username
                                          <i class="fa fa-sort ml-1"></i>
                                      </a>
                                  </th>
                              </tr>
                            </tbl-head>
                          <!--Table head-->
        
                          <!--Table body-->
                          <tbl-body>
                              <tr>
                                  <th scope="row">
                                      <input class="form-check-input" type="checkbox" id="checkbox1">
                                      <label class="form-check-label" for="checkbox1"></label>
                                  </th>
                                  <td>Mark</td>
                                  <td>Otto</td>
                                  <td>@mdo</td>
                                  <td>Mark</td>
                                  <td>Otto</td>
                                  <td>@mdo</td>
                              </tr>
                              <tr>
                                  <th scope="row">
                                      <input class="form-check-input" type="checkbox" id="checkbox2">
                                      <label class="form-check-label" for="checkbox2"></label>
                                  </th>
                                  <td>Jacob</td>
                                  <td>Thornton</td>
                                  <td>@fat</td>
                                  <td>Jacob</td>
                                  <td>Thornton</td>
                                  <td>@fat</td>
                              </tr>
                              <tr>
                                  <th scope="row">
                                      <input class="form-check-input" type="checkbox" id="checkbox3">
                                      <label class="form-check-label" for="checkbox3"></label>
                                  </th>
                                  <td>Larry</td>
                                  <td>the Bird</td>
                                  <td>@twitter</td>
                                  <td>Larry</td>
                                  <td>the Bird</td>
                                  <td>@twitter</td>
                              </tr>
                              <tr>
                                  <th scope="row">
                                      <input class="form-check-input" type="checkbox" id="checkbox4">
                                      <label class="form-check-label" for="checkbox4"></label>
                                  </th>
                                  <td>Paul</td>
                                  <td>Topolski</td>
                                  <td>@P_Topolski</td>
                                  <td>Paul</td>
                                  <td>Topolski</td>
                                  <td>@P_Topolski</td>
                              </tr>
                              <tr>
                                  <th scope="row">
                                      <input class="form-check-input" type="checkbox" id="checkbox5">
                                      <label class="form-check-label" for="checkbox5"></label>
                                  </th>
                                  <td>Larry</td>
                                  <td>the Bird</td>
                                  <td>@twitter</td>
                                  <td>Larry</td>
                                  <td>the Bird</td>
                                  <td>@twitter</td>
                              </tr>
                          </tbl-body>
                          <!--Table body-->
                      </tbl>
                      <!--Table-->
                  </div>
        
              </div>
        
          </div>
          <!-- Table with panel -->
        </template>
        
        <script>
            import { Tbl, TblHead, TblBody } from 'mdbvue';
        
            export default {
              name: 'TableAdditionalPage',
              components: {
                Tbl,
                TblHead,
                TblBody
              }
            };
        </script>
        
        <!-- Add "scoped" attribute to limit CSS to this component only -->
        <style scoped>
        
        </style>
      

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 scroll

If your table is too long or too wide you can limit its size and enable scroll functionality.

Table editable

Table editable allows you to edit existing data within the table and add new data to the table.

Tables - getting started : download & setup


Download

All the components and features are part of MDBootstrap for Vue package.

MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4 with Vue.

Click the button below to go to Download Page, where you can download MDBootstrap package.

MDBootstrap Vue version Download MDBootstrap (Vue version) About

MDB Pro

Using components and features labeled as MDB Pro component requires MDB Pro package.

Click the button below to learn more about MDBbootstrap Pro package

MDBootstrap Pro

Tutorials

If you need additional help to start, use our "5 min Quick Start".

5 min Quick Start

Compilation & Customization tutorial

If you need additional help to compile your custom package, use our Compilation & Customization tutorial

Compilation & Customization tutorial