Reactstrap — Tables

Photo by Abel Y Costa on Unsplash

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