Categories
Reactstrap

Reactstrap — Tables

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *