Search...

Table

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.

js
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.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
js
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.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
js
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.

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
js
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

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
js
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

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
js
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

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
js
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

#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
js
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
#FirstLastHandle
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
js
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

#FirstSecondThirdFourthFifthSixthSeventhLastHandle
1NameNameNameNameNameNameNameName@email
2NameNameNameNameNameNameNameName@email
3NameNameNameNameNameNameNameName@email
js
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.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBTable className="myClass" ... />
wrapperClassNameStringAdds custom wrapper class<CDBTable wrapperClassName="myWrapperClass" ... />
tagStringdivChanges default input tag<CDBTable tag="input" ... />
autoWidthBooleanfalseAutomatically adjust columns width to the content.<CDBTable autoWidth .../>
borderedBooleanfalseAdds border on all table's and cell's sides.<CDBTable bordered .../>
borderlessBooleanfalseDisables border on all table's and cell's sides.<CDBTable borderless .../>
btnBooleanfalseAdds a button<CDBTable btn .../>
darkBooleanfalseEnables the dark style<CDBTable dark .../>
fixedBooleanfalseSets fixed columns width.<CDBTable fixed .../>
hoverBooleanfalseAdds hover state on table rows (rows are marked on light-grey color).<CDBTable hover .../>
maxHeightStringSets table's maxHeight. You can use px, vh or whatever fits to your needs.<CDBTable maxHeight="200px" ... />
tHeadStringChanges the color of the table head text<CDBTable tHead="#000" ... />
responsiveBooleanfalseMakes 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 .../>
responsiveSmBooleanfalseMakes table scrollable horizontally on under 576px wide screens.<CDBTable responsiveSm .../>
responsiveMdBooleanfalseMakes table scrollable horizontally on under 768px wide screens.<CDBTable responsiveMd .../>
responsiveLgBooleanfalseMakes table scrollable horizontally on under 992px wide screens.<CDBTable responsiveLg .../>
responsiveXlBooleanfalseMakes table scrollable horizontally on under 1200px wide screens.<CDBTable responsiveXl .../>
scrollYBooleanfalseAllows table to be scrolled vertically if it's content is higher than 200px. Combine it with maxHeight to manipulate table's height.<CDBTable scrollY .../>
smallBooleanfalseCuts cell's padding by half.<CDBTable small .../>
stripedBooleanfalseAdds zebra-striping to any table row.<CDBTable striped .../>

API Reference: Contrast React Bootstrap 5 Table Header Props

The table below lists other prop options of the CDBTableHeader component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBTableHeader className="myClass" ... />
colorStringChanges TableHead background color. Use CDB color classes<CDBTableHeader color="primary-color" ... />
textWhiteBooleanfalseSets TableHead's font color to white.<CDBTableHeader textWhite .../>
columnsArray[Objects]falseBinds 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.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBTableBody className="myClass" ... />
colorStringChanges TableBody background color. Use CDB color classes<CDBTableBody color="primary-color" ... />
textWhiteBooleanfalseSets TableBody's font color to white.<CDBTableBody textWhite .../>
rowsArray[Objects]falseBinds your data into the component.<CDBTableBody rows={rows} .../>

API Reference: Contrast React Bootstrap 5 Table Footer Props

The table below lists other prop options of the CDBTableFooter component.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBTableFooter className="myClass" ... />
colorStringChanges TableFooter background color. Use CDB color classes<CDBTableFooter color="primary-color" ... />
textWhiteBooleanfalseSets TableFooter's font color to white.<CDBTableFooter textWhite .../>
columnsArray[Objects]falseBinds 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.

ad-banner