`<c-pagination>`

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-pagination v-model="options" />

    <p>Current page: {{ options.currentPage ?? 1 }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import type { CPaginationOptions } from '@cscfi/csc-ui';

const options = ref<CPaginationOptions>({
  itemCount: 96,
  itemsPerPage: 10,
  pageSizes: [10, 25, 50],
});
</script>

Simple

Vue

React

Angular

TypeScript

<template>
  <div>
    <c-pagination v-model="options" hide-details simple />

    <p>Current page: {{ options.currentPage ?? 1 }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import type { CPaginationOptions } from '@cscfi/csc-ui';

const options = ref<CPaginationOptions>({
  itemCount: 40,
  itemsPerPage: 10,
});
</script>

API reference

`<c-pagination>`

Properties

Property	Attribute	Type	Default	Description
`hideDetails`	`hide-details`	`boolean`	`false`	Hide details (per page dropdown and the 'x - y of n pages' text)
`hideRange`	`hide-range`	`boolean`	`false`	Hide range indicator
`simple`	`simple`	`boolean`	`false`	Hide page number buttons
`size`	`size`	`CPaginationSize`	`'default'`	Hide details (per page dropdown and the 'x - y of n pages' text)
`value`	—	`CPaginationOptions`	`() => ({ itemCount: 0 })`	Object containing values that are needed for pagination. Note! startFrom and endTo are assigned automatically to the object based on other values

Events

Event	Detail	Description
`changeValue`	`CPaginationOptions`	Fired when the user changes the page or the page size, carrying the pagination options object with the recomputed `currentPage`, `itemsPerPage`, `startFrom` and `endTo` fields. Also dispatched as `change-value` — bind that name in Vue templates.
`input`	`void`	Native bubbling input event dispatched alongside every value change so a plain `v-model` stays in sync. Carries no detail.
`update:value`	`CPaginationOptions`	Fired alongside `changeValue` with the same detail — the `v-model` contract.

CSS parts

Style from outside with c-pagination::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The `<nav>` element wrapping the whole pagination bar
`details`	The details area holding the items-per-page selector and range text
`items-per-page`	The items-per-page row (label text and page-size menu)
`pages`	The `<ul>` list of page buttons and the prev/next controls

Types

Importable from the package root: import type { … } from '@cscfi/csc-ui'

`CPaginationOptions`

export interface CPaginationOptions {
  currentPage?: number;
  endTo?: number;
  itemCount: number;
  itemsPerPage?: number;
  pageSizes?: number[];
  startFrom?: number;
  textOverrides?: Record<string, unknown>;
  totalVisible?: number;
}

`CPaginationProps`

export interface CPaginationProps {
  /**
   * Hide details (per page dropdown and the 'x - y of n pages' text)
   *
   * @seeded from csc-ui — verify
   */
  hideDetails?: boolean;
  /**
   * Hide range indicator
   *
   * @seeded from csc-ui — verify
   */
  hideRange?: boolean;
  /**
   * Hide page number buttons
   *
   * @seeded from csc-ui — verify
   */
  simple?: boolean;
  /**
   * Hide details (per page dropdown and the 'x - y of n pages' text)
   *
   * @seeded from csc-ui — verify
   */
  size?: CPaginationSize;
  /**
   * Object containing values that are needed for pagination.
   *
   * Note! startFrom and endTo are assigned automatically to the object based on other values
   *
   * @seeded from csc-ui — verify
   */
  value?: CPaginationOptions;
}

`CPaginationSize`

Size of the pagination controls. `small` renders the compact page buttons.

export type CPaginationSize = 'default' | 'small';