企業級アプリケーションにおいて、データの効率的な表示と管理は不可欠な要素です。Ant Design エコシステムにおける Pro Table は、複雑な表格要件に対応するための強力なコンポーネントを提供します。このコンポーネントを活用することで、開発者は標準的なテーブル機能に加え、検索フォームやページネーションなどを迅速に実装できます。

環境設定と基本実装

まず、必要なパッケージをプロジェクトにインストールします。

npm install @ant-design/pro-table

次に、基本的なデータ表示テーブルを構築します。ここでは従業員管理リストを例に挙げます。

import ProTable from '@ant-design/pro-table';

const StaffManagementTable = () => {
  const tableColumns = [
    {
      title: '従業員 ID',
      dataIndex: 'employeeId',
      valueType: 'indexBorder',
    },
    {
      title: '氏名',
      dataIndex: 'fullName',
      copyable: true,
    },
    {
      title: '入社日',
      dataIndex: 'hiredAt',
      valueType: 'date',
    },
  ];

  return (
    <ProTable
      columns={tableColumns}
      request={async () => {
        // API からのデータ取得を模拟
        return {
          data: [
            { employeeId: 101, fullName: '山田 太郎', hiredAt: '2023-04-01' },
            { employeeId: 102, fullName: '鈴木 花子', hiredAt: '2023-05-15' },
          ],
          success: true,
        };
      }}
      rowKey="employeeId"
      pagination={{ pageSize: 20 }}
    />
  );
};

この実装により、データフェッチング、列の多様な表現、ページネーションが標準で提供されます。

高度な機能拡張

非同期データロード

request プロパティを使用し、パラメータに基づいた動的なデータ取得を実装できます。これにより、サーバー側でのフィルタリングやソート処理との連携が容易になります。

request={async (params) => {
  const { current, pageSize, sorter, filter } = params;
  const result = await fetch('/api/staff/list', {
    method: 'POST',
    body: JSON.stringify({
      pageNum: current,
      pageCount: pageSize,
      sortConfig: sorter,
      queryFilter: filter,
    }),
  });
  return result.json();
}}

ツールバーのカスタマイズ

toolBarRender を利用して、操作ボタンを追加します。これにより、新規作成やデータエクスポートなどの機能を表格上部に配置できます。

toolBarRender={(action) => [
  <Button key="create" type="primary" onClick={() => handleCreate()}>
    新規登録
  </Button>,
  <Button key="download" onClick={() => handleDownload()}>
    CSV 出力
  </Button>,
]}

値タイプシステム

通貨やステータスなど、特定のフォーマットを適用することで、データの可読性を向上させます。

{
  title: '年収',
  dataIndex: 'annualIncome',
  valueType: 'money',
  renderText: (val) => val.toFixed(2),
}

パフォーマンスと最適化

• ページネーションの活用: 大量データを扱う際は必ず分页を有効にしてください。
• 遅延読み込み: 必要なタイミングでのみデータを読み込むことでレンダリング負荷を減らします。
• モジュールの選択的インポート: 未使用の機能を含めないようにし、バンドルサイズを最適化します。