RalaCode

44件の記事があります

Reactの機能で簡単にテーブル(表組み)を作る方法【react-table使います】

Reactの機能で簡単にテーブル(表組み)を作る方法【react-table使います】
サムライエンジニアプラス

HTMLでテーブル(表組み)を作る時って記述が多くなって結構面倒じゃないですか?
Reactなら簡単にテーブルを作ることができます。
さらに、後からテーブルの内容を変更するのも簡単になります。

具体的には「react-table」というプラグインを使います。

この記事では、「react-table」のインストール方法と使い方を解説します。
最後には、「並べ替え機能」の実装方法も解説します。

また、この記事はReact使用経験者向けの内容となっておりますのでご了承ください。

react-tableをインストールする

まずはreact-tableをインストールします。
ターミナルでプロジェクトディレクトリに移動し、以下のコマンドを入力して実行してください。

$ npm install react-table

もしくは

$ yarn add react-table

これで、react-tableがインストールされます。
package.jsonにreact-tableが追加されているかどうか確認してください。

テーブルを作る

example table

今回は上の画像のようなテーブルをreact-tableを使って作ります。
手順は以下です。

  • テーブルデータに関するコンポーネントを作る

  • フロントにテーブルを表示する

テーブルデータに関するコンポーネントを作る

まず何をするかというと、テーブルに記述する内容に関するコンポーネントを作ります。
ここでは、例として「果物の名前と値段と在庫」をテーブルにしてみたいと思います。

では「tableData.jsx」というコンポーネントを作って、以下のように記述してください。

{/* tableData.jsx */}

export const columns = [
  { Header: "商品", accessor: "product" },
  { Header: "値段", accessor: "price" },
  { Header: "在庫", accessor: "stock" }
];

export const data = [
  {
    product: "りんご",
    price: "120円",
    stock: "130"
  },
  {
    product: "バナナ",
    price: "100円",
    stock: "200"
  },
  {
    product: "メロン",
    price: "3400円",
    stock: "2"
  }
];

「columns」という名前で定義した配列の中には「Header」というものがあります。
Headerはテーブルヘッダーで表示される文字列です。

accessor」はHeaderそれぞれに対する記号のようなものです。

上のコードで言うと、「商品、値段、在庫」というHeaderに対して「product、price、stock」という記号が割り振られています。

「data」という名前で定義した配列の中で、accessorそれぞれについて内容を当てはめています。

フロントにテーブルを表示する

では、実際にフロントにテーブルを表示していきます。
通常のReact環境であれば「App.js」でフロント表示していると思うので、その前提でいきます。

App.jsに以下のように記述してください。

{/* App.js */}

import React from "react";
import { useTable } from "react-table";
import { columns, data } from "./tableData";
import "./styles.css";

export default function App() {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>
                              {column.render("Header")}
                            </th>
            ))}
          </tr>
        ))}
      </thead>

      <tbody {...getTableBodyProps()}>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => {
                return (
                  <td {...cell.getCellProps()}>
                                     {cell.render("Cell")}
                  </td>;
                )
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

コードの冒頭部分では、先ほどコンポーネントとして作った「tabaleData.jsx」からcolumns、dataをimportしています。

そして、「useTable」というフックを使っています。

あくまで参考程度ですが、僕は「styles.css」を以下のように設定しました。

body {
  background-color: #ddd;
  padding: 20px 40px;
  margin: 0;
}

table {
  width: 100%;
  border-spacing: 0;
  table-layout: fixed;
  border-left: solid 1px #444;
  border-right: solid 1px #444;
}

thead {
  text-align: left;
}

th,td {
  border-bottom: solid 1px #444;
  padding: 5px 0;
  line-height: 1.5;
}

th {
  border-top: solid 1px #444;
}

th span {
  margin-left: 10px;
}

cssはお好みに合わせて設定してください。

並べ替え機能を実装する

これで、簡単にテーブルを作ることができました。
ただ、テーブルを作るだけならHTMLとCSSで地道に作ることもできます。

そこで、react-tableならではの機能を実装してみたいと思います。
ここでは「並べ替え機能」と実装していきます。
ソート機能」とかも呼ばれたりするかもしれません。

App.jsの中で、以下のように記述を追加してください。

{/* App.js */}

import React from "react";
{/* ↓「useSortBy」を追加 */}
import { useSortBy, useTable } from "./tableData";
......

export default function App() {
  const {
    ......
  } = useTable(
    {
      columns,
      data
    },
    {/* ↓これを追加 */}
    useSortBy
  );

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (

              {/* 「column.getSortByToggleProps()」を追加↓ */}
              <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                              {column.render("Header")}
                              {/* ↓「<span>〜</span>」を追加 */}
               <span>
                 {column.isSorted ?
                   (column.isSortedDesc ? "🔽" : "🔼") : ""
                 }
               </span>
                            </th>

            ))}
          </tr>
        ))}
      </thead>

      <tbody {...getTableBodyProps()}>
        ... 略 ...
      </tbody>
    </table>
  );
}

これで、並べ替え機能が実装されます。

sorted table

上の画像のように、テーブルのヘッダー部分をクリックすると、その列の順番が変わります。

例えば「在庫」を1回クリックすると、在庫数が少ない順に並びが変わります。
もう一度「在庫」をクリックすると、在庫数が多い順に並び変わります。
3回目クリックすると、在庫数はもとの順番に戻り、ヘッダーの矢印も消えます。

値段」をクリックしても、同じように順番が変わります。

「商品」をクリックしても、一応順番は変わりますが、並びの規則性はありません
列の内容が英単語であれば、頭文字がアルファベット順(abc順)に並び替わります。

今回の例では、「商品」の列の内容は日本語のため、並び替えはデタラメです。
まぁこれは仕方ないかと...。

まとめ

今回の記事をまとめます。
以下の内容で、Reactを使ってテーブルを簡単に作る方法を解説しました。

  • プラグイン「react-table」をインストールする

  • テーブルデータに関するコンポーネントを作る

  • フロントにテーブルを表示する

  • 並べ替え機能を実装する

ちなみにですが、僕はGatsbyJSでWebサイトをよく作ります。
GatsbyJSでも「react-table」は問題なく使うことができました。

参考にしていただけると嬉しいです。
記事は以上です。

GatsbyJSの開発環境を構築する手順
GatsbyJSの開発環境を構築する手順
記事を読む
Gatsby CloudとGitHubを連携させてGatsbyサイトを公開する
Gatsby CloudとGitHubを連携させてGatsbyサイトを公開する
記事を読む
【ほぼゼロから】WordPressとGatsbyJSでサイトを作る手順を解説
【ほぼゼロから】WordPressとGatsbyJSでサイトを作る手順を解説
記事を読む

あなたにおすすめ

サムライエンジニアプラス

この記事を共有

以下のボタンを押すとSNSが開きます

関連記事

Gatsby CloudとGitHubを連携させてGatsbyサイトを公開する

Gatsby CloudとGitHubを連携させてGatsbyサイトを公開する

【ほぼゼロから】WordPressとGatsbyJSでサイトを作る手順を解説

【ほぼゼロから】WordPressとGatsbyJSでサイトを作る手順を解説

【React】useStateで配列を更新して表示する方法を解説

【React】useStateで配列を更新して表示する方法を解説

【React】onClickでclassNameをつけたり外したりする方法

【React】onClickでclassNameをつけたり外したりする方法

GatsbyJSの開発環境を構築する手順

GatsbyJSの開発環境を構築する手順

GatsbyJSでYarnを使う場合に必要な設定を解説

GatsbyJSでYarnを使う場合に必要な設定を解説

RalaCodeTwitter
© 2022 RalaCode | Privacy Policy