var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty;var P=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),b=(a,e)=>{for(var r in e)t(a,r,{get:e[r],enumerable:!0})},g=(a,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of p(e))!h.call(a,i)&&i!==r&&t(a,i,{get:()=>e[i],enumerable:!(o=l(e,i))||o.enumerable});return a};var N=(a,e,r)=>(r=a!=null?d(m(a)):{},g(e||!a||!a.__esModule?t(r,"default",{value:a,enumerable:!0}):r,a)),v=a=>g(t({},"__esModule",{value:!0}),a);var c=P((j,s)=>{s.exports=_jsx_runtime});var C={};b(C,{default:()=>S,frontmatter:()=>f});var n=N(c()),f={title:"Pagination"};function u(a){let e=Object.assign({p:"p",code:"code",h2:"h2",pre:"pre",h3:"h3",strong:"strong"},a.components),{ComponentLinks:r}=e;return r||z("ComponentLinks",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(e.p,{children:["Pagination provides three elements ",(0,n.jsx)(e.code,{children:"Navigator"}),", ",(0,n.jsx)(e.code,{children:"Sizing"}),", and ",(0,n.jsx)(e.code,{children:"Results"})]}),` `,(0,n.jsx)(r,{github:{package:"core"},npm:{package:"@fluidtruck/core"}}),` `,(0,n.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-js",children:`import { Pagination, PageSizing, PageResults, PageNavigator, Divider, Center, } from '@fluidtruck/core' `})}),` `,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,n.jsx)(e.h3,{id:"navigator",children:"Navigator"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`function PaginationRender() { const [pageNumber, setPageNumber] = React.useState(0) return ( ) } `})}),` `,(0,n.jsx)(e.h3,{id:"navigator--results",children:"Navigator + Results"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`function PaginationRender() { const [pageNumber, setPageNumber] = React.useState(0) return ( ) } `})}),` `,(0,n.jsx)(e.h3,{id:"full-pagination-feature-set-sizing--results--navigator",children:"Full Pagination feature set (Sizing + Results + Navigator)"}),` `,(0,n.jsxs)(e.p,{children:["When utilizing ",(0,n.jsx)(e.strong,{children:"PageSizing"})," requires props: ",(0,n.jsx)(e.code,{children:"pageSize"})," + ",(0,n.jsx)(e.code,{children:"onSizeChange"})]}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-jsx",children:`function PaginationRender() { const [pageNumber, setPageNumber] = React.useState(0) const [rowsPerPage, setRowsPerPage] = React.useState(25) return ( ) } `})}),` `,(0,n.jsx)(e.h2,{id:"props",children:"Props"}),` `,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`export interface PaginationProps { count: number; onPageChange: (page: number) => void; onSizeChange?: (size: number) => void; pageNumber: number; pageSize: number; selectableSizes?: number[]; } `})})]})}function x(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,Object.assign({},a,{children:(0,n.jsx)(u,a)})):u(a)}var S=x;function z(a,e){throw new Error("Expected "+(e?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(C);})(); ;return Component;

Center

Props#