React で並べ替え可能なテーブルを作成する

表を作成することは、Web サイトに大量の情報を表示するための最良の方法の 1つです。 最新の Web アプリケーションは通常、画面に表示する必要のある大量のデータを保存します。

ユーザーは、探しているものを見つけるために、何らかの方法でテーブルを並べ替えたりフィルターをかけたりすることを期待しています。 何千もの行を調べるように強制することは、UX の悪い習慣です。

最も簡単な解決策は、列をアルファベット順にソートできるテーブルを作成して、ユーザーが必要な情報を見つけられるようにすることです。

この記事では、React で並べ替え可能なテーブルを作成する方法について説明します。

React で並べ替え可能なテーブルを作成する

最初に、Web アプリケーションでテーブルを作成する方法について説明し、次にそれをソート可能にする方法を示します。

幸いなことに、HTML には非常に基本的な表を作成するための要素が組み込まれています。 これらの要素は、<table>、<thead>、<tr>、<th>、<tbody> などです。 HTML での表の作成について詳しく知りたい場合は、このガイド を参照してください。

この場合、すでに単純なテーブルを作成しています。 以下のコードを見てみましょう。

<table className="m-table">
        <thead>
          <tr>
            <th onClick={(e) => onSort(e, "firstName")}>First Name</th>
            <th onClick={(e) => onSort(e, "lastName")}>Salary</th>
          </tr>
        </thead>
        <tbody>
          {data.map(function (person, index) {
            return (
              <tr key={index} data-item={person}>
                <td data-title="firstName">{person.firstName}</td>
                <td data-title="lastName">{person.lastName}</td>
              </tr>
            );
          })}
        </tbody>
  </table>

簡単にするために、コンポーネント (および Web アプリケーション) をこの 1つのテーブルにします。

ご覧のとおり、テーブル ヘッダーを表す 2つの <th> 要素があります。 つまり、テーブルには 2つの列ラベルがあります。1つ目は First Name で、もう 1つ目は Salary です。

これらの各要素には、onClick ハンドラーがあり、event オブジェクトと、各列の値に関連付けられたプロパティ名の 2つの引数を使用して onSort() イベント ハンドラーを呼び出します。

<thead> 要素は以上です。

テーブル本体に移ると、map() メソッドを使用して data 配列のすべてのレコードを調べ、テーブル データ要素 (<td>) を持つテーブル行要素 (<tr>) を作成しました。 その key 属性を index に設定します。これは、React でエラーを回避するための標準的な方法です。

map() メソッドは、配列内のすべての項目を取得し、そのプロパティ firstName と lastName を読み取り、テーブルの行にこの情報を入力します。 これらのプロパティ名は、ヘッダーをクリックすると onSort() メソッドにも渡されることに注意してください。

React でテーブルの行を並べ替える

次に、テーブルのレコードを並べ替えることができるコンポーネントのビジネス ロジックを見てみましょう。 onSort() 関数は、テーブル内の値の並べ替えを処理します。

関数と data 状態変数に保存されているサンプル データを見てみましょう。

  const [data, updateData] = useState([
    { firstName: "Irakli", lastName: "Tcigladze" },
    { firstName: "George", lastName: "Smith" },
    { firstName: "Mark", lastName: "Wayans" },
    { firstName: "Michael", lastName: "Simmons" },
    { firstName: "Dirk", lastName: "Johnson" },
    { firstName: "Casey", lastName: "Dawson" }
  ]);
  const onSort = (event, sortKey) => {
    const tempData = [...data];
    updateData(tempData.sort((a, b) => a[sortKey].localeCompare(b[sortKey])));
  };

利用可能なデータは比較的標準的です。 人物を表すオブジェクトの配列があります。

onSort() 関数は 2つの引数を取ります。 これらは合成 event オブジェクトであり、これらの値をソートするためのキーです。

つまり、特定の値が格納されるオブジェクトのプロパティです。 テーブルの名前の値の場合、キーは firstName です。これは、名前を保持するオブジェクト プロパティであるためです。また、姓の場合は lastName です。

React では、状態データを直接変更してはならないため、アイテムを data 配列にコピーして tempData 変数に格納します。

次に、データ内の値を比較する方法を記述するコールバック関数の引数を受け入れる sort() 関数を使用します。 この場合、キー引数 (つまり、プロパティの名前) を使用して、各オブジェクトの firstName または lastName 値にアクセスします。

次に、localeCompare() メソッドを使用して、最初に来る値を決定します。 次に、それに応じてデータを配置します。

CodeSandbox で React のソート可能なテーブルを確認できます。 ヘッダー (列ラベル) の 1つをクリックしてみてください。データがアルファベット順に並べ替えられていることがわかります。