Tables examples
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 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">
<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 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><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>
</thead>
<!-- Table head -->
<!-- Table body -->
<tbody>
<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>
</tbody>
<!-- Table body -->
</table>
<!-- Table -->
Table with panel
See all 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="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-->
<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="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>
</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 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 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.
Table generator
Interactive tool for creating fully coded tables.
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 AboutMDB 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 ProTutorials
If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.
5 min Quick Start Full TutorialCompilation
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 tutorialIntegrations 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