PaginationPageText

PaginationPageTextコンポーネントは、ページネーションの件数を表示するためのコンポーネントです。

現在表示されているアイテムの範囲と全体の件数を「1 - 10件（全100件）」のような形式で表示します。通常、Paginationコンポーネントと組み合わせて使用することで、ユーザーにページネーションの状態をわかりやすく伝えることができます。

基本的な使い方

PaginationコンポーネントとPaginationPageTextコンポーネントを併用して、ページネーション機能と件数表示を実装します。両方のコンポーネントに同じcurrentPage、itemsPerPage、totalItemsの値を渡すことで、ページ操作と件数表示が連動します。

import { useState } from "react";
import { Card, Pagination, PaginationPageText } from "@basemachina/view";
 
const App = () => {
  const [page, setPage] = useState(1);
  return (
    <Card>
      <div className="flex items-center space-x-2">
        <Pagination
          currentPage={page}
          itemsPerPage={10}
          totalItems={100}
          onChange={(page) => setPage(page)}
        />
        <PaginationPageText
          currentPage={page}
          itemsPerPage={10}
          totalItems={100}
        />
      </div>
    </Card>
  );
};
 
export default App;

詳細なインターフェース

名前	説明	必須・任意	デフォルト値
currentPage	現在のページ番号を指定します。	必須	なし
itemsPerPage	1ページあたりのアイテム数を指定します。	必須	なし
totalItems	全アイテム数を指定します。	必須	なし

Pagination 外部ライブラリ