ページネーション（Pagination）
データ一覧やコンテンツのページ送りに使うページネーションUIの実装を3つのアプローチで比較。 siblings・boundaries・ページサイズ変更・シンプルモード・先頭/末尾ボタンなど、実践的な使用例をインタラクティブに確認できます。
Mantine Pagination
Mantineが提供する高機能ページネーションコンポーネント。siblings / boundariesで省略表示を細かく制御でき、Compound Componentsパターンで完全にカスタマイズ可能。withEdgesで先頭/末尾ボタンを追加。
siblings / boundaries制御Compound ComponentswithEdgesカラー/サイズusePaginationフック
読み込み中...
tsx
'use client';
import { useState } from 'react';
import { MantineProvider, Pagination } from '@mantine/core';
import '@mantine/core/styles.css';
export function MantinePaginationDemo() {
const [page, setPage] = useState(1);
return (
<MantineProvider>
<Pagination total={10} value={page} onChange={setPage} />
</MantineProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Mantineを使ったページネーションUIを実装してください。 - 使用ライブラリ: @mantine/core の Pagination コンポーネント - total prop で総ページ数を指定 - value / onChange で制御コンポーネントとして使用 - siblings prop で省略表示の隣接ページ数を制御（デフォルト1） - boundaries prop で先頭/末尾に常に表示するページ数を制御 - withEdges prop で先頭/末尾ボタンを表示 - color / size / radius でスタイルをカスタマイズ - ページ切り替え時にデータ一覧を更新するデモを実装
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| 項目 | Mantine | Ant Design | CSS / Tailwind |
|---|---|---|---|
| 省略表示（…） | ✅ siblings / boundaries で自動制御 | ✅ 自動制御 | ⚠️ ロジック自作 |
| ページサイズ変更 | ❌ 非対応（自作が必要） | ✅ showSizeChanger | ⚠️ 自作 |
| クイックジャンプ | ❌ 非対応 | ✅ showQuickJumper | ⚠️ 自作 |
| シンプルモード | ✅ withPages={false} | ✅ simple prop | ⚠️ 自作 |
| 先頭/末尾ボタン | ✅ withEdges prop | ⚠️ itemRender で自作 | ✅ 自由に設定可能 |
| 合計件数表示 | ⚠️ 自作 | ✅ showTotal prop | ⚠️ 自作 |
| Compound Components | ✅ Pagination.Root / Items / Next 等 | ❌ 非対応 | ✅ 自由に構成可能 |
| カスタムレンダリング | ✅ getItemProps / getControlProps | ✅ itemRender prop | ✅ 完全自由 |
| サイズバリエーション | ✅ size prop (xs〜xl) | ✅ size prop (small / default) | ✅ 自由に設定可能 |
| テーマ連携 | ✅ MantineProvider | ✅ ConfigProvider | ✅ CSS変数で管理 |
| アクセシビリティ | ✅ WAI-ARIA準拠 | ✅ WAI-ARIA準拠 | ⚠️ 実装者次第 |
| TypeScript | ✅ 完全サポート | ✅ 完全サポート | ✅ 完全サポート |
| バンドルサイズ追加 | ⚠️ 中 | ⚠️ 中 | ✅ ゼロ追加 |
選択のポイント
- Mantine — siblings / boundaries による省略表示の細かな制御と、Compound Components パターンで UI の配置を自由にカスタマイズできるのが最大の強み。usePagination フックを単体で使えるため、完全カスタムの UI とも組み合わせやすい。Mantine ベースのプロジェクトなら第一選択。
- Ant Design — showSizeChanger・showQuickJumper・showTotal・simple など、実務で必要になる機能が props ひとつで有効化できる手軽さが魅力。データテーブルとの連携も容易で、管理画面やダッシュボードの大量データ表示に向いている。
- CSS / Tailwind CSS — ゼロ依存でバンドルサイズを最小化しつつ、省略表示ロジックから UI まで完全にコントロール可能。ページ番号の生成ロジックは自作が必要だが、要件にぴったり合ったカスタム実装を作れる。ブログやポートフォリオサイトなどシンプルなページ送りに最適。