この記事の対象読者

管理画面の一覧テーブルを作る人
列が増えすぎて画面が見づらくなってきた人
どの情報を一覧に出すべきか迷っている人

本題に入る前に

業務画面の一覧は、最初はシンプルです。

名前、ステータス、作成日くらいで始まります。でも運用が進むと、「この項目も見たい」「問い合わせ時にこの情報が必要」「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
- 連携履歴
- 変更履歴

一覧は「探す場所」、詳細は「確認する場所」と考えると、列を削りやすくなります。

まとめ

業務画面のテーブルは、便利にしようとするほど列が増えがちです。

一覧には、識別する情報と判断する情報を優先して出す。詳細確認用の情報は詳細画面へ逃がす。列定義をまとめておく。これだけでも、テーブルはかなり保守しやすくなります。

参考