Pagination
Display active page and navigate between multiple pages.
#
Documentation
#
#
Usage
#
import { Pagination } from "@optiaxiom/react";
export function App() {
return <Pagination total={50} />;
}
#
Controlled
#
Use the page
and defaultPage
props to toggle between controlled and uncontrolled usage. And combine it with onPageChange
to listen for changes to the state.
import { Button, Flex, Pagination } from "@optiaxiom/react";
import { useState } from "react";
export function App() {
const [page, setPage] = useState(5);
return (
<Flex flexDirection={["column", "row"]}>
<Button disabled={page === 5} onClick={() => setPage(5)}>
Reset
</Button>
<Pagination onPageChange={setPage} page={page} total={5} />
</Flex>
);
}
#
Related
#
Table
Display tabular data using rows and columns.
#
Props
#
#
Pagination
#
Supports all Box props in addition to its own. Renders a <div>
element.
Prop |
---|
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. false | true |
className string |
defaultPage The default active page in uncontrolled mode. number |
disabled Whether to disable all button. false | true |
onPageChange Handler that is called when the active page is changed. (offset: number) => void |
page The active page in controlled mode. number |
total* The total number of pages to display. number |
#
Changelog
#
#
0.1.0
#
- Added component