Moxi Design System

# Pagination

The mx-pagination component is designed to provide pagination controls, particularly for Data Tables.

An mxPageChange event is emitted whenever the page or rows-per-page are changed. The Event.detail is an object containing the new page and rowsPerPage.

<mx-pagination
  :page="listA.page"
  :rows-per-page="listA.rowsPerPage"
  total-rows="150"
  @mxPageChange="e => listA = e.detail"
/>
<mx-pagination
  :page="listB.page"
  :rows-per-page="listB.rowsPerPage"
  total-rows="200"
  @mxPageChange="e => listB = e.detail"
/>
1
2
3
4
5
6
7
8
9
10
11

# mx-pagination

# Properties

Property Attribute Description Type Default
disableNextPage disable-next-page Disable the next page button (i.e. when the last page was loaded from an API) boolean false
disabled disabled Disable the page buttons (i.e. when loading results) boolean false
page page number 1
rowsPerPage rows-per-page number 100
rowsPerPageOptions -- number[] [10, 25, 50, 100]
totalRows total-rows Total number of results. If not provided, the page number and last-page buttons will be hidden number undefined

# Events

Event Description Type
mxPageChange Emitted when the page or rows-per-page changes CustomEvent<{ rowsPerPage: number; page: number; }>

# Dependencies

# Used by

# Depends on

# Graph

graph TD;
  mx-pagination --> mx-menu
  mx-pagination --> mx-menu-item
  mx-menu-item --> mx-checkbox
  mx-table --> mx-pagination
  style mx-pagination fill:#f9f,stroke:#333,stroke-width:4px
1
2
3
4
5
6

If you are having trouble setting a prop or adding an event listener, refer to this page.

← Pickers →