Pagination ページネーション

データ量が多い時にページ分けして表示します。制御 / 非制御、1 ページあたりの件数切り替え、ページジャンプをサポートします。

基本的な使い方

import { useState } from 'react'
import { LhPagination } from '@lh-ui/react'

export default function Demo() {
  const [current, setCurrent] = useState(1)

  return (
    <LhPagination
      total={128}
      current={current}
      onChange={(page) => setCurrent(page)}
    />
  )
}

Pagination Props

プロパティ	説明	型	使用可能な値	デフォルト値
total	データの総数（必須）	`number`	—	—
current	現在のページ（制御、1 から開始）	`number`	—	—
defaultCurrent	現在のページのデフォルト値（非制御）	`number`	—	`1`
pageSize	1 ページあたりの件数（制御）	`number`	—	—
defaultPageSize	1 ページあたりの件数のデフォルト値（非制御）	`number`	—	`10`
pageSizes	1 ページあたりの件数の選択肢	`number[]`	—	`[10, 20, 30, 40]`
siblingCount	現在のページの両側にそれぞれ表示するページ番号の数	`number`	—	`1`
showTotal	総件数を表示するかどうか	`boolean`	—	`false`
showSizeChanger	1 ページあたりの件数切り替えを表示するかどうか	`boolean`	—	`false`
showJumper	ページジャンプ入力を表示するかどうか	`boolean`	—	`false`
simple	コンパクトモード	`boolean`	—	`false`
disabled	無効にするかどうか	`boolean`	—	`false`
sx	クイックレイアウトプロパティ	`SxProps`	—	—

Pagination イベント

イベント	説明	コールバックシグネチャ	Vue 対応
onChange	ページ番号の変化時に発火（ページ切り替え、ジャンプ、1 ページ件数の変化によるクランプでも発火）	`(current: number, pageSize: number) => void`	`@change`
onSizeChange	1 ページあたりの件数の変化時に発火	`(pageSize: number) => void`	`@size-change`

制御 / 非制御

current を渡すと制御（コンポーネントは内部状態を持たず、外部が駆動）。defaultCurrent を渡すと非制御の内部状態になります。pageSize も同様です。どちらのモードでも onChange は発火します。

ページ番号のクランプ

pageSize の変化により総ページ数が減った時、現在のページが範囲外になる場合は、コンポーネントが effect 内で自動的に最終ページにクランプして onChange を発火します。業務側でのフォールバックは不要です。

キーボード操作

ページジャンプ入力欄：Enter でジャンプを確定し、フォーカス外れでも確定します。不正な値（範囲外や数値以外）は有効な範囲にクランプされます。

アクセシビリティ

ルート要素は <nav aria-label> です。現在のページは aria-current="page" を出力し、各ページ番号ボタンには aria-label（言語パック pagination.page のテンプレート、例：「第 3 页」）が付きます。

ref

forwardRef<HTMLElement> —— <nav> ルート要素です。

スタイル

import '@lh-ui/react/theme.css'
import '@lh-ui/react/style/pagination'

基本的な使い方​

Pagination Props​

Pagination イベント​

キーボード操作​

アクセシビリティ​

ref​

スタイル​