Pager

Used to move forward and backward through pages.

Demo

React
Vue

Size

Color scheme

Variant

Showing 1-10 of 100

Usage

React
Vue

import { Pager } from '@fintech-sandpit/ui/react';

const onPrevPage = () => {
  // your code here
};

const onNextPage = () => {
  // your code here
};

return (
  <Pager
    onPrevPage={onPrevPage}
    onNextPage={onNextPage}
  />
);

import { Pager } from '@fintech-sandpit/ui/react';

const PER_PAGE = 10;

const [count, setCount] = useState(100);
const [firstItem, setFirstItem] = useState(1);

const onPrevPage = () => {
  // your code here
};

const onNextPage = () => {
  // your code here
};

return (
  <Pager
    className="w-full px-8 py-4 rounded-md border border-gray-200 dark:border-gray-700"
    onPrevPage={onPrevPage}
    onNextPage={onNextPage}
  >
    <span className="flex-1 text-center">
      Showing {firstItem}-{firstItem + PER_PAGE - 1} of {count}
    </span>
  </Pager>
);

<script setup lang="ts">
import { Pager } from '@fintech-sandpit/ui/vue';

const onPrevPage = () => {
  // your code here
};

const onNextPage = () => {
  // your code here
};
</script>

<template>
  <Pager
    @prev-page="onPrevPage"
    @next-page="onNextPage"
  />
</template>

<script setup lang="ts">
import { Pager } from '@fintech-sandpit/ui/vue';

const PER_PAGE = 10;
const [count, setCount] = ref(100);
const [firstItem, setFirstItem] = ref(1);

const onPrevPage = () => {
  // your code here
};

const onNextPage = () => {
  // your code here
};
</script>

<template>
  <Pager
    class="w-full px-8 py-4 rounded-md border border-gray-200 dark:border-gray-700"
    @prev-page="onPrevPage"
    @next-page="onNextPage"
  >
    <span class="flex-1 text-center">
      Showing {{ firstItem }}-{{ firstItem + PER_PAGE - 1 }} of {{ count }}
    </span>
  </Pager>
  />
</template>

Props

React
Vue

Name	Type	Default	Description
`variant`	`ButtonVariant`	`solid`	Button variant
`size`	`Size`	`md`	Button size
`colorScheme`	`ColorScheme`	`neutral`	Button color scheme
`disabled`	`boolean`	`false`	Disabled state
`triggerWidth`	`CssUnit`		Previous and next page buttons width
`hasPrevPage`	`boolean`	`true`	Whether to show the previous page button
`prevPageLabel`	`string`	`Previous`	Previous page button label
`prevPageIcon`	`IconDefinition`	`faAngleLeft`	Previous page button icon
`hasNextPage`	`boolean`	`true`	Whether to show the next page button
`nextPageLabel`	`string`	`Next`	Next page button label
`nextPageIcon`	`IconDefinition`		Next page button icon

Name	Type	Default	Description
`variant`	`ButtonVariant`	`solid`	Button variant
`size`	`Size`	`md`	Button size
`color-scheme`	`ColorScheme`	`neutral`	Button color scheme
`disabled`	`boolean`	`false`	Disabled state
`trigger-width`	`CssUnit`		Previous and next page buttons width
`has-prev-page`	`boolean`	`true`	Whether to show the previous page button
`prev-page-label`	`string`	`Previous`	Previous page button label
`prev-page-icon`	`IconDefinition`	`faAngleLeft`	Previous page button icon
`has-next-page`	`boolean`	`true`	Whether to show the next page button
`next-page-label`	`string`	`Next`	Next page button label
`next-page-icon`	`IconDefinition`	`faAngleRight`	Next page button icon

Slots

<Pager>
  <span>
    Showing 1-10 of 100
  </span>
</Pager>

Name	Payload	Description
`onPrevPage`	`void`	Previous page trigger clicked
`onNextPage`	`void`	Next page trigger clicked

Name	Payload	Description
`prev-page`	`void`	Previous page trigger clicked
`next-page`	`void`	Next page trigger clicked

Types

type ButtonVariant = 'solid' | 'subtle' | 'outline' | 'ghost' | 'unstyled'
type CssUnit = `${number}${'px' | 'em' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | '%'}`
type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'