ReactとMaterial-UIを使用してテーブルのカラムをソートする方法

2023年9月18日

URLをコピーしました！

テーブル内のデータを簡単にソートする機能は、ユーザーエクスペリエンスの向上に大きく貢献します。
この記事では、ReactとMaterial-UIを使用して、テーブル内の任意のカラムをクリックして昇順・降順でソートする方法を紹介します。

必要なもの

Node.jsとnpmのインストール済み環境
基本的なReactの知識
Material-UIのインストール済み

ソートできるテーブルを作成する

ReactとMaterial-UI（MUI）を使用している場合、テーブルのカラムを昇順または降順でソートするためには、いくつかの手順を実行する必要があります。
以下に基本的な手順をご紹介します。

状態変数の定義

ソートに必要なデータを含むテーブルを作成します。
データは通常、配列やオブジェクトの形式で提供されます。
ソート状態を管理するための状態変数を定義します。
たとえば、sortByという状態変数を使用して、現在のソート対象のカラムを追跡します。

1	const [sortBy, setSortBy] = useState(null);

イベントハンドラを作成

テーブルのヘッダーをクリックしたときに、ソートをトリガーするイベントハンドラを作成します。
このイベントハンドラは、setSortByを使用してsortByの値を更新します。

const handleSort = (column) => {

if (sortBy === column) {

setSortBy(null); // 同じカラムをクリックした場合はソートを解除する

} else {

setSortBy(column);

}

};

ソート関数を作成

データをソートするための関数を作成します。
配列のsortメソッドを使用することで、昇順または降順のソートを行います。
sortByの値に応じてソートするカラムを決定します。

const sortedData = [...data].sort((a, b) => {

if (sortBy) {

// sortByの値に基づいてソートするロジックを実装する

// aとbは比較する各行のデータです

// 例えば、a[sortBy]とb[sortBy]を比較することで、指定したカラムの値でソートできます

return a[sortBy] - b[sortBy];

} else {

return 0;

}

});

MUIでテーブルを表示

ソートされたデータを使用してテーブルをレンダリングします。
Material-UIのTableとTableCellを使用する場合、以下のようにマップ関数を使用してテーブルの各行をレンダリングできます。

<Table>

{columns.map((column) => (

<TableCell key={column} onClick={() => handleSort(column)}>

{column}

</TableCell>

))}

</TableRow>

</TableHead>

{sortedData.map((row, index) => (

{columns.map((column) => (

<TableCell key={column}>{row[column]}</TableCell>

))}

</TableRow>

))}

</TableBody>

</Table>

まとめ

ReactとMaterial-UIを使用して、テーブル内のカラムをソートする方法を学びました。
ユーザーフレンドリーなテーブルの実装は、データを探索しやすくし、ユーザーエクスペリエンスを向上させる上で非常に重要です。
このソート機能を組み込んだテーブルは、データの可視性とアクセシビリティを向上させます。