Pagination component

This component displays pagination numbers and icons. Typically used and placed in the bottom right corner of a table.

State

• Test coverage: --%
• Known bugs: --
• Storybook: https://storybook.knet.lqd.dk/?path=/story/pagination--all-props
• Zeroheight: --

Usage

Import like this:

import { Pagination, usePaginationState } from '@tdcerhverv/pagination';

Use like this:

const [paginationState, dispatch] = usePaginationState(totalEntries, pageSize);

<Pagination
  paginationState={paginationState}
  dispatch={dispatch}
  separator="af"
/>;

Notes:

• pageSize is optional and defaults to 20.
• separator is the word/symbol in the range text, e.g. 1–20 af 80.

Usage details

The Pagination component is a controlled component having state externally. This is a benefit when working with requests and fetching data from API endpoints.

The usePaginationState hook is basically a reducer, that takes arguments and returns a state object and a dispatch handler.

Props

Interface for usePaginationState:

usePaginationState(
  totalEntries: number,
  pageSize?: number // default: 20
);

Interface for Pagination:

interface IPagination {
  paginationState: TPaginationState;
  dispatch: TPaginationDispatch;
  separator?: string;
  children?: ReactNode;
}

The paginationState prop accepts the following state object:

export type TPaginationState = {
  currentPage: number,
  totalPages: number,
  totalEntries: number,
  skip: number,
  pageSize: number,
  hasPrev: boolean,
  hasNext: boolean,
};

Property skip is the number of entries skipped before the first entry on the current page.

The dispatch action takes the following types:

type TPaginationDispatch = {
  goToFirst: () => void,
  goToPrev: () => void,
  goToNext: () => void,
  goToLast: () => void,
  goToPage: (page: number) => void,
  pagesize: () => void,
  refresh: (totalEntries: number, pageSize: number) => void,
};

Normally it is not required to dispatch any actions. The dispatch actions is handled in the pagination component when changing page.

Input changes to totalEntries and pageSize is handled by the usePaginationState reducer.

Tags

pagination, table