Pagination

Page controls for lists and tables. First and last pages stay visible, with ellipses for the pages in between.

import { useState } from "octane";
import { Pagination } from "@octaneui/core";

export function PaginationExamples() @{
  const [page, setPage] = useState(1);
  <>
    Page {page} of 10
    <Pagination count={10} page={page} onPageChange={setPage} />
  </>
}

Usage

Set count to the number of pages. Use defaultPage for local state, or page and onPageChange to control it. Give the control an accessible name with aria-label or aria-labelledby when more than one pagination is on the page.

Slice the rows you pass to Datagrid (or any list) from the current page. Customize the previous and next buttons with previous and next.