PackagesUIComponents
Pagination
データ一覧を複数ページに分割し、ユーザーがページ間を移動できるようにするナビゲーション。
いつ使うか
- テーブルやリストのデータが多く、1ページに収まらない場合に使用する
- ユーザーが任意のページに直接ジャンプできる必要がある場合に使用する
- サーバーサイドでページ単位にデータを取得している場合に使用する
いつ使わないか
- 全件が1ページに収まる場合は使わない（
totalPagesが1以下のとき自動的に非表示になる） - 無限スクロールで追加読み込みする場合は使わない
- ステップ形式のウィザードには使わない。ステッパーコンポーネントを検討する
Usage
import { Pagination } from '@bi-shop-it/ui/pagination';
const [page, setPage] = useState(1);
<Pagination currentPage={page} totalPages={10} onPageChange={setPage} />;Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
currentPage | number | — | 現在のページ番号（1始まり、必須） |
totalPages | number | — | 総ページ数（必須） |
onPageChange | (page: number) => void | — | ページ変更時のコールバック（必須） |
siblingCount | number | 1 | 現在のページの前後に表示するページ番号の数 |
ページ数が多い場合
ページ数が多い場合、現在のページの前後のみ表示し、省略記号（…）で中間を省略する。siblingCount で表示範囲を調整できる。
<Pagination currentPage={5} totalPages={20} onPageChange={setPage} />siblingCount
siblingCount を増やすと、現在のページの前後に表示されるページ番号が増える。
<Pagination
currentPage={10}
siblingCount={2}
totalPages={20}
onPageChange={setPage}
/>アクセシビリティ
コンポーネントが内部で処理すること
<nav>要素で囲み、aria-label="ページナビゲーション"を付与する- 現在のページボタンに
aria-current="page"を付与する - 前へ・次へボタンに
aria-labelを付与する（「前のページ」「次のページ」） - 各ページ番号ボタンに
aria-label="ページ N"を付与する - 先頭・末尾ページでは前へ・次へボタンを
disabledにする - 省略記号に
aria-hidden="true"を付与する
利用者が対応すること
onPageChangeでページ遷移後、データ一覧の先頭にフォーカスを移動させることを推奨する
関連コンポーネント
DataTable— テーブルと組み合わせて使用する。DataTable 自体はページネーションを内蔵しない