> ## Documentation Index
> Fetch the complete documentation index at: https://dev.writer.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Pagination

A component that can help you paginate records, for example from a Repeater or a DataFrame.

<img src="https://mintcdn.com/writer/mFPGVlLcGxKIh_Y1/framework/public/components/pagination.png?fit=max&auto=format&n=mFPGVlLcGxKIh_Y1&q=85&s=242ed1a2e60edda6f05cc508ad4f4bfd" width="798" height="140" data-path="framework/public/components/pagination.png" />

## Fields

<table className="componentFields">
  <thead>
    <th>Name</th>
    <th>Type</th>
    <th class="desc">Description</th>
    <th>Options</th>
  </thead>

  <tbody>
    <tr>
      <td>Page</td>
      <td>Number</td>
      <td>The current page number.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Page Size</td>
      <td>Number</td>
      <td>The number of items per page.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Total Items</td>
      <td>Number</td>
      <td>The total number of items</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Page Size Options</td>
      <td>Text</td>
      <td>A comma-separated list of page size options. If it's empty, the user can't change the page size. Set your default page size as the first option.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Show All Option</td>
      <td>Boolean</td>
      <td>Show an option to show all records.</td>

      <td>
        <span>-</span>
      </td>
    </tr>

    <tr>
      <td>Jump To</td>
      <td>Boolean</td>
      <td>Show an option to jump to a specific page.</td>

      <td>
        <span>-</span>
      </td>
    </tr>
  </tbody>
</table>

## Events

<AccordionGroup>
  <Accordion title="wf-change-page" icon="code">
    Fires when the user pick a page

    ```python theme={null}
    def handle_page_change(state, payload):
    page = payload
    state["page"] = page

    records = _load_records_from_db(start = state["page"] * state["pageSize"], limit = state["pageSize"])
    # update a repeater
    state["highlighted_members"] = {r.id: r for r in records}
    ```
  </Accordion>

  <Accordion title="wf-change-page-size" icon="code">
    Fires when the user change the page size.

    ```python theme={null}
    def handle_page_size_change(state, payload):
    state['pageSize'] = payload

    records = _load_records_from_db(start = state["page"] * state["pageSize"], limit = state["pageSize"])
    # update a repeater
    state["highlighted_members"] = {r.id: r for r in records}
    ```
  </Accordion>
</AccordionGroup>

<events />