SGUI / Development
AppPaginationFooter
Controlled page sizes, known and unknown totals.
Loading examples…
Loading examples…
Examples
Loading examples…
Component documentation
SGUI / Development
Controlled page sizes, known and unknown totals.
Loading examples…
Loading examples…
Loading examples…
'use client';
import { useState } from 'react';
import { AppPaginationFooter } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';
export default function PaginationFooterExample() {
const [page,setPage] = useState(0);
const [size,setSize] = useState(5);
return (
<>
<AppPaginationFooter page={page} pageSize={size} pageSizeOptions={[5,10,25]} totalCount={42} hasNextPage onPaginationModelChange={model => { setPage(model.page); setSize(model.pageSize); }} disabled={false} />
</>
);
}
'use client';
import { useState } from 'react';
import { AppPaginationFooter } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';
export default function EmptyFooterExample() {
const [page,setPage] = useState(0);
const [size,setSize] = useState(10);
return (
<>
<AppPaginationFooter page={0} pageSize={10} pageSizeOptions={[10]} totalCount={0} onPaginationModelChange={model => { setPage(model.page); setSize(model.pageSize); }} />
</>
);
}