react bootstrap 5 table example

react bootstrap 5 table example

updated 11/03/23 By frontendshape

In this tutorial, we will see table in react with bootstrap 5. We will see striped table component, bordered table, hover and dark table using react bootstrap 5.

Install & Setup Vite + React + Typescript + Bootstrap 5


React Bootstrap 5 Table Example

1. Create simple react bootstrap table using react-bootstrap Table component.

import { Container } from "react-bootstrap";
import Table from "react-bootstrap/Table";

function BasicExample() {
  return (
    <Container>
      <Table>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <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 colSpan={2}>Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </Table>
    </Container>
  );
}

export default BasicExample;
react bootstrap 5 simple table

react bootstrap 5 simple table


2. react bootstrap 5 border table.

 { Container } from "react-bootstrap";
import Table from "react-bootstrap/Table";

function BasicExample() {
  return (
    <Container>
      <Table bordered>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <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 colSpan={2}>Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </Table>
    </Container>
  );
}

export default BasicExample;
react bootstrap 5 border table

react bootstrap 5 border table

3. react bootstrap 5 bordered, striped and hover effect table. also you can use size props to adjust table size. size="lg", size="sm"

import { Container } from "react-bootstrap";
import Table from "react-bootstrap/Table";

function BasicExample() {
  return (
    <Container>
      <Table bordered striped hover>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <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 colSpan={2}>Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </Table>
    </Container>
  );
}

export default BasicExample;
react bootstrap 5 bordered, striped and hover effect table

react bootstrap 5 bordered, striped and hover effect table

4. react bootstrap 5 dark variant table.

import { Container } from "react-bootstrap";
import Table from "react-bootstrap/Table";

function BasicExample() {
  return (
    <Container>
      <Table bordered striped hover variant="dark">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <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 colSpan={2}>Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </Table>
    </Container>
  );
}

export default BasicExample;
react bootstrap 5 dark table

react bootstrap 5 dark table