【React入門】React Tableで表組みをかんたんに実装する方法

本記事ではReact Tableを使用した表の実装方法を解説します。React Tableを使用することで簡単に表が実装でき、後から内容を変更しやすくなります。以下の内容を解説するので、React学習中の方は参考にしてください！

React Tableの基本的な使い方
React Tableのソート機能の実装
React Table以外のTableを実装できるライブラリ

ReactのUIコンポーネントMaterial-UIの機能を一挙ご紹介します！

React Table とは？

React TableとはReactのUIライブラリのひとつで、Tableコンポーネントを提供するものです。

単純な表を作成するだけでなく、データのソート機能を持つテーブルを簡単に実装することができます。

React Tableの使い方

React Table を使用するためには、アプリケーションを開発しているプロジェクトのディレクトリにReact Table をインストールする必要があります。

その後、表に記載する内容を持ったコンポーネントを作成し、コンポーネントのテーブルデータを持った表をフロントに表示させるという手順で任意の表を扱うことができます。

Redact Tableのインストール

それでは、React Tableをインストールします。

まずはコマンドプロンプトなどのターミナルソフトを起動して、Reactのプロジェクトディレクトリに移動します。

ここでは、環境はWindows10、プロジェクトディレクトリはD:\React\sampleとします。

コマンドプロンプトを立ち上げた時点ではCドライブがカレントディレクトリになっている場合が多いので、「D:」を打ち込んでドライブを切り替えます。

そして、Reactのsampleプロジェクトのディレクトリにcdコマンドを使用して移動します。

次に、実際にReact Tableをインストールするコマンドを実行します。

当サイトをご利用の方はnpmコマンドをインストールしていると思いますので、「npm install react-table」と入力してEnterキーで実行するとインストールが開始されるので、終わるまで待ちます。

インストールされているか確かめます。VS Codeを使用して、プロジェクトディレクトリを開きます。

次にプロジェクトディレクトリの直下にあるpackage.jsonファイルを開きます。

package.jsonファイルの内容を確認して、「dependencies」の中にreact-tableが表示されていればインストール成功となります。

今回の場合、React Tableの7.7.0バージョンがインストールされました。

テーブルの作成

それでは、実際にテーブルのデータを作成し、表をフロントに表示させてみましょう。今回はスタイルなしで次の表を作成します。

コンポーネントの作成

テーブルに表示したいデータのコンポーネントを作成します。

VS Codeなどを利用して、sampleプロジェクトの中にあるsrcディレクトリに新規ファイルを作成します。

今回はコンポーネントとなるファイルの名前を「data.jsx」とします。

data.jsxに対して、次のようにソースを書き込みます。

ここでcolumnは表のヘッダー部分を定義しています。

「Header」はヘッダーのラベル名を表し、「accessor」はラベルと実際のデータを紐づける名前となります。

dataに関しては表の中に表すデータを定義しています。

テーブルデータの表示

それでは、実際にテーブルのデータを表示させる処理を追加します。

プロジェクトディレクトリの直下にApp.jsがあるので、そちらにソースを追加する形となります。

1行目と2行目のimportを記載してください。

3行目はスタイルを設定する際に使用してください。

App関数を上のように書き直します。

<Table columns={column} data={data} />

この部分が、Tableという関数を呼び出し、columnsにはcolumnを、dataにはdataを割り当てることを示します。

columnとdataはimportでコンポーネントから呼び出した値が入っており、それぞれcolumnsとdataに渡している形となります。

次に、Table関数を作成します。

全体像は上のようになります。

function Table({ columns, data }) {

関数の定義です。columnsとdataを受け取ります。

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data,
  })

useTableというreact-tableのフックを使います。この部分では受け取ったデータをテーブルの描画に必要な情報として扱えるようにしています。

    <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>

こちらの部分ではテーブルデータが受け渡されています。

ソート機能の実装

先ほど作成した表にソート機能を追加します。

import { useTable } from "react-table";

↓

import { useTable, useSortBy } from "react-table";

importの部分でソート機能をインポートします。ソースは上の部分を変更して、useSortByを追加します。

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({
    columns,
    data,
  })

↓

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable(
    {
      columns,
      data,
    },
    useSortBy
  )

useTableのフックの部分でソート機能を追加します。

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

↓

    <thead>
      {headerGroups.map(headerGroup => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map(column => (
            <th {...column.getHeaderProps(column.getSortByToggleProps())}>
              {column.render("Header")}
              <span>
                {column.isSorted ? (column.isSortedDesc ? " 🔽" : " 🔼" ) : ''}
              </span>
            </th>
          ))}
        </tr>
      ))}
    </thead>

テーブルヘッダーのラベルに昇順・降順を示す記号を追加します。<span>～</span>が追加個所となります。

以上のソースを追加することにより、ブラウザで表示されているテーブルヘッダーのラベルがクリックできるようになります。

試しに、「数学」の文字列をクリックしてみましょう。

数学の点数が昇順になることが確認できます。

Tableを作成できるその他のライブラリ

React Table以外にも表を作成することができるライブラリがあります。

mui-datatables

mui-dadtatablesもReactにおける表のライブラリです。こちらもシンプルな表以外にさまざまな機能を持ったテーブルを作成することができます。

Grid.js

Grid.jsはReactだけでなくAngularやVueでも使用できるライブラリとなります。検索機能やローディングの表示にも対応しています。

まとめ

データを分かりやすくまとめるためには、表を使うことが多いと思います。

そのために、データを読み出し、どの部分に表示させるのかを考えることがポイントとなります。また、React Tableに拘らず、自分が使いやすいライブラリを見つけることも大切です。

最後までお読みくださり、ありがとうございました。