Edit these docs Rate these docs

Tables examples

Bootstrap table styles

Here are some examples of tables with additional elements like buttons, checkboxes, icons, panels & more.

Note: If you need standard bootstrap tables, please have a look at our Basic Tables documentation.


Table with buttons

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

Add the .m-0 class to the button within the table to remove any 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"></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 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>
        </tbody>

        </table>

      

Outline buttons

Add the .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 type="button" class="btn btn-outline-primary btn-sm m-0 waves-effect">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-primary btn-sm m-0 waves-effect">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-primary btn-sm m-0 waves-effect">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 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>
          </tbody>

        </table>

      

Table with checkboxes

You can find of checkbox 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">
                  <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>
          </thead>
          <!-- Table head -->

          <!-- Table body -->
          <tbody>
            <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>
          </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>
                <!-- 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>
          </thead>
          <!-- Table head -->

          <!-- Table body -->
          <tbody>
            <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>
          </tbody>
          <!-- Table body -->
        </table>
        <!-- Table  -->

      

Table with icons

To learn more about icons, please read the Icons usage documentation or Full list of 1400+ 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><i class="fas fa-leaf mr-2 blue-text" aria-hidden="true"></i>Lorem</th>
              <th><i class="fas fa-leaf mr-2 teal-text" aria-hidden="true"></i>Ipsum</th>
              <th><i class="fas fa-leaf mr-2 indigo-text" aria-hidden="true"></i>Dolor</th>
            </tr>
          </thead>
          <!-- Table head -->

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

      

Table with panel

See all of 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


        <!-- 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="fas fa-th-large mt-0"></i>
              </button>
              <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
                <i class="fas 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="fas fa-pencil-alt mt-0"></i>
              </button>
              <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
                <i class="far fa-trash-alt mt-0"></i>
              </button>
              <button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2">
                <i class="fas fa-info-circle mt-0"></i>
              </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>
                      <input class="form-check-input" type="checkbox" id="checkbox">
                      <label class="form-check-label" for="checkbox" class="mr-2 label-table"></label>
                    </th>
                    <th class="th-lg">
                      <a>First Name
                        <i class="fas fa-sort ml-1"></i>
                      </a>
                    </th>
                    <th class="th-lg">
                      <a href="">Last Name
                        <i class="fas fa-sort ml-1"></i>
                      </a>
                    </th>
                    <th class="th-lg">
                      <a href="">Username
                        <i class="fas fa-sort ml-1"></i>
                      </a>
                    </th>
                    <th class="th-lg">
                      <a href="">Username
                        <i class="fas fa-sort ml-1"></i>
                      </a>
                    </th>
                    <th class="th-lg">
                      <a href="">Username
                        <i class="fas fa-sort ml-1"></i>
                      </a>
                    </th>
                    <th class="th-lg">
                      <a href="">Username
                        <i class="fas fa-sort ml-1"></i>
                      </a>
                    </th>
                  </tr>
                </thead>
                <!--Table head-->

                <!--Table body-->
                <tbody>
                  <tr>
                    <th scope="row">
                      <input class="form-check-input" type="checkbox" id="checkbox1">
                      <label class="form-check-label" for="checkbox1" class="label-table"></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" class="label-table"></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" class="label-table"></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" class="label-table"></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" class="label-table"></label>
                    </th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                  </tr>
                </tbody>
                <!--Table body-->
              </table>
              <!--Table-->
            </div>

          </div>

        </div>
        <!-- Table with panel -->

      

Advanced table options

For advanced table options, take look at the 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

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

Table generator

An interactive tool for creating fully coded tables.

Edit these docs Rate these docs

Getting started : download & setup


Download

All the components and features are part of MDBootstrap package.

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

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

MDBootstrap Download MDBootstrap 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" or "Full tutorial" resources.

5 min Quick Start Full Tutorial

Compilation

To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.

Map of dependencies of SCSS files in MDBootstrap:


    Legend:

    '-->' means 'required'

    All free and pro files require files from 'core' catalog

    'none' means 'this component doesn't require anything except core files'

    A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working

    All PRO components require 'pro/_variables.scss' file

    scss/
    |
    |-- core/
    |   |
    |   |-- bootstrap/
    |   |	|-- _functions.scss
    |   |	|-- _variables.scss
    |   |
    |   |-- _colors.scss
    |   |-- _global.scss
    |   |-- _helpers.scss
    |   |-- _masks.scss
    |   |-- _mixins.scss
    |   |-- _typography.scss
    |   |-- _variables.scss
    |   |-- _waves.scss
    |
    |-- free/
    |   |-- _animations-basic.scss --> none
    |   |-- _animations-extended.scss --> _animations-basic.scss
    |   |-- _buttons.scss --> none
    |   |-- _cards.scss --> none <_buttons.scss>
    |   |-- _dropdowns.scss --> none <_buttons.scss>
    |   |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
    |   |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
    |   |-- _pagination.scss --> none
    |   |-- _badges.scss --> none
    |   |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
    |   |-- _carousels.scss --> <_buttons.scss>
    |   |-- _forms.scss --> none
    |   |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
    |   |-- _footers.scss none <_buttons.scss> (PRO: )
    |   |-- _list-group.scss --> none
    |   |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
    |   |-- _depreciated.scss
    |
    |-- pro/
    |   |
    |   |-- picker/
    |   |   |-- _default.scss --> none
    |   |   |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
    |   |   |-- _default-date.scss --> _default.scss, free/_forms.scss
    |   |
    |   |-- sections/
    |   |   |-- _templates.scss --> _sidenav.scss
    |   |   |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
    |   |   |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
    |   |   |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _magazine.scss --> _badges.scss
    |   |   |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |   |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
    |   |
    |   |-- _variables.scss
    |   |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
    |   |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
    |   |-- _tabs.scss --> _cards.scss
    |   |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
    |   |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
    |   |-- _navbars.scss --> free/_navbars.scss  (PRO: )
    |   |-- _scrollspy.scss --> none
    |   |-- _lightbox.scss --> none
    |   |-- _chips.scss --> none
    |   |-- _msc.scss --> none
    |   |-- _forms.scss --> none
    |   |-- _radio.scss --> none
    |   |-- _checkbox.scss --> none
    |   |-- _material-select.scss --> none
    |   |-- _switch.scss --> none
    |   |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
    |   |-- _range.scss --> none
    |   |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
    |   |-- _autocomplete.scss --> free/_forms.scss
    |   |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
    |   |-- _parallax.scss --> none
    |   |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
    |   |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
    |   |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss 
    |   |-- _steppers.scss --> free/_buttons.scss
    |   |-- _blog.scss --> none
    |   |-- _toasts.scss --> free/_buttons.scss
    |   |-- _animations.scss --> none
    |   |-- _charts.scss --> none
    |   |-- _progress.scss --> none
    |   |-- _scrollbar.scss --> none
    |   |-- _skins.scss --> none
    |   |-- _depreciated.scss
    |
    `-- _custom-skin.scss
    `-- _custom-styles.scss
    `-- _custom-variables.scss
    `-- mdb.scss

  

Map of dependencies of JavaScript modules in MDBootstrap:


    Legend:

    '-->' means 'required'

    All files require jQuery and bootstrap.js

    js/
    ├── dist/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src/
    │   ├── buttons.js
    │   ├── cards.js
    │   ├── character-counter.js
    │   ├── chips.js
    │   ├── collapsible.js --> vendor/velocity.js
    │   ├── dropdown.js --> Popper.js, jquery.easing.js
    │   ├── file-input.js
    │   ├── forms-free.js
    │   ├── material-select.js --> dropdown.js
    │   ├── mdb-autocomplete.js
    │   ├── preloading.js
    │   ├── range-input.js --> vendor/velocity.js
    │   ├── scrolling-navbar.js
    │   ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
    │   └── smooth-scroll.js
    └── vendor/
        ├── addons/
        │   ├── datatables.js
        │   └── datatables.min.js
        ├── chart.js
        ├── enhanced-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js --> vendor/jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js --> vendor/hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js --> vendor/picker.js
        ├── picker.js
        ├── picker-time.js --> vendor/picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
  

Compilation & Customization tutorial

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

Compilation & Customization tutorial

Integrations with Angular, React or Vue

Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.

About MDB Angular About MDB React About MDB Vue