Pagination

Pagination provides three elements Navigator, Sizing, and Results

Import#

import {
  Pagination,
  PageSizing,
  PageResults,
  PageNavigator,
  Divider,
  Center,
} from '@fluidtruck/core'

Usage#

Navigator#

function PaginationRender() {
  const [pageNumber, setPageNumber] = React.useState(0)

  return (
    <Pagination
      count={859}
      pageNumber={pageNumber}
      pageSize={25}
      onPageChange={setPageNumber}
    >
      <PageNavigator />
    </Pagination>
  )
}

Navigator + Results#

function PaginationRender() {
  const [pageNumber, setPageNumber] = React.useState(0)

  return (
    <Pagination
      count={859}
      pageNumber={pageNumber}
      pageSize={25}
      onPageChange={setPageNumber}
    >
      <PageNavigator />
      <Center>
        <Divider orientation="vertical" />
      </Center>
      <PageResults />
    </Pagination>
  )
}

Full Pagination feature set (Sizing + Results + Navigator)#

When utilizing PageSizing requires props: pageSize + onSizeChange

function PaginationRender() {
  const [pageNumber, setPageNumber] = React.useState(0)
  const [rowsPerPage, setRowsPerPage] = React.useState(25)

  return (
    <Pagination
      count={859}
      pageNumber={pageNumber}
      pageSize={rowsPerPage}
      onSizeChange={setRowsPerPage}
      onPageChange={setPageNumber}
      selectableSizes={[10, 25, 50]}
    >
      <PageSizing label={'rows per page'} />
      <Center>
        <Divider orientation="vertical" />
      </Center>
      <PageResults maxW="150px" minW="150px" w="150px" />
      <Center>
        <Divider orientation="vertical" />
      </Center>
      <PageNavigator />
    </Pagination>
  )
}

Props#

export interface PaginationProps {
  count: number;
  onPageChange: (page: number) => void;
  onSizeChange?: (size: number) => void;
  pageNumber: number;
  pageSize: number;
  selectableSizes?: number[];
}