Skip to content
INGRED UI

DataTable2

DataTable2

DataTable2は、大量のデータを効率的に表示・操作するための高機能なテーブルコンポーネントです。 ソート、フィルタリング、ページネーションなどの機能を備えています。

基本的な使い方

import { DataTable2 } from 'ingred-ui';


const columns = [
  {
    field: 'id',
    label: 'ID',
  },
  {
    field: 'name',
    label: '名前',
  },
  {
    field: 'age',
    label: '年齢',
  },
];


const data = [
  { id: 1, name: '山田太郎', age: 25 },
  { id: 2, name: '鈴木花子', age: 30 },
  // ...
];


function MyTable() {
  return (
    <DataTable2
      columns={columns}
      data={data}
      rowKey="id"
    />
  );
}

機能

ソート

const columns = [
  {
    field: 'name',
    label: '名前',
    sortable: true, // ソート可能にする
  },
  // ...
];

フィルタリング

const columns = [
  {
    field: 'status',
    label: 'ステータス',
    filterable: true, // フィルタリング可能にする
    filterOptions: [
      { value: 'active', label: '有効' },
      { value: 'inactive', label: '無効' },
    ],
  },
  // ...
];

カスタムセル

const columns = [
  {
    field: 'actions',
    label: '操作',
    render: (row) => (
      <Button
        variant="primary"
        onClick={() => handleEdit(row.id)}
      >
        編集
      </Button>
    ),
  },
  // ...
];

Props

プロパティ名型デフォルト値説明
columnsColumn[]-テーブルのカラム定義
dataany[]-表示するデータ
rowKeystring’id’各行を識別するためのキー
loadingbooleanfalseローディング状態
paginationbooleantrueページネーションの表示
pageSizenumber101ページあたりの行数
onSortfunction-ソート時のコールバック
onFilterfunction-フィルター時のコールバック

スタイルのカスタマイズ

<DataTable2
  sx={{
    '& th': {
      backgroundColor: 'primary.light',
    },
    '& tr:hover': {
      backgroundColor: 'background.hover',
    },
  }}
  // ...
/>

高度な使用例

選択可能な行

function SelectableTable() {
  const [selected, setSelected] = useState([]);


  return (
    <DataTable2
      columns={columns}
      data={data}
      selectable
      selected={selected}
      onSelectedChange={setSelected}
    />
  );
}

カスタムツールバー

function TableWithToolbar() {
  return (
    <DataTable2
      columns={columns}
      data={data}
      toolbar={
        <Box display="flex" justifyContent="space-between" p={2}>
          <TextField placeholder="検索..." />
          <Button variant="primary">新規作成</Button>
        </Box>
      }
    />
  );
}

アクセシビリティ

DataTable2は以下のアクセシビリティ機能を提供します：

  • 適切なARIAラベルとロール
  • キーボードナビゲーション
  • スクリーンリーダー対応
  • ソート状態の音声通知

ベストプラクティス

  1. パフォーマンス最適化

    • 大量のデータを扱う場合は仮想スクロールを使用
    • 必要な列のみを表示

  2. レスポンシブ対応

    • モバイル表示時は重要な列のみ表示
    • 横スクロール可能なラッパーを使用

  3. ユーザー体験の向上

    • ローディング状態の適切な表示
    • エラー状態のハンドリング
    • 空の状態の表示

よくある問題と解決方法

データの更新が反映されない

// 正しい使用法
const [data, setData] = useState(initialData);


// データの更新
setData(newData); // 新しい配列参照を作成

カスタムフィルタリング

function CustomFilterTable() {
  const [filteredData, setFilteredData] = useState(data);


  const handleFilter = (searchText) => {
    const filtered = data.filter(item =>
      item.name.toLowerCase().includes(searchText.toLowerCase())
    );
    setFilteredData(filtered);
  };


  return (
    <DataTable2
      columns={columns}
      data={filteredData}
      toolbar={
        <TextField
          placeholder="名前で検索..."
          onChange={(e) => handleFilter(e.target.value)}
        />
      }
    />
  );
}

Further reading