Pagination

Paginationコンポーネントは、ページネーションをするためのコンポーネントです。

基本的な使い方


import { useState } from "react";
import { Card, Pagination } from "@basemachina/view";
 
const App = () => {
  const [page, setPage] = useState(1);
  return (
    <Card>
      <Pagination
        currentPage={page}
        itemsPerPage={10}
        totalItems={100}
        onChange={(page) => setPage(page)}
      />
    </Card>
  );
};
 
export default App;

最初と最後のページへ移動するボタンを表示する

showFirstLastButtons を true に設定すると、最初と最後のページへ移動するボタンを表示できます。


import { useState } from "react";
import { Card, Pagination } from "@basemachina/view";
 
const App = () => {
  const [page, setPage] = useState(1);
  return (
    <Card>
      <Pagination
        showFirstLastButtons
        currentPage={page}
        itemsPerPage={10}
        totalItems={100}
        onChange={(page) => setPage(page)}
      />
    </Card>
  );
};
 
export default App;

詳細なインターフェース

名前	説明	デフォルト値
currentPage	現在のページ番号を指定します。	必須
itemsPerPage	1ページあたりのアイテム数を指定します。	必須
totalItems	全アイテム数を指定します。	必須
onChange	ページ変更時に実行する関数を指定します。	必須
siblingCount	現在のページの前後に表示するページ番号の数を指定します。	2
showFirstLastButtons	最初と最後のページへ移動するボタンを表示するかどうかを指定します。	false