KvalityUI

Pagination

Пагинация с диапазоном «1–10 из 128» и выбором размера страницы.

Живой код — редактируйте
function Example() {
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const total = 128;
  const totalPages = Math.ceil(total / pageSize);
  return (
    <Pagination
      page={page}
      totalPages={totalPages}
      total={total}
      start={(page - 1) * pageSize + 1}
      end={Math.min(page * pageSize, total)}
      onPageChange={setPage}
      pageSize={pageSize}
      pageSizeOptions={[10, 25, 50]}
      onPageSizeChange={(size) => {
        setPageSize(size);
        setPage(1);
      }}
    />
  );
}

render(<Example />);

Пропсы

Prop

Type

On this page