Pagination

<Pagination
  page={simple}
  pageCount={5}
  onChange={setSimple}
  variant="numbered"
  navigation={false}
  label="Simple page numbers"
  previousLabel="Previous simple page"
  nextLabel="Next simple page"
/>

<Pagination
  page={compact}
  pageCount={5}
  onChange={setCompact}
  label="Result pages"
  previousLabel="Previous"
  nextLabel="Next"
/>

{panel(selector, setSelector)}

{panel(minimal, setMinimal, { navigation: false })}

{panel(minimalNavigation, setMinimalNavigation, {
  info: false,
  totalInfo: false,
})}

{panel(withoutBoundaries, setWithoutBoundaries, {
  boundaryButtons: false,
  info: false,
  totalInfo: false,
})}

<div class="rv-pagination-layout">
  <label>
    Rows per page
    <Dropdown
      className="rv-select"
      source={[
        { value: '10', label: '10' },
        { value: '25', label: '25' },
        { value: '50', label: '50' },
      ]}
      config={{ ariaLabel: 'Rows per page' }}
      value={String(size)}
      onChange={(next) => {
        setSize(Number(String(next)));
        setTable(0);
      }}
    />
  </label>
  <Pagination
    page={table}
    pageCount={Math.ceil(95 / size)}
    onChange={setTable}
    variant="icons"
    label="Table pages"
    previousLabel="Previous table page"
    nextLabel="Next table page"
  />
  <FieldHint>
    Page {table + 1} of {Math.ceil(95 / size)}
  </FieldHint>
</div>

{panel(last, setLast)}

{panel(0, () => {}, { total: 7 })}

{panel(0, () => {}, { total: 0 })}

<Pagination
  page={2}
  pageCount={8}
  onChange={() => {}}
  disabled
  label="Disabled pages"
  previousLabel="Previous disabled page"
  nextLabel="Next disabled page"
/>