Tables examples
Bootstrap table styles
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
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 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.
<!-- 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 responsive
Advanced options for responsive tables
Datatables
MDBootstrap integration with the most popular plugin to enhance standard tables.
Table pagination
Pagination is a simple navigation method that allows you to split a huge amount of content within the tables into smaller parts.
Table search
The MDBootstrap search box enables super-fast searching among all the table data.
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.
Getting started: download & setup
Download
All of the components and features are a part of the MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.
It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.
Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB Pro
Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 10,000 components, dozens of plugins and much more cool features.
Click the button below to learn more about the MDBootstrap Pro package.
MDBootstrap ProTutorials
If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.
5 min Quick Start Full Bootstrap TutorialCompilation & Customization
To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.
If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.
Compilation & Customization tutorialMap 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
Integrations with Angular, React or Vue
Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.
About MDB Angular About MDB React About MDB VueExclusive resources
MDBootstrap is a platform for web creators and MDB packages are only a part of it.
If you sign up you'll gain free access to other useful tools & resources including:
- Community developed components & design projects
- Technical support & community forum
- CLI interface & free project hosting
- Helpful articles & news agregators
...and much more!
Don't hesitate and sign up now!
Sign up now