Reactstrap is a version Bootstrap made for React.
It’s a set of React components that have Boostrap styles.
In this article, we’ll look at how to add tables with Reactstrap.
Tables
Reactstrap comes with its own table component.
For instance, we can use it by writing:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";
export default function App() {
return (
<div>
<Table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>wong</td>
</tr>
<tr>
<th scope="row">3</th>
<td>larry</td>
<td>jones</td>
</tr>
</tbody>
</Table>
</div>
);
}
We just add the Table component and use the usual table elements inside it to create our table.
By default, it’ll have a bottom border.
Dark Table
We can make the background dark with the dark prop.
For instance, we can write:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";
export default function App() {
return (
<div>
<Table dark>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>wong</td>
</tr>
<tr>
<th scope="row">3</th>
<td>larry</td>
<td>jones</td>
</tr>
</tbody>
</Table>
</div>
);
}
Striped Rows
We can make the rows striped with the striped prop:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";
export default function App() {
return (
<div>
<Table striped>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>wong</td>
</tr>
<tr>
<th scope="row">3</th>
<td>larry</td>
<td>jones</td>
</tr>
</tbody>
</Table>
</div>
);
}
Bordered Table
We can add borders to the cells with the bordered prop:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";
export default function App() {
return (
<div>
<Table bordered>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>wong</td>
</tr>
<tr>
<th scope="row">3</th>
<td>larry</td>
<td>jones</td>
</tr>
</tbody>
</Table>
</div>
);
}
Borderless Table
We can make the cells borderless with the borderless prop:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";
export default function App() {
return (
<div>
<Table borderless>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>wong</td>
</tr>
<tr>
<th scope="row">3</th>
<td>larry</td>
<td>jones</td>
</tr>
</tbody>
</Table>
</div>
);
}
Hoverable Rows
The rows can be made hoverable with the hover prop:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";
export default function App() {
return (
<div>
<Table hover>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>wong</td>
</tr>
<tr>
<th scope="row">3</th>
<td>larry</td>
<td>jones</td>
</tr>
</tbody>
</Table>
</div>
);
}
Small Table
To make the rows smaller, we can set the size prop to sm :
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";
export default function App() {
return (
<div>
<Table size="sm">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>wong</td>
</tr>
<tr>
<th scope="row">3</th>
<td>larry</td>
<td>jones</td>
</tr>
</tbody>
</Table>
</div>
);
}
Responsive Table
We can make a table responsive with the responsive prop:
import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Table } from "reactstrap";
export default function App() {
return (
<div>
<Table responsive>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>wong</td>
</tr>
<tr>
<th scope="row">3</th>
<td>larry</td>
<td>jones</td>
</tr>
</tbody>
</Table>
</div>
);
}
Now it’ll display properly on any screen.
Conclusion
Reactstrap provides us with a simple Table component to display tables.
