antdの覚書 | ワクガンス

antdのTable コンポーネントは、データを表形式で表示するために使用されます。 機能が豊富で、列のソート、フィルタリング、カスタムレンダリング、ページネーション、行の選択などの多くの標準機能をサポートしています。 以下は Table コンポーネントの基本的な使い方の例です： tsx

import { Table } from 'antd';

const dataSource = [
  {
    key: '1',
    name: '太郎',
    age: 32,
    address: '東京都渋谷区',
  },
  {
    key: '2',
    name: '花子',
    age: 42,
    address: '東京都新宿区',
  },
  // ...その他のデータ項目
];

const columns = [
  {
    title: '名前',
    dataIndex: 'name',
    key: 'name',
    // ...その他の列設定
  },
  {
    title: '年齢',
    dataIndex: 'age',
    key: 'age',
    // ...その他の列設定
  },
  {
    title: '住所',
    dataIndex: 'address',
    key: 'address',
    // ...その他の列設定
  },
  // ...その他の列定義
];

function App() {
  return <Table dataSource={dataSource} columns={columns} />;
}

主要なプロパティは以下の通りです：

dataSource: 表に表示されるデータの配列。 各データ項目は一意の key プロパティを持つ必要があります。 columns: 各列の設定を定義するオブジェクトの配列。 title は列のヘッダーに表示されるテキスト、dataIndex は dataSource 内のどのフィールドがその列に表示されるかを指定します。 pagination: ページネーションの設定を行います。false に設定するとページネーションが無効になります。 sorter: 列のソート機能を有効にします。列の設定内で sorter 関数を提供することができます。 filter: 列にフィルタ機能を追加します。 rowSelection: 行の選択機能を有効にします。 選択された行のデータを取得するためのコールバック関数を設定できます。 onRow: 各行に対するイベントハンドラを設定できます。 たとえば、行がクリックされたときの処理を記述できます。 expandedRowRender: 各行の詳細情報を表示するための追加のコンテンツをレンダリングする関数を提供できます。

columnsの主要なプロパティ

title: 列のヘッダーに表示される文字列です。 これは、その列が何を表示しているかをユーザーに示します。 dataIndex: 表示したいデータのキー（フィールド名）を指定します。 これにより、dataSource の各オブジェクトからどのプロパティを取得して表示するかが決まります。 key: Reactが要素のリストをレンダリングする際に使う一意の識別子です。 通常、dataIndex と同じ値を使用します。 render: カスタムレンダリング関数で、この関数を通じて、特定の列の表示をカスタマイズできます。 この関数は、その列に表示されるデータと行のデータを引数として受け取ります。 sorter: 列のソート機能を有効にするための関数またはブール値です。 ソート関数を提供することで、その列におけるデータのソート順をカスタマイズできます。 defaultSortOrder: 列のデフォルトのソート順を指定します。'ascend' か 'descend' の値を設定できます。 filters: フィルターメニューを提供するためのオプションの配列です。 ユーザーが特定の値に基づいて行をフィルタリングできるようにします。 onFilter: filters が提供されている場合、この関数はフィルターが適用されたときに呼ばれます。データをフィルタリングするためのロジックを提供します。 fixed: 列を左または右に固定するかどうかを指定します。 'left' または 'right' の値が設定でき、スクロール時にその列が固定された状態で表示されます。

Table コンポーネントにおける列のソート機能を有効にするためには、columns 配列内の該当する列オブジェクトに sorter プロパティを設定します。 以下は、age フィールドを持つデータセットに対してソート機能を実装する簡単な例です： tsx

import React from 'react';
import { Table } from 'antd';

// テーブルに表示するデータの型を定義
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

// テーブルに表示するデータ配列
const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
  // 他のデータ...
];

const App: React.FC = () => {
  // カラム定義
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      sorter: (a: DataType, b: DataType) => a.age - b.age, // 年齢でソート
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
    },
  ];

  return <Table columns={columns} dataSource={data} />;
};

export default App;

この例では、age 列に sorter 関数が提供されており、この関数は二つの引数 a と b を受け取ります。 これらはデータソースの中の2つの要素で、比較してソート順序を決定します。sorter 関数が正の値を返すと、a は b より後に配置され、負の値を返すと前に配置されます。 ここでは、単純な数値の差分に基づいた比較を行っています。

下記のサンプルコードは、データベースから取得したデータに対してページネーション、ソート機能、およびフィルター（検索）を実装した Table コンポーネントの一例です。 この例では、サーバーサイドロジック(バックエンド)は実装されておらず、フロントエンドでのUIと動作のみを示しています。実際には、APIを介してこれらの操作をサーバー側で処理する必要があります。 tsx

import React, { useState, useEffect } from 'react';
import { Table, Input, Button } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const App: React.FC = () => {
  const [data, setData] = useState<DataType[]>([]);
  const [pagination, setPagination] = useState({ current: 1, pageSize: 10 });
  const [loading, setLoading] = useState(false);
  const [searchText, setSearchText] = useState('');

  // データ取得
  const fetchData = async (params: any) => {
    setLoading(true);
    // API呼び出しのダミー実装。実際にはサーバーからデータを取得します。
    // const response = await axios.get('/api/data', { params });
    // setData(response.data.results);
    // setPagination({ ...pagination, total: response.data.total });
    setLoading(false);
  };

  // 初回レンダリング時にデータを取得
  useEffect(() => {
    fetchData({ pagination });
  }, []);

  // ページネーション、ソート、フィルタリングの変更時に呼ばれる
  const handleTableChange = (newPagination: any, filters: any, sorter: any) => {
    fetchData({
      sortField: sorter.field,
      sortOrder: sorter.order,
      pagination: newPagination,
      ...filters,
    });
  };

  // 検索フィルター用のカスタムコンポーネント
  const getColumnSearchProps = (dataIndex: string) => ({
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }: any) => (
      <div style={{ padding: 8 }}>
        <Input
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{ marginBottom: 8, display: 'block' }}
        />
        <Button
          type="primary"
          onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
          icon={<SearchOutlined />}
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button onClick={() => handleReset(clearFilters)} size="small" style={{ width: 90 }}>
          Reset
        </Button>
      </div>
    ),
    filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
    onFilter: (value, record) =>
      record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
  });

  // 検索実行
  const handleSearch = (selectedKeys, confirm, dataIndex) => {
    confirm();
    setSearchText(selectedKeys[0]);
  };

  // 検索リセット
  const handleReset = clearFilters => {
    clearFilters();
    setSearchText('');
  };

  // カラム定義
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      sorter: true,
      ...getColumnSearchProps('name'),
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
      sorter: true,
    },
    {
      title: 'Address',
      dataIndex: 'address',
      key: 'address',
      ...getColumnSearchProps('address'),
    },
  ];

  return (
    <Table
      columns={columns}
      rowKey={record => record.key}
      dataSource={data}
      pagination={pagination}
      loading={loading}
      onChange={handleTableChange}
    />
  );
};

export default App;