React Bootstrap Table Example

We can create tables with React Bootstrap easily.

First, we install React Bootstrap by running:

npm install react-bootstrap bootstrap

Then we can use the built-in Table component as follows:

import React from "react";
import { Table } from "react-bootstrap";
import 'bootstrap/dist/css/bootstrap.min.css';

export default function App() {
  return (
    <div className="App">
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>james</td>
            <td>smith</td>
          </tr>
          <tr>
            <td>2</td>
            <td>jacob</td>
            <td>jones</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">larry</td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

striped bordered hover means that we have a striped table with borders on each cell.

We also need the Bootstrap CSS to style the components.

We can also add variant="dark" as a prop of Table to turn on dark mode.

Also, we can add the responsive prop to Table to make it responsive.

We can make a table easily with React Bootstrap.