React Ant DesignのTableコンポーネントの使い方まとめてみた

はじめに

Ant DesignのTableコンポーネントを使えば、データの表示や管理が簡単にできます。今回は、todoリストのデータを表示するTableコンポーネントの基本的な使い方を紹介します。

ゴール

添付しているテーブルはよくあるものだと思います。実際にコードもと合わせて見ていきましょう。

最終的なコードも記載しておきます

"use client";
import moment from "moment";
import { Table, TableProps, GetProp, TablePaginationConfig } from "antd";

const data = [
  {
    id: 1,
    title: "todo1",
    description: "todo内容",
    is_completed: true,
    limite_date: "2024-05-01",
    category: { id: 1, name: "家事" },
  },
  {
    id: 2,
    title: "todo2",
    description: "todo2内容",
    is_completed: false,
    limite_date: "2024-04-25",
    category: { id: 1, name: "買い物" },
  },
  {
    id: 3,
    title: "todo3",
    description: "todo3内容",
    is_completed: true,
    limite_date: "2024-05-04",
    category: { id: 1, name: "家事" },
  },
];

const columns = [
  { title: "タスク名", dataIndex: "title", key: "title" },
  { title: "タスク詳細", dataIndex: "description", key: "description" },
  {
    title: "カテゴリ名",
    dataIndex: ["category", "name"],
    key: "name",
    filters: [
      {
        text: "家事",
        value: "家事",
      },
      {
        text: "買い物",
        value: "買い物",
      },
    ],
    onFilter: (value, record) =>
      record.category.name.indexOf(value as string) === 0,
  },
  {
    title: "完了",
    dataIndex: "is_completed",
    key: "is_completed",
    render: (_, record) => {
      return <>{record.is_completed == true ? "完了" : "未完了"}</>;
    },
    sorter: (a: any, b: any) => a.is_completed - b.is_completed,
  },
  {
    title: "期限日",
    dataIndex: "limite_date",
    key: "limite_date",
    sorter: (a: any, b: any) => moment(a.limite_date) - moment(b.limite_date),
  },
];

interface TableParams {
  pagination?: TablePaginationConfig;
  sortField?: string;
  sortOrder?: string;
  filters?: Parameters<GetProp<TableProps, "onChange">>[1];
}

const AntdDesignTable = () => {
  return <Table dataSource={data} columns={columns} />;
};

export default AntdDesignTable;

データについて

まず、表示するデータについて説明します。以下のように、todoリストのデータが配列に格納されています。各todoにはタイトル、詳細、完了状態、期限日、カテゴリーが含まれています。

const data = [
  {
    id: 1,
    title: "todo1",
    description: "todo内容",
    is_completed: true,
    limite_date: "2024-05-01",
    category: { id: 1, name: "家事" },
  },
  {
    id: 2,
    title: "todo2",
    description: "todo2内容",
    is_completed: false,
    limite_date: "2024-04-25",
    category: { id: 1, name: "買い物" },
  },
  {
    id: 3,
    title: "todo3",
    description: "todo3内容",
    is_completed: true,
    limite_date: "2024-05-04",
    category: { id: 1, name: "家事" },
  },
];

基本的な表示方法

Tableコンポーネントを使ってこのデータを表示します。dataSourceプロパティに表示したいデータを渡し、columnsプロパティに各列の設定を行います。各列は、dataIndexでデータのキーを指定し、keyプロパティで一意のキーを設定します。

カテゴリーに関しては、少し注意が必要でネスト構造になっているので配列形式で書いてあげる必要があります。

const columns = [
  { title: "タスク名", dataIndex: "title", key: "title" },
  { title: "タスク詳細", dataIndex: "description", key: "description" },
  {
    title: "カテゴリ名",
    dataIndex: ["category", "name"],
    key: "name",
    filters: [
      { text: "家事", value: "家事" },
      { text: "買い物", value: "買い物" },
    ],
    onFilter: (value, record) => record.category.name.indexOf(value) === 0,
  },
  {
    title: "完了",
    dataIndex: "is_completed",
    key: "is_completed",
    render: (_, record) => (record.is_completed ? "完了" : "未完了"),
    sorter: (a, b) => a.is_completed - b.is_completed,
  },
  {
    title: "期限日",
    dataIndex: "limite_date",
    key: "limite_date",
    sorter: (a, b) => moment(a.limite_date) - moment(b.limite_date),
  },
];

上記の設定を用いて、以下のようにTableコンポーネントを表示します。

import { Table } from "antd";
import moment from "moment";

const AntdDesignTable = () => {
  return <Table dataSource={data} columns={columns} />;
};

export default AntdDesignTable;

オプション機能

Tableコンポーネントには、便利なオプション機能がいくつかあります。

フィルター

filtersプロパティを使うと、特定の列に対してフィルターを設定できます。添付画像の様にフィルターしたい要素を選択して、データを絞り込む事が出来ます。方法は、onFilter関数でフィルターのロジックを定義します。

{
  title: "カテゴリ名",
  dataIndex: ["category", "name"],
  key: "name",
  filters: [
    { text: "家事", value: "家事" },
    { text: "買い物", value: "買い物" },
  ],
  onFilter: (value, record) => record.category.name.indexOf(value) === 0,
}

ソート

sorterプロパティを使うと、列のデータをソートできます。sorter関数でソートのロジックを定義します。

{
  title: "完了",
  dataIndex: "is_completed",
  key: "is_completed",
  sorter: (a, b) => a.is_completed - b.is_completed,
}

レンダリング

renderプロパティを使うと、データの表示方法をカスタマイズできます。例えば、is_completedフィールドを「完了」または「未完了」として表示します。

{
  title: "完了",
  dataIndex: "is_completed",
  key: "is_completed",
  render: (_, record) => (record.is_completed ? "完了" : "未完了"),
}

まとめ

Ant DesignのTableコンポーネントは、データの表示や管理に非常に便利です。基本的な表示方法から、フィルターやソート、カスタムレンダリングまで、様々な機能を活用して、より使いやすいテーブルを作成しましょう。以上、参考になれば幸いです！