React Bootstrap 5 Table
React Bootstrap 5 Tables are component with basic tables features. They let you aggregate a huge amount of data and present it in a clear and orderly way.
React Bootstrap 5 tables provide additional benefits like responsiveness, and the possibility to manipulate the styles of the tables. You can enhance your tables by adding buttons, checkboxes, panels, and many other additional elements. You can also use an advanced data tables options like sort, search or pagination.
Importing the React Bootstrap 5 Table Component
To use the Contrast React Bootstrap 5 Table, you import CDBTable
into your project. We also need to import CDBTableHeader
for the first row, which usually indicates the items in the columns. We also need to import CDBTableBody
for the rest of the table.
import { CDBTable, CDBTableHeader, CDBTableBody, CDBContainer } from 'cdbreact';
Default Table
The dafult Table comes with all you will need in creating a table with the react bootstrap table component.
# | First | Last | Handle |
---|
1 | Mark | Otto | @mdo |
---|
2 | Jacob | Thornton | @fat |
---|
3 | Larry | the Bird | @twitter |
import React from 'react';
import { CDBTable, CDBTableHeader, CDBTableBody, CDBContainer } from 'cdbreact';
const Table = () => {
return (
<CDBContainer>
<CDBTable>
<CDBTableHeader>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</CDBTableHeader>
<CDBTableBody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</CDBTableBody>
</CDBTable>
</CDBContainer>
);
};
export default Table;
Table Head Options
This is react bootstrap table that has some options on the header of the table.
# | First | Last | Handle |
---|
1 | Mark | Otto | @mdo |
---|
2 | Jacob | Thornton | @fat |
---|
3 | Larry | the Bird | @twitter |
# | First | Last | Handle |
---|
1 | Mark | Otto | @mdo |
---|
2 | Jacob | Thornton | @fat |
---|
3 | Larry | the Bird | @twitter |
import React from 'react';
import { CDBTable, CDBTableHeader, CDBTableBody, CDBContainer } from 'cdbreact';
const Table = () => {
return (
<CDBContainer>
<CDBTable>
<CDBTableHeader color="dark">
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</CDBTableHeader>
<CDBTableBody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</CDBTableBody>
</CDBTable>
<CDBTable>
<CDBTableHeader color="light">
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</CDBTableHeader>
<CDBTableBody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</CDBTableBody>
</CDBTable>h
</CDBContainer>
);
};
export default Table;
Striped Table
Striped Table is one of the many designs you can use the react bootstrap table to achieve.
# | First | Last | Handle |
---|
1 | Mark | Otto | @mdo |
---|
2 | Jacob | Thornton | @fat |
---|
3 | Larry | the Bird | @twitter |
import React from 'react';
import { CDBTable, CDBTableHeader, CDBTableBody, CDBContainer } from 'cdbreact';
const Table = () => {
return (
<CDBContainer>
<CDBTable striped>
<CDBTableHeader>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</CDBTableHeader>
<CDBTableBody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</CDBTableBody>
</CDBTable>
</CDBContainer>
);
};
export default Table;
Bordered Table
The
# | First | Last | Handle |
---|
1 | Mark | Otto | @mdo |
---|
2 | Jacob | Thornton | @fat |
---|
3 | Larry | the Bird | @twitter |
import React from 'react';
import { CDBTable, CDBTableHeader, CDBTableBody, CDBContainer } from 'cdbreact';
const Table = () => {
return (
<CDBContainer>
<CDBTable bordered>
<CDBTableHeader>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</CDBTableHeader>
<CDBTableBody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</CDBTableBody>
</CDBTable>
</CDBContainer>
);
};
export default Table;
Borderless Table
# | First | Last | Handle |
---|
1 | Mark | Otto | @mdo |
---|
2 | Jacob | Thornton | @fat |
---|
3 | Larry | the Bird | @twitter |
import React from 'react';
import { CDBTable, CDBTableHeader, CDBTableBody, CDBContainer } from 'cdbreact';
const Table = () => {
return (
<CDBContainer>
<CDBTable borderless>
<CDBTableHeader>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</CDBTableHeader>
<CDBTableBody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</CDBTableBody>
</CDBTable>
</CDBContainer>
);
};
export default Table;
Hoverable Rows
# | First | Last | Handle |
---|
1 | Mark | Otto | @mdo |
---|
2 | Jacob | Thornton | @fat |
---|
3 | Larry | the Bird | @twitter |
import React from 'react';
import { CDBTable, CDBTableHeader, CDBTableBody, CDBContainer } from 'cdbreact';
const Table = () => {
return (
<CDBContainer>
<CDBTable hover>
<CDBTableHeader>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</CDBTableHeader>
<CDBTableBody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</CDBTableBody>
</CDBTable>
</CDBContainer>
);
};
export default Table;
Small Table
# | First | Last | Handle |
---|
1 | Mark | Otto | @mdo |
---|
2 | Jacob | Thornton | @fat |
---|
3 | Larry | the Bird | @twitter |
import React from 'react';
import { CDBTable, CDBTableHeader, CDBTableBody, CDBContainer } from 'cdbreact';
const Table = () => {
return (
<CDBContainer>
<CDBTable small>
<CDBTableHeader>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</CDBTableHeader>
<CDBTableBody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</CDBTableBody>
</CDBTable>
</CDBContainer>
);
};
export default Table;
Captions
List of users# | First | Last | Handle |
---|
1 | Mark | Otto | @mdo |
---|
2 | Jacob | Thornton | @fat |
---|
3 | Larry | the Bird | @twitter |
import React from 'react';
import { CDBTable, CDBTableHeader, CDBTableBody, CDBContainer } from 'cdbreact';
const Table = () => {
return (
<CDBContainer>
<CDBTable>
<caption>List of users</caption>
<CDBTableHeader>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</CDBTableHeader>
<CDBTableBody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</CDBTableBody>
</CDBTable>
</CDBContainer>
);
};
export default Table;
Responsive Tables
# | First | Second | Third | Fourth | Fifth | Sixth | Seventh | Last | Handle |
---|
1 | Name | Name | Name | Name | Name | Name | Name | Name | @email |
---|
2 | Name | Name | Name | Name | Name | Name | Name | Name | @email |
---|
3 | Name | Name | Name | Name | Name | Name | Name | Name | @email |
import React from 'react';
import { CDBTable, CDBTableHeader, CDBTableBody, CDBContainer } from 'cdbreact';
const Table = () => {
return (
<CDBContainer>
<CDBTable responsive>
<CDBTableHeader>
<tr>
<th>#</th>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
<th>Fifth</th>
<th>Sixth</th>
<th>Seventh</th>
<th>Last</th>
<th>Handle</th>
</tr>
</CDBTableHeader>
<CDBTableBody>
<tr>
<td>1</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>@email</td>
</tr>
<tr>
<td>2</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>@email</td>
</tr>
<tr>
<td>3</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>Name</td>
<td>@email</td>
</tr>
</CDBTableBody>
</CDBTable>
</CDBContainer>
);
};
export default Table;
API Reference: Contrast React Bootstrap 5 Table Props
This section will build on your information about the props you get to use with the Contrast React Bootstrap 5 Table component. You will find out what these props do, their default values, and how you would use them in your code.
The table below lists other prop options of the CDBTable
component.
Name | Type | Default | Description | Example |
---|
className | String | | Adds custom classes | <CDBTable className="myClass" ... /> |
wrapperClassName | String | | Adds custom wrapper class | <CDBTable wrapperClassName="myWrapperClass" ... /> |
tag | String | div | Changes default input tag | <CDBTable tag="input" ... /> |
autoWidth | Boolean | false | Automatically adjust columns width to the content. | <CDBTable autoWidth .../> |
bordered | Boolean | false | Adds border on all table's and cell's sides. | <CDBTable bordered .../> |
borderless | Boolean | false | Disables border on all table's and cell's sides. | <CDBTable borderless .../> |
btn | Boolean | false | Adds a button | <CDBTable btn .../> |
dark | Boolean | false | Enables the dark style | <CDBTable dark .../> |
fixed | Boolean | false | Sets fixed columns width. | <CDBTable fixed .../> |
hover | Boolean | false | Adds hover state on table rows (rows are marked on light-grey color). | <CDBTable hover .../> |
maxHeight | String | | Sets table's maxHeight. You can use px, vh or whatever fits to your needs. | <CDBTable maxHeight="200px" ... /> |
tHead | String | | Changes the color of the table head text | <CDBTable tHead="#000" ... /> |
responsive | Boolean | false | Makes table scrollable horizontally when screen width is smaller than table content (under 768px). It make use of overflow-y: hidden which clips off content that goes beyond the bottom or top edge of the table. | <CDBTable responsive .../> |
responsiveSm | Boolean | false | Makes table scrollable horizontally on under 576px wide screens. | <CDBTable responsiveSm .../> |
responsiveMd | Boolean | false | Makes table scrollable horizontally on under 768px wide screens. | <CDBTable responsiveMd .../> |
responsiveLg | Boolean | false | Makes table scrollable horizontally on under 992px wide screens. | <CDBTable responsiveLg .../> |
responsiveXl | Boolean | false | Makes table scrollable horizontally on under 1200px wide screens. | <CDBTable responsiveXl .../> |
scrollY | Boolean | false | Allows table to be scrolled vertically if it's content is higher than 200px. Combine it with maxHeight to manipulate table's height. | <CDBTable scrollY .../> |
small | Boolean | false | Cuts cell's padding by half. | <CDBTable small .../> |
striped | Boolean | false | Adds zebra-striping to any table row. | <CDBTable striped .../> |
The table below lists other prop options of the CDBTableHeader
component.
Name | Type | Default | Description | Example |
---|
className | String | | Adds custom classes | <CDBTableHeader className="myClass" ... /> |
color | String | | Changes TableHead background color. Use CDB color classes | <CDBTableHeader color="primary-color" ... /> |
textWhite | Boolean | false | Sets TableHead's font color to white. | <CDBTableHeader textWhite .../> |
columns | Array[Objects] | false | Binds your data into the component. | <CDBTableHeader columns={columns} .../> |
API Reference: Contrast React Bootstrap 5 Table Body Props
The table below lists other prop options of the CDBTableBody
component.
Name | Type | Default | Description | Example |
---|
className | String | | Adds custom classes | <CDBTableBody className="myClass" ... /> |
color | String | | Changes TableBody background color. Use CDB color classes | <CDBTableBody color="primary-color" ... /> |
textWhite | Boolean | false | Sets TableBody's font color to white. | <CDBTableBody textWhite .../> |
rows | Array[Objects] | false | Binds your data into the component. | <CDBTableBody rows={rows} .../> |
The table below lists other prop options of the CDBTableFooter
component.
Name | Type | Default | Description | Example |
---|
className | String | | Adds custom classes | <CDBTableFooter className="myClass" ... /> |
color | String | | Changes TableFooter background color. Use CDB color classes | <CDBTableFooter color="primary-color" ... /> |
textWhite | Boolean | false | Sets TableFooter's font color to white. | <CDBTableFooter textWhite .../> |
columns | Array[Objects] | false | Binds your data into the component. | <CDBTableFooter columns={columns} .../> |
Build modern projects using Bootstrap 5 and Contrast
Trying to create components and pages for a web app or website from
scratch while maintaining a modern User interface can be very tedious.
This is why we created Contrast, to help drastically reduce the amount of time we spend doing that.
so we can focus on building some other aspects of the project.
Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants.
Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for
building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.