Pager

When to use it

The Pager component is a JS component, used to "hide and show" elements that acts as "pages" of content, such as rows in long tables or items in long lists. It provides a way for users to move between different pages of data without having to load all the content at once.

Variants

The Pager component can be customized by setting the data-per-page attribute to control the number of items per page. The default is "10" if the attribute is missing. The component relies on the file components.pager.js (automatically built and bundled within the UI framework) to achieve the actual paging behavior.

What it looks like

Code examples

Pager

<table class="c-table" data-pagination data-per-page="10">
    <thead class="c-table__head">
        <tr class="c-table__row">
            <th scope="col">Heading cell 1</th>
            <th scope="col">Heading cell 2</th>
        </tr>
    </thead>
    <tbody class="c-table__body">
        <tr class="c-table__row paginate">
            <td>Ut enim ad minim veniam, quis  ex ea commodo consequat.</td>
            <td>Ut enim ad minim veniam, quis nostrud ea commodo consequat.</td>
        </tr>
        …
    </tbody>
</table>

JS output

<div class="c-pager c-form-control c-form-control--group">
    <button type="button" class="c-button c-pager__page c-pager__page--selected">1</button>
    <button type="button" class="c-button c-pager__page">2</button>
    <button type="button" class="c-button c-pager__page">3</button>
</div>

Accessibility notes

This component could use a bit of oversight when it comes to accessibility. E.g. it does not currently add aria-label attributes to provide additional context, such as "Page 1". If using only the markup part of this component (see JS output above) in e.g. a Vue pager component, consider adding ARIA attributes there.