Pagination
Examples
Total pages
Default page
Skip to last and first page
Sibling count
Sizes
Hide numbers
In a card
Importing
Properties
Events
Parts

Pagination

<mo-pagination> | MOPagination

Since 1.8

stable

Pagination is used to navigate through multiple pages.

<mo-pagination total-pages="10"></mo-pagination>

import { MOPagination } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOPagination totalPages="10"></MOPagination>;

Note that the current-page attribute is 1-index based, instead of zero-numbering based.

Examples

Total pages

The total-pages attribute will dictate how many different pages the pagination has. This attribute is required.

<mo-pagination total-pages="5"></mo-pagination>

import { MOPagination } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOPagination totalPages="5"></MOPagination>;

Default page

The default-page attribute can be used to set the initial selected page on render.

<mo-pagination total-pages="60" default-page="33"></mo-pagination>

import { MOPagination } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOPagination totalPages="60" defaultPage="33"></MOPagination>;

The skip-buttons attribute can be used to render buttons that allow the user to jump straight to the first or last page of the pagination.

<mo-pagination total-pages="100" skip-buttons></mo-pagination>

import { MOPagination } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOPagination totalPages="100" skipButtons></MOPagination>;

The arrow icons are placeholders, as the design system currently does not have proper icons for this. Once the icons are added this component will be updated.

Sibling count

The sibling-count attribute can be used to specify how many digits to display on either side of the current page. Defaults to 1.

<mo-pagination total-pages="20" sibling-count="2"></mo-pagination>

import { MOPagination } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOPagination totalPages="20" siblingCount="2"></MOPagination>;

Sizes

Use the size attribute to change the pagination’s size.

Small (default, 32px)

Medium (40px)

Large (48px)

<p>Small (default, 32px)</p>
<mo-pagination size="small" total-pages="10"></mo-pagination>
<p>Medium (40px)</p>
<mo-pagination size="medium" total-pages="10"></mo-pagination>
<p>Large (48px)</p>
<mo-pagination size="large" total-pages="10"></mo-pagination>

import { MOPagination } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <>
    <p>Small (default, 32px)</p>
    <MOPagination size="small" totalPages="10"></MOPagination>
    <p>Medium (40px)</p>
    <MOPagination size="medium" totalPages="10"></MOPagination>
    <p>Large (48px)</p>
    <MOPagination size="large" totalPages="10"></MOPagination>
  </>
);

Hide numbers

The hide-numbers attribute can be used to hide the page numbers in the pagination.

Current page: 1 of 10

<div style="display: flex; gap: 8px; align-items: center; height: 32px;">
<mo-pagination id="numbers" total-pages="10" hide-numbers skip-buttons></mo-pagination>
<mo-divider vertical></mo-divider>
<span id="curr-page">Current page: 1 of 10</span>
</div>

<script>
  const pagination = document.querySelector('#numbers');
  const span = document.querySelector('#curr-page');
  pagination.addEventListener('mo-page-change', (event) => {
    const currentPage = event.detail.currentPage;
    span.textContent = `Current page: ${currentPage} of ${pagination.totalPages}`
  })
</script>

import { MOPagination } from '@metsooutotec/modes-web-components/dist/react';

const App = () => <MOPagination totalPages="10" hideNumbers skipButtons></MOPagination>;

If you choose to hide the numbers in the pagination itself, make sure to have another way to display the current page to ensure good UX.

In a card

This example shows how pagination can be used in combination with a card and a list, while listening to the pagination’s mo-page-change event to change the card data programmatically.

Equipment

Product Courier 400i

Condition Perfect

Power draw 2300 watts

<mo-card>
  <div style="font-size: 20px; font-weight: 500; width: 280px" slot="header">Equipment</div>
  <mo-list striped>
    <mo-list-item>
      <span slot="label">Product</span>
      <span id="product-value" slot="value">Courier 400i</span>
    </mo-list-item>
    <mo-list-item>
      <span slot="label">Condition</span>
      <span id="condition-value" slot="value">Perfect</span>
    </mo-list-item>
    <mo-list-item>
      <span slot="label">Power draw</span>
      <span id="power-draw-value" slot="value">2300 watts</span>
    </mo-list-item>
  </mo-list>

  <mo-pagination
    style="display: flex; justify-content: flex-end"
    id="pagination-in-card"
    slot="footer"
    total-pages="20"
  ></mo-pagination>
</mo-card>
<script>
  const pagination = document.getElementById('pagination-in-card');
  const prVal = document.getElementById('product-value');
  const conVal = document.getElementById('condition-value');
  const pdVal = document.getElementById('power-draw-value');

  const prValues = ['Courier 400i', 'Geminex 25', 'Courier 600i', 'Testing unit 232', 'Mock unit 2c'];
  const conValues = ['Perfect', 'Great', 'Good', 'Not available', 'Maintenance'];
  const pdValues = ['2300 watts', '1800 watts', '2800 watts', '0 watts', '130 watts'];

  // index - 1 as currentPage is 1-based
  pagination.addEventListener('mo-page-change', e => {
    prVal.innerHTML = prValues[(e.detail.currentPage - 1) % prValues.length];
    conVal.innerHTML = conValues[(e.detail.currentPage - 1) % conValues.length];
    pdVal.innerHTML = pdValues[(e.detail.currentPage - 1) % pdValues.length];
  });
</script>

import { MOPagination, MOCard, MOList, MOListItem } from '@metsooutotec/modes-web-components/dist/react';
import React, { useState } from 'react';

const App = () => {
  const listValues = [
    { product: 'Courier 400i', condition: 'Perfect', power: '2300 watts' },
    { product: 'Geminex 25', condition: 'Great', power: '1800 watts' },
    { product: 'Courier 600i', condition: 'Good', power: '2800 watts' },
    {
      product: 'Testing unit 232',
      condition: 'Not available',
      power: '0 watts'
    },
    { product: 'Mock unit 2c', condition: 'Maintenance', power: '130 watts' }
  ];

  const [page, setPage] = useState(1);

  return (
    <>
      <MOCard>
        <div style={{ fontSize: '20px', fontWeight: '500', width: '280px' }} slot="header">
          Equipment
        </div>
        <MOList striped>
          <MOListItem>
            <span slot="label">Product</span>
            <span slot="value">{listValues[(page - 1) % listValues.length].product}</span>
          </MOListItem>
          <MOListItem>
            <span slot="label">Condition</span>
            <span slot="value">{listValues[(page - 1) % listValues.length].condition}</span>
          </MOListItem>
          <MOListItem>
            <span slot="label">Power draw</span>
            <span slot="value">{listValues[(page - 1) % listValues.length].power}</span>
          </MOListItem>
        </MOList>
        <MOPagination
          style={{ display: 'flex', justifyContent: 'flex-end' }}
          id="pagination-in-card"
          slot="footer"
          totalPages="20"
          onMoChange={event => {
            setPage(event.detail.currentPage);
          }}
        ></MOPagination>
      </MOCard>
    </>
  );
};

Using the pagination with the table component is a more common use case, but as vanilla HTML does not offer in-line logic to iteratively construct the table based on existing data, the example would be too long. Separating table data into pages should be trivial in e.g., React.

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler

React

Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/pagination/pagination.js';

To import this component as a React component:

import MOPagination from '@metsooutotec/modes-web-components/dist/react/pagination/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/pagination/pagination.js"></script>

Properties

Name	Description	Type	Default
`currentPage` `current-page`	Current page.	`number`	`1`
`defaultPage` `default-page`	Default page to be selected on render.	`number`	`1`
`totalPages` `total-pages`	Total pages in the pagination.	`number`	`1`
`siblingCount` `sibling-count`	Sibling pages next to selected page when ellipsis shown.	`number`	`1`
`size`	Size of the pagination. Defaults to small.	`'small' \| 'medium' \| 'large'`	`'small'`
`skipButtons` `skip-buttons`	Shows the buttons to skip to the first and last page.	`boolean`	`false`
`hideNumbers` `hide-numbers`	Hides all numbers, renders just the chevrons	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	React Event	Description	Event Detail
`mo-page-change`	`onMoPageChange`	Emitted when page changes.	-

Learn more about events.

Parts

Name	Description
`base`	The component’s internal wrapper.

Learn more about customizing CSS parts.

Ask Rocky (Beta)

Examples

Total pages

Default page

Skip to last and first page

Sibling count

Sizes

Hide numbers

In a card

Importing

Properties

Events

Parts