SGUI / Development
Pagination
Zero-based host state, known or unknown totals and page-size reset.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Zero-based host state, known or unknown totals and page-size reset.
Loading examples…
Loading examples…
Loading examples…
Page index: 0; size: 25
Zero-based host state, known or unknown totals and page-size reset.
Page index: 0; size: 25
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Pagination, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function PaginationPlaygroundExample() {
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<ThemeScope density="comfortable">
<Stack gap={3}><Pagination label={"Course pages"} page={page} onPageChange={setPage} pageCount={true ? 8 : undefined} hasNextPage={page < 7} pageSize={pageSize} onPaginationChange={(nextPage, nextSize) => {setPage(nextPage);setPageSize(nextSize);}} pageSizeOptions={[10,25,50]} disabled={false} showBoundaryButtons={true} /><Typography>Page index: {page}; size: {pageSize}</Typography></Stack>
</ThemeScope>
</>
);
}
The same props in independent density scopes.
Page index: 0; size: 25
Page index: 0; size: 25
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { Pagination, Stack, Typography, Button } from '@structured-growth/sg-ui/experimental';
export default function PaginationPlaygroundDensitiesExample() {
const [action, setAction] = useState("No action yet");
const [open, setOpen] = useState(false);
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(25);
const [selected, setSelected] = useState("overview");
return (
<>
<Stack gap={3}>
<ThemeScope density="compact"><Stack gap={3}><Pagination label={"Course pages"} page={page} onPageChange={setPage} pageCount={true ? 8 : undefined} hasNextPage={page < 7} pageSize={pageSize} onPaginationChange={(nextPage, nextSize) => {setPage(nextPage);setPageSize(nextSize);}} pageSizeOptions={[10,25,50]} disabled={false} showBoundaryButtons={true} /><Typography>Page index: {page}; size: {pageSize}</Typography></Stack></ThemeScope>
<ThemeScope density="comfortable"><Stack gap={3}><Pagination label={"Course pages"} page={page} onPageChange={setPage} pageCount={true ? 8 : undefined} hasNextPage={page < 7} pageSize={pageSize} onPaginationChange={(nextPage, nextSize) => {setPage(nextPage);setPageSize(nextSize);}} pageSizeOptions={[10,25,50]} disabled={false} showBoundaryButtons={true} /><Typography>Page index: {page}; size: {pageSize}</Typography></Stack></ThemeScope>
</Stack>
</>
);
}