@lion/ui/docs/components/pagination/use-cases.md

A package of extendable web components

---
parts:
  - Pagination
  - Use Cases
title: 'Pagination: Use Cases'
eleventyNavigation:
  key: 'Pagination: Use Cases'
  order: 20
  parent: Pagination
  title: Use Cases
---

# Pagination: Use Cases

```js script
import { html } from '@mdjs/mdjs-preview';
import '@lion/ui/define/lion-pagination.js';
```

## Without current defined

```js preview-story
export const withoutCurrentPage = () => {
  return html` <lion-pagination count="20"></lion-pagination> `;
};
```

## Ensure a count value

Be sure to set a count value or you will get an "empty" pagination.

```js preview-story
export const ensureCount = () => {
  return html` <lion-pagination></lion-pagination> `;
};
```

### Methods

There are the following methods available to control the pagination.

- `next()`: move forward in pagination
- `previous()`: goes back to pagination
- `first()`: to the first page
- `last()`: to the last page
- `goto(pageNumber)`: to the specific page

```js preview-story
export const methods = ({ shadowRoot }) => {
  setTimeout(() => {
    shadowRoot.getElementById('pagination-method-demo').innerText =
      shadowRoot.getElementById('pagination-method').current;
  });

  return html`
    <p>The current page is: <span id="pagination-method-demo"></span></p>
    <lion-pagination
      id="pagination-method"
      count="100"
      current="75"
      @current-changed=${e => {
        const paginationState = shadowRoot.getElementById('pagination-method-demo');
        paginationState.innerText = e.target.current;
      }}
    ></lion-pagination>
    <section style="margin-top:16px">
      <button @click="${() => shadowRoot.getElementById('pagination-method').previous()}">
        Previous
      </button>
      <button @click="${() => shadowRoot.getElementById('pagination-method').next()}">Next</button>
      <br />
      <br />
      <button @click="${() => shadowRoot.getElementById('pagination-method').first()}">
        First
      </button>
      <button @click="${() => shadowRoot.getElementById('pagination-method').last()}">Last</button>
      <br />
      <br />
      <button @click="${() => shadowRoot.getElementById('pagination-method').goto(55)}">
        Go to 55
      </button>
    </section>
  `;
};
```

### Event

`lion-pagination` fires an event on button click to notify the component's current state. It is useful for analytics purposes or to perform some actions on page change.

- `@current-changed`: triggers when the current page is changed

```js preview-story
export const event = ({ shadowRoot }) => {
  setTimeout(() => {
    shadowRoot.getElementById('pagination-event-demo-text').innerText =
      shadowRoot.getElementById('pagination-event-demo').current;
  });

  return html`
    <p>The current page is: <span id="pagination-event-demo-text"></span></p>
    <lion-pagination
      id="pagination-event-demo"
      count="10"
      current="5"
      @current-changed=${e => {
        const paginationState = shadowRoot.getElementById('pagination-event-demo-text');
        paginationState.innerText = e.target.current;
      }}
    ></lion-pagination>
  `;
};
```