Pagination

This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

<k-pagination
  align="center"
  :details="true"
  :page="5"
  :total="125"
  :limit="10" />

Props

Prop	Type	Default	Description
align	`string` Supported values: left, centre, right	"left"	The align prop makes it possible to move the pagination component according to the wrapper component.
details	`boolean`	false	Show/hide the details display with the page selector in the center of the two navigation buttons.
dropdown	`boolean`	true
keys	`boolean`	false	Enable/disable keyboard navigation
limit	`number`	10	Sets the limit of items to be shown per page
nextLabel	`string`	function() { return window.panel.$t("next"); }	Sets the label for the `next` arrow button
page	`number`	1	Sets the current page
pageLabel	`string`	function() { return window.panel.$t("pagination.page"); }	Sets the label for the page selector
prevLabel	`string`	function() { return window.panel.$t("prev"); }	Sets the label for the `prev` arrow button
total	`number`	0	Sets the total number of items that are in the paginated list. This has to be set higher to 0 to activate pagination.
validate	`func`	function() { return Promise.resolve(); }

Methods

Method	Parameters	Description
goTo	page	Jump to the given page
next	–	Jump to the next page
prev	–	Jump to the previous page

Events

Event	Description	Passes
paginate		–

Events

paginate

Listening to the paginate event is the most straight forward way to react to the pagination component.

<template>
  <section>
    <h2>Paginated items</h2>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.title }}</li>
    </ul>
    <k-pagination :total="total" @paginate="fetch" />
  </section>
</template>

<script>
export default {
  data() {
    total: 0,
    items: []
  },
  created() {
    this.fetch({ page: 1 });
  },
  methods: {
    fetch(pagination) {
      return this.$api
        .get('/projects.json', { page: pagination.page })
        .then(response => {
          this.items = response.data;
          this.total = response.total;
        });
    }
  }
};
</script>

CSS classes

.k-pagination