この記事の対象読者
- 管理画面の一覧テーブルを作る人
- 列が増えすぎて画面が見づらくなってきた人
- どの情報を一覧に出すべきか迷っている人
本題に入る前に
業務画面の一覧は、最初はシンプルです。
名前、ステータス、作成日くらいで始まります。でも運用が進むと、「この項目も見たい」「問い合わせ時にこの情報が必要」「CSが確認しやすいように追加したい」と列が増えていきます。
気づくと横スクロールが長くなり、1行に情報が詰まり、どこを見ればよいか分からない一覧になります。ありますよね。。便利にしたはずなのに、逆に探しにくくなるやつです。
この記事では、Reactでテーブルを作る前に、一覧に出す情報をどう整理するかを考えます。
一覧は全部を見せる場所ではない
一覧画面の役割は、すべての情報を見せることではありません。
多くの場合、一覧は次のためにあります。
| 目的 | 例 |
|---|---|
| 探す | 対象の予約やユーザーを見つける |
| 比較する | ステータスや日時を比べる |
| 判断する | 対応が必要か見る |
| 詳細へ進む | 対象の詳細画面を開く |
詳細情報は詳細画面に置く。一覧では判断に必要な情報に絞る。この分担が大事です。
列を3種類に分ける
列を増やす前に、情報を3種類に分けます。
| 種類 | 例 | 一覧に出すか |
|---|---|---|
| 識別する情報 | 名前、ID、タイトル | 出すことが多い |
| 判断する情報 | ステータス、最終更新日 | 出すことが多い |
| 詳細確認用の情報 | 長いメモ、内部設定 | 詳細画面でよい |
「問い合わせでたまに使う」だけなら、一覧に常時出さず、詳細画面やコピー用メニューに逃がす選択もあります。
Reactでは列定義をまとめる
列をコンポーネント内に散らすと、増えたときに見通しが悪くなります。
小さく列定義を作るだけでも整理しやすいです。
type Reservation = {
id: string;
title: string;
status: "pending" | "confirmed" | "canceled";
updatedAt: string;
};
type Column<T> = {
key: string;
header: string;
render: (row: T) => React.ReactNode;
};
const columns: Column<Reservation>[] = [
{
key: "title",
header: "予約名",
render: (row) => row.title,
},
{
key: "status",
header: "状態",
render: (row) => row.status,
},
{
key: "updatedAt",
header: "更新日時",
render: (row) => row.updatedAt,
},
];
表示側は列定義に沿って描画します。
function ReservationTable({ rows }: { rows: Reservation[] }) {
return (
<table>
<thead>
<tr>
{columns.map((column) => (
<th key={column.key}>{column.header}</th>
))}
</tr>
</thead>
<tbody>
{rows.map((row) => (
<tr key={row.id}>
{columns.map((column) => (
<td key={column.key}>{column.render(row)}</td>
))}
</tr>
))}
</tbody>
</table>
);
}
行の中で全部説明しようとしない
一覧の1行に、長い説明文や複数の補足を詰め込むと読みづらくなります。
よく見る情報は列に出し、たまに見る情報は詳細へ逃がします。
一覧:
- 予約名
- 状態
- 更新日時
- 担当者
詳細:
- 長いメモ
- 内部ID
- 連携履歴
- 変更履歴
一覧は「探す場所」、詳細は「確認する場所」と考えると、列を削りやすくなります。
まとめ
業務画面のテーブルは、便利にしようとするほど列が増えがちです。
一覧には、識別する情報と判断する情報を優先して出す。詳細確認用の情報は詳細画面へ逃がす。列定義をまとめておく。これだけでも、テーブルはかなり保守しやすくなります。