Tables
React Bootstrap 5 Tables component
Tables allow you to aggregate a huge amount of data and present it in a clear and orderly way. MDB tables provide additional benefits like responsiveness and the possibility of manipulating the table styles.
Due to the widespread use of <table> elements across third-party widgets
like calendars and date pickers, Bootstrap’s tables are opt-in. Add the base
class .table to any <table>, then extend with our optional
modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning
any nested tables can be styled independent from the parent.
Basic example
Using the most basic table markup, here’s how .table-based tables look in MDB.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable>
<MDBTableHead>
<tr>
<th scope='col'>#</th>
<th scope='col'>First</th>
<th scope='col'>Last</th>
<th scope='col'>Handle</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope='row'>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope='row'>3</th>
<td colSpan={2}>Larry the Bird</td>
<td>@twitter</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
Advanced example
An advanced example of the table with images, badges, buttons, and secondary texts.
| Name | Title | Status | Position | Actions |
|---|---|---|---|---|
John Doe john.doe@gmail.com |
Software engineer IT department |
Active | Senior | |
Alex Ray alex.ray@gmail.com |
Consultant Finance |
Onboarding | Junior | |
Kate Hunington kate.hunington@gmail.com |
Designer UI/UX |
Awaiting | Senior |
import React from 'react';
import { MDBBadge, MDBBtn, MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable align='middle'>
<MDBTableHead>
<tr>
<th scope='col'>Name</th>
<th scope='col'>Title</th>
<th scope='col'>Status</th>
<th scope='col'>Position</th>
<th scope='col'>Actions</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<td>
<div className='d-flex align-items-center'>
<img
src='https://mdbootstrap.com/img/new/avatars/8.jpg'
alt=''
style={{ width: '45px', height: '45px' }}
className='rounded-circle'
/>
<div className='ms-3'>
<p className='fw-bold mb-1'>John Doe</p>
<p className='text-muted mb-0'>john.doe@gmail.com</p>
</div>
</div>
</td>
<td>
<p className='fw-normal mb-1'>Software engineer</p>
<p className='text-muted mb-0'>IT department</p>
</td>
<td>
<MDBBadge color='success' pill>
Active
</MDBBadge>
</td>
<td>Senior</td>
<td>
<MDBBtn color='link' rounded size='sm'>
Edit
</MDBBtn>
</td>
</tr>
<tr>
<td>
<div className='d-flex align-items-center'>
<img
src='https://mdbootstrap.com/img/new/avatars/6.jpg'
alt=''
style={{ width: '45px', height: '45px' }}
className='rounded-circle'
/>
<div className='ms-3'>
<p className='fw-bold mb-1'>Alex Ray</p>
<p className='text-muted mb-0'>alex.ray@gmail.com</p>
</div>
</div>
</td>
<td>
<p className='fw-normal mb-1'>Consultant</p>
<p className='text-muted mb-0'>Finance</p>
</td>
<td>
<MDBBadge color='primary' pill>
Onboarding
</MDBBadge>
</td>
<td>Junior</td>
<td>
<MDBBtn color='link' rounded size='sm'>
Edit
</MDBBtn>
</td>
</tr>
<tr>
<td>
<div className='d-flex align-items-center'>
<img
src='https://mdbootstrap.com/img/new/avatars/7.jpg'
alt=''
style={{ width: '45px', height: '45px' }}
className='rounded-circle'
/>
<div className='ms-3'>
<p className='fw-bold mb-1'>Kate Hunington</p>
<p className='text-muted mb-0'>kate.hunington@gmail.com</p>
</div>
</div>
</td>
<td>
<p className='fw-normal mb-1'>Designer</p>
<p className='text-muted mb-0'>UI/UX</p>
</td>
<td>
<MDBBadge color='warning' pill>
Awaiting
</MDBBadge>
</td>
<td>Senior</td>
<td>
<MDBBtn color='link' rounded size='sm'>
Edit
</MDBBtn>
</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
Variants
Use contextual classes to color tables, table rows or individual cells.
| Class | Heading | Heading |
|---|---|---|
| Default | Cell | Cell |
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| Danger | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| Light | Cell | Cell |
| Dark | Cell | Cell |
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable>
<MDBTableHead>
<tr>
<th scope='col'>Class</th>
<th scope='col'>Heading</th>
<th scope='col'>Heading</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>Default</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className='table-primary'>
<th scope='row'>Primary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className='table-secondary'>
<th scope='row'>Secondary</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className='table-success'>
<th scope='row'>Success</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className='table-danger'>
<th scope='row'>Danger</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className='table-warning'>
<th scope='row'>Warning</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className='table-info'>
<th scope='row'>Info</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className='table-light'>
<th scope='row'>Light</th>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr className='table-dark'>
<th scope='row'>Dark</th>
<td>Cell</td>
<td>Cell</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
Conveying meaning to assistive technologies:
Using color to add meaning only provides a visual indication, which will not be conveyed to
users of assistive technologies – such as screen readers. Ensure that information denoted by
the color is either obvious from the content itself (e.g. the visible text), or is included
through alternative means, such as additional text hidden with the
.visually-hidden class.
Striped
Use prop striped to add zebra-striping to any table row within the
<tbody>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable striped>
<MDBTableHead>
<tr>
<th scope='col'>#</th>
<th scope='col'>First</th>
<th scope='col'>Last</th>
<th scope='col'>Handle</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope='row'>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope='row'>3</th>
<td colSpan={2}>Larry the Bird</td>
<td>@twitter</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
Hoverable
Add prop hover to enable a hover state on table rows within a
<tbody>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable hover>
<MDBTableHead>
<tr>
<th scope='col'>#</th>
<th scope='col'>First</th>
<th scope='col'>Last</th>
<th scope='col'>Handle</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope='row'>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope='row'>3</th>
<td colSpan={2}>Larry the Bird</td>
<td>@twitter</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
These hoverable rows can also be combined with the striped variant:
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
import React from 'react';
import { MDBTable } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable striped hover>...</MDBTable>
);
}
Active tables
Highlight a table row or cell by adding a .table-active class.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable>
<MDBTableHead>
<tr>
<th scope='col'>#</th>
<th scope='col'>First</th>
<th scope='col'>Last</th>
<th scope='col'>Handle</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr className='table-active'>
<th scope='row'>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope='row'>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope='row'>3</th>
<td colSpan={2} className='table-active'>
Larry the Bird
</td>
<td>@twitter</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
Bordered
Add .table-bordered for borders on all sides of the table and cells.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable bordered>
<MDBTableHead>
<tr>
<th scope='col'>#</th>
<th scope='col'>First</th>
<th scope='col'>Last</th>
<th scope='col'>Handle</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope='row'>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope='row'>3</th>
<td colSpan={2}>Larry the Bird</td>
<td>@twitter</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
Border color utilities can be added to change colors:
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable bordered borderColor="primary" >
<MDBTableHead>
<tr>
<th scope='col'>#</th>
<th scope='col'>First</th>
<th scope='col'>Last</th>
<th scope='col'>Handle</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope='row'>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope='row'>3</th>
<td colSpan={2}>Larry the Bird</td>
<td>@twitter</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
Borderless
Add .table-borderless for a table without borders.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable borderless>
<MDBTableHead>
<tr>
<th scope='col'>#</th>
<th scope='col'>First</th>
<th scope='col'>Last</th>
<th scope='col'>Handle</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope='row'>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope='row'>3</th>
<td colSpan={2}>Larry the Bird</td>
<td>@twitter</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
Small
Add .table-sm to make any .table more compact by cutting all cell
padding in half.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable small>
<MDBTableHead>
<tr>
<th scope='col'>#</th>
<th scope='col'>First</th>
<th scope='col'>Last</th>
<th scope='col'>Handle</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope='row'>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope='row'>3</th>
<td colSpan={2}>Larry the Bird</td>
<td>@twitter</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
Vertical alignment
Table cells of <thead> are always vertical aligned to the bottom. Table
cells in <tbody> inherit their alignment from
<table> and are aligned to the the top by default. Use the
vertical align classes to re-align
where needed.
| Heading 1 | Heading 2 | Heading 3 | Heading 4 |
|---|---|---|---|
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. |
This cell inherits vertical-align: bottom; from the table row |
This cell inherits vertical-align: bottom; from the table row |
This cell inherits vertical-align: bottom; from the table row |
Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. |
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
This cell is aligned to the top. | Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. |
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable align="middle">
<MDBTableHead>
<tr>
<th scope='col' className='w-25'>
Heading 1
</th>
<th scope='col' className='w-25'>
Heading 2
</th>
<th scope='col' className='w-25'>
Heading 3
</th>
<th scope='col' className='w-25'>
Heading 4
</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<td>
This cell inherits vertical-align: middle; from the table
</td>
<td>
This cell inherits vertical-align: middle; from the table
</td>
<td>
This cell inherits vertical-align: middle; from the table
</td>
<td>
Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.
Vestibulum id ligula porta felis euismod semper.
</td>
</tr>
<tr className='align-bottom'>
<td>
This cell inherits vertical-align: bottom; from the table row
</td>
<td>
This cell inherits vertical-align: bottom; from the table row
</td>
<td>
This cell inherits vertical-align: bottom; from the table row
</td>
<td>
Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.
Vestibulum id ligula porta felis euismod semper.
</td>
</tr>
<tr>
<td>
This cell inherits vertical-align: middle; from the table
</td>
<td>
This cell inherits vertical-align: middle; from the table
</td>
<td className='align-top'>This cell is aligned to the top.</td>
<td>
Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum.
Vestibulum id ligula porta felis euismod semper.
</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
Nesting
Border styles, active styles, and table variants are not inherited by nested tables.
| # | First | Last | Handle | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Mark | Otto | @mdo | ||||||||||||
|
|||||||||||||||
| 3 | Larry | the Bird | |||||||||||||
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable bordered striped>
<MDBTableHead>
<tr>
<th scope='col'>#</th>
<th scope='col'>First</th>
<th scope='col'>Last</th>
<th scope='col'>Handle</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td colSpan={4}>
<table className='table mb-0'>
<MDBTableHead>
<tr>
<th scope='col'>Header</th>
<th scope='col'>Header</th>
<th scope='col'>Header</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>A</th>
<td>First</td>
<td>Last</td>
</tr>
<tr>
<th scope='row'>B</th>
<td>First</td>
<td>Last</td>
</tr>
<tr>
<th scope='row'>C</th>
<td>First</td>
<td>Last</td>
</tr>
</MDBTableBody>
</table>
</td>
</tr>
<tr>
<th scope='row'>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
How nesting works
To prevent any styles from leaking to nested tables, we use the child combinator
(>) selector in our CSS. Since we need to target all the tds and
ths in the thead, tbody, and tfoot, our
selector would look pretty long without it. As such, we use the rather odd looking
.table > :not(caption) > * > * selector to target all tds
and ths of the .table, but none of any potential nested tables.
Note that if you add <tr>s as direct children of a table, those
<tr> will be wrapped in a <tbody> by default, thus
making our selectors work as intended.
Additional examples
A few practical examples of the use of tables with typical components such as buttons, checkboxes or icons.
Checkboxes
To learn more about checkboxes read Checkbox Docs.
|
|
Lorem | Ipsum | Dolor |
|---|---|---|---|
|
|
Sit | Amet | Consectetur |
|
|
Adipisicing | Elit | Sint |
|
|
Hic | Fugiat | Temporibus |
import React from 'react';
import { MDBBtn, MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable align='middle'>
<MDBTableHead light>
<tr>
<th scope='col'>
<MDBCheckbox></MDBCheckbox>
</th>
<th scope='col'>Lorem</th>
<th scope='col'>Ipsum</th>
<th scope='col'>Dolor</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='col'>
<MDBCheckbox></MDBCheckbox>
</th>
<td>Sit</td>
<td>Amet</td>
<td>Consectetur</td>
</tr>
<tr>
<th scope='col'>
<MDBCheckbox></MDBCheckbox>
</th>
<td>Adipsicing</td>
<td>Elit</td>
<td>Sint</td>
</tr>
<tr>
<th scope='col'>
<MDBCheckbox></MDBCheckbox>
</th>
<td>Hic</td>
<td>Fugiat</td>
<td>Temporibus</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
Icons
To learn more about icons read Icons Docs.
| Product Detail Views | Unique Purchases | Quantity | Product Revenue | Avg. Price | |
|---|---|---|---|---|---|
| Value | 18,492 | 228 | 350 | $4,787.64 | $13.68 |
| Percentage change | -48.8%% | 14.0% | 46.4% | 29.6% | -11.5% |
| Absolute change | -17,654 | 28 | 111 | $1,092.72 | $-1.78 |
import React from 'react';
import { MDBIcon, MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable>
<MDBTableHead light>
<tr>
<th scope='col'></th>
<th scope='col'>Product Detail Views</th>
<th scope='col'>Unique Purchases</th>
<th scope='col'>Quantity</th>
<th scope='col'>Product Revenue</th>
<th scope='col'>Avg. Price</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='col'>Value</th>
<td>18,492</td>
<td>228</td>
<td>350</td>
<td>$4,787.64</td>
<td>$13.68</td>
</tr>
<tr>
<th scope='col'>Percentage change</th>
<td className='text-danger'>
<MDBIcon className='me-1' fas icon='caret-down' />
-48.8%
</td>
<td className='text-success'>
<MDBIcon className='me-1' fas icon='caret-up' />
14.0%
</td>
<td className='text-success'>
<MDBIcon className='me-1' fas icon='caret-up' />
46.4%
</td>
<td className='text-success'>
<MDBIcon className='me-1' fas icon='caret-up' />
29.6%
</td>
<td className='text-danger'>
<MDBIcon className='me-1' fas icon='caret-down' />
-11.5%
</td>
</tr>
<tr>
<th scope='col'>Absolute change</th>
<td className='text-danger'>
<MDBIcon className='me-1' fas icon='caret-down' />
-17,654
</td>
<td className='text-success'>
<MDBIcon className='me-1' fas icon='caret-up' />
28
</td>
<td className='text-success'>
<MDBIcon className='me-1' fas icon='caret-up' />
111
</td>
<td className='text-success'>
<MDBIcon className='me-1' fas icon='caret-up' />
$1,092.72
</td>
<td className='text-danger'>
<MDBIcon className='me-1' fas icon='caret-down' />
$-1.78
</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
Anatomy
Table head
Similar to tables and dark tables, use the modifier classes
.table-light or .table-dark to make <thead>s
appear light or dark gray.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable>
<MDBTableHead light>
<tr>
<th scope='col'>#</th>
<th scope='col'>First</th>
<th scope='col'>Last</th>
<th scope='col'>Handle</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope='row'>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope='row'>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable>
<MDBTableHead dark>
<tr>
<th scope='col'>#</th>
<th scope='col'>First</th>
<th scope='col'>Last</th>
<th scope='col'>Handle</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope='row'>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope='row'>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
Table foot
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| Footer | Footer | Footer | Footer |
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable>
<MDBTableHead light>
<tr>
<th scope='col'>#</th>
<th scope='col'>First</th>
<th scope='col'>Last</th>
<th scope='col'>Handle</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope='row'>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope='row'>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</MDBTableBody>
<tfoot>
<tr>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
</tr>
</tfoot>
</MDBTable>
);
}
Captions
A <caption> functions like a heading for a table. It helps users with
screen readers to find a table and understand what it’s about and decide if they want to
read it.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable>
<caption>List of users</caption>
<MDBTableHead>
...
</MDBTableHead>
<MDBTableBody>
...
</MDBTableBody>
</MDBTable>
);
}
You can also put the <caption> on the top of the table with
.caption-top.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable className='caption-top'>
<caption>List of users</caption>
<MDBTableHead>
<tr>
<th scope='col'>#</th>
<th scope='col'>First</th>
<th scope='col'>Last</th>
<th scope='col'>Handle</th>
</tr>
</MDBTableHead>
<MDBTableBody>
<tr>
<th scope='row'>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope='row'>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope='row'>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</MDBTableBody>
</MDBTable>
);
}
Responsive tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table
responsive across all viewports by wrapping a .table with
.table-responsive. Or, pick a maximum breakpoint with which to have a
responsive table up to by using .table-responsive{-sm|-md|-lg|-xl|-xxl}.
Vertical clipping/truncation:
Responsive tables make use of overflow-y: hidden, which clips off any content
that goes beyond the bottom or top edges of the table. In particular, this can clip off
dropdown menus and other third-party widgets.
Always responsive
Across every breakpoint, use .table-responsive for horizontally scrolling
tables.
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
import React from 'react';
import { MDBTable, MDBTableHead, MDBTableBody } from 'mdb-react-ui-kit';
export default function App() {
return (
<MDBTable responsive>
...
</MDBTable>
);
}
Breakpoint specific
Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive
tables up to a particular breakpoint. From that breakpoint and up, the table will behave
normally and not scroll horizontally.
These tables may asdappear broken until their responsive styles apply at specific viewport widths.
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
import React from 'react';
import { MDBTable } from 'mdb-react-ui-kit';
export default function App() {
return (
<>
<MDBTable responsive>...</MDBTable>
<MDBTable responsive="sm">...</MDBTable>
<MDBTable responsive="md">...</MDBTable>
<MDBTable responsive="lg">...</MDBTable>
<MDBTable responsive="xl">...</MDBTable>
<MDBTable responsive="xxl">...</MDBTable>
</>
);
}
Customizing in Sass
-
The factor variables (
$table-striped-bg-factor,$table-active-bg-factor&$table-hover-bg-factor) are used to determine the contrast in table variants. -
Apart from the light & dark table variants, theme colors are lightened by the
$table-bg-levelvariable.
$table-cell-padding-y: .5rem;
$table-cell-padding-x: .5rem;
$table-cell-padding-y-sm: .25rem;
$table-cell-padding-x-sm: .25rem;
$table-cell-vertical-align: top;
$table-color: $body-color;
$table-bg: transparent;
$table-striped-color: $table-color;
$table-striped-bg-factor: .05;
$table-striped-bg: rgba($black, $table-striped-bg-factor);
$table-active-color: $table-color;
$table-active-bg-factor: .1;
$table-active-bg: rgba($black, $table-active-bg-factor);
$table-hover-color: $table-color;
$table-hover-bg-factor: .075;
$table-hover-bg: rgba($black, $table-hover-bg-factor);
$table-border-factor: .1;
$table-border-width: $border-width;
$table-border-color: $border-color;
$table-striped-order: odd;
$table-group-seperator-color: currentColor;
$table-caption-color: $text-muted;
$table-bg-level: -9;
$table-variants: (
"primary": color-level($primary, $table-bg-level),
"secondary": color-level($secondary, $table-bg-level),
"success": color-level($success, $table-bg-level),
"info": color-level($info, $table-bg-level),
"warning": color-level($warning, $table-bg-level),
"danger": color-level($danger, $table-bg-level),
"light": $light,
"dark": $dark,
);
Tables - API
Import
import { MDBTable, MDBTableBody, MDBTableHead } from 'mdb-react-ui-kit';
Properties
MDBTable
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
React.ComponentProps<any> | 'table' |
Defines tag of the MDBTable element |
<MDBTable tag="section" />
|
align
|
"top" | "middle" | "bottom" | '' |
Add class of aling to table. |
<MDBTable align="top" />
|
borderColor
|
"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "white" | '' |
Add border color color to all cells in table. |
<MDBTable borderColor="primary" />
|
bordered
|
boolean | false |
Add border to cells in table |
<MDBTable bordered />
|
borderless
|
boolean | false |
Remove all borders from cells in table |
<MDBTable borderless />
|
color
|
"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "white" | '' |
Add colors to table |
<MDBTable color="primary" />
|
hover
|
boolean | false |
Add hoverable to rows in table |
<MDBTable hover />
|
small
|
boolean | false |
Add small class to table |
<MDBTable small />
|
striped
|
boolean | false |
Add striped class to table |
<MDBTable striped />
|
responsive
|
boolean | string | false |
Adds a responsive table behaviors |
<MDBTable responsive />
|
classNameResponsive
|
string | '' |
Adds a className to the responsive table |
<MDBTable responsive classNameResponsive='class' />
|
ref
|
React.Ref<any> | |
A reference to the MDBTable component |
<MDBTable ref={someRef} />
|
MDBTableBody
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
React.ComponentProps<any> | 'tbody' |
Defines tag of the MDBTableBody element |
<MDBTableBody tag="section" />
|
ref
|
React.Ref<any> | '' |
A reference to the MDBTableBody components |
<MDBTableBody ref={someRef} />
|
MDBTableHead
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
tag
|
React.ComponentProps<any> | 'thead' |
Defines tag of the MDBTableHead element |
<MDBTableHead tag="section" />
|
dark
|
boolean | false |
Add active dark to element |
<MDBTableHead dark />
|
light
|
boolean | false |
Add active light to element |
<MDBTableHead light />
|
ref
|
React.Ref<any> | |
A reference to the MDBTableHead component |
<MDBTableHead ref={someRef} />
|