Reactstrap — Таблицы

Reactstrap — это версия Bootstrap, созданная для React.

Это набор компонентов React со стилями Boostrap.

В этой статье мы рассмотрим, как добавлять таблицы с помощью Reactstrap.

Столы

Reactstrap поставляется со своим собственным табличным компонентом.

Например, мы можем использовать его, написав:

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>
  );
}

Мы просто добавляем компонент Table и используем внутри него обычные табличные элементы для создания нашей таблицы.

По умолчанию у него будет нижняя граница.

Темный стол

Мы можем сделать фон темным с помощью реквизита dark.

Например, мы можем написать:

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:

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:

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:

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 ряды

Строки можно сделать наводимыми с помощью реквизита hover:

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>
  );
}

Маленький стол

Чтобы сделать строки меньше, мы можем установить свойство size на 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:

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>
  );
}

Теперь он будет корректно отображаться на любом экране.

Вывод

Reactstrap предоставляет нам простой компонент Table для отображения таблиц.