Tables
Tables (or grids as UX designers are calling them) are used to display, manipulate and organise large amounts of data. The grid can be a fairly complex interface element with loads of functionality. An example of where a grid can be suitable is when you are to display an overview of e.g. documents or register posts. Read more about tables/grids in the UX Guidelines.
Use when
- You are to display large amounts of data in a structured way
- The user needs to be able to sort, search, filter or otherwise manipulate the data
On this page you can find multiple types of grid table component and the style variants:
- The default design for table grid
- Plain table grid design
- Zebra table grid design
- Table grid design row heights/size
- Hover table rows
- Active table row
- Error validation table row
- Responsive tables
- Demo tables
Table grid size variants:
- Condensed table grid design: 32px row height
- Default table grid design: 40px row height
- Regular table grid design: 48px row height
- Relaxed table grid design: 56px row height
Design
The default styling — light padding and only horizontal dividers — add the base class .table
to any <table>
.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
4 | Stan | Lucas | @mdo |
5 | Ben | Johnas | @fat |
6 | John | Snow | @fb |
Users listed in this table: 6 |
|
<table class="table">
<caption>Contact Information</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
...
</tbody>
<tfoot>
<tr>
<td colspan="2">
Users listed in this table: <b>6</b>
</td>
<td colspan="2">
<div class="d-flex justify-content-end">
<button class="btn btn-primary mb-0">Confirm</div>
<button class="btn mb-0">Cancel</div>
</div>
</td>
</tr>
</tfoot>
</table>
Plain tables
For plain styling — light padding and no striped rows or horizontal dividers — add the class .table-plain
(together with the base class) to any <table>
.
# | First Name | Last Name | Username | |
---|---|---|---|---|
1 | Mark | Otto | @mdo | |
2 | Jacob | Thornton | @fat | |
3 | Larry | the Bird | ||
4 | Stan | Lucas | @mdo | |
5 | Ben | Johnas | @fat | |
6 | John | Snow | @fb | |
<table class="table table-plain">
<caption>Contact Information</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
...
</tbody>
<tfoot>
<tr>
<td colspan="5">
<nav class="d-flex justify-content-end" aria-label="Page navigation for the data grid">
<ul class="pagination pagination-round">
<li>
<label for="quantityPerPage">Show per page:</label>
</li>
<li>
<select name="perPage" id="quantityPerPage" class="quantity mr-8">
<option value="24">24</option>
<option value="52">24</option>
<option value="75">24</option>
<option selected value="100">24</option>
</select>
</li>
<li>
<button class="go2first btn" disabled>Go to first page</button>
</li>
<li>
<button class="prev btn" disabled>Previous page</button>
</li>
<li>
<b class="ml-8">100</b>
</li>
<li>
<span>of</span>
</li>
<li>
<b>729</b>
</li>
<li>
<span class="mr-8">items</span>
</li>
<li>
<button class="next btn">Next page</button>
</li>
<li>
<button class="go2last btn">Go to last page</button>
</li>
<li>
<label class="ml-8" for="jumpToPage">Jump to page:</label>
</li>
<li>
<input type="number" id="jumpToPage" name="pageJump" size="1" min="1" max="8">
</li>
</ul>
</nav>
</td>
</tr>
</tfoot>
</table>
Zebra tables variant
For adding the old zebra stripe styling (striped rows and vertical dotted dividers), add the class .table-stripe
(together with the base class) to any <table>
.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
4 | Stan | Lucas | @mdo |
5 | Ben | Johnas | @fat |
6 | John | Snow | @fb |
Users listed in this table: 6 |
|
<table class="table table-stripe">
<caption>Contact Information</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
...
</tbody>
<tfoot>
<tr>
<td colspan="2">
Users listed in this table: <b>6</b>
</td>
<td colspan="2">
<div class="d-flex justify-content-end">
<button class="btn btn-primary mb-0">Confirm</div>
<button class="btn mb-0">Cancel</div>
</div>
</td>
</tr>
</tfoot>
</table>
Size
Table grid size variants:
- Condensed table grid design: 32px row height
- Default table grid design: 40px row height
- Regular table grid design: 48px row height
- Relaxed table grid design: 56px row height
Condensed table
Add .table-condensed
to make tables more compact by cutting cell padding.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
4 | Stan | Lucas | @mdo |
5 | Ben | Johnas | @fat |
6 | John | Snow | @fb |
<table class="table table-condensed">
...
</table>
Regular size table
Add .table-regular
to make tables more compact by cutting cell padding.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
4 | Stan | Lucas | @mdo |
5 | Ben | Johnas | @fat |
6 | John | Snow | @fb |
<table class="table table-regular">
...
</table>
Relaxed size table
Add .table-relaxed
to make tables more compact by cutting cell padding.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
4 | Stan | Lucas | @mdo |
5 | Ben | Johnas | @fat |
6 | John | Snow | @fb |
<table class="table table-relaxed">
...
</table>
Table row state
Hover on rows
For this style you need to add this additional class .table-hover
to your table.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
4 | Stan | Lucas | @mdo |
5 | Ben | Johnas | @fat |
6 | John | Snow | @fb |
<table class="table table-hover">
...
</table>
Active rows
For this style you need to add this additional class .table-active
to your table. For case, the hover on each row will apply too.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
4 | Stan | Lucas | @mdo |
5 | Ben | Johnas | @fat |
6 | John | Snow | @fb |
<table class="table table-active">
...
</table>
Error validation table row
For this style you need to add the .has-error
class to table row tag (<tr>
). To indent the error icon just wrap it in container with the .indent-error
class, the indent works only for the first table cell.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 - (with tr.has-error) | Jacob | Thornton | @fat |
3 | Stan | Lucas | @mdo |
4 - (without tr.has-error) | Ben | Johnas | @fat |
<table class="table table-active">
...
<tbody>
...
<tr class="has-error">
<td scope="row">
<span class="indent-error">
<span class="vismaicon vismaicon-error"></span>
</span>
2
</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
...
</tbody>
</table>
Add the .px-32
helper class to the table tag to include the indent inside the table borders but outside the cell table.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Stan | Lucas | @mdo |
4 | Ben | Johnas | @fat |
<table class="table px-32">
...
</table>
Responsive tables
Create responsive tables by wrapping any .table
in .table-responsive
to make them scroll horizontally on small devices (under 992px). When viewing on anything larger than 992px wide, you will not see any difference in these tables.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird | |
4 | Stan | Lucas | @mdo |
5 | Ben | Johnas | @fat |
6 | John | Snow | @fb |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Demo tables
Interactive table with functionality, added through a custom javascript, for demonstration purposes.
|
First Name | Last Name | Username | |
---|---|---|---|---|
|
Mark | Otto | @mdo | |
Click to see the error message
|
|
Jacob | Thornton | @fat |
|
Larry | the Bird | ||
|
Stan | Lucas | @mdo | |
|
John | Snow | @fb | |
|
Ben | Johnas | @fat | |
Selected: 0 out of 6 items |
|
<div class="table-responsive">
<table class="table">
...
</table>
</div>