Kongponents

# Pagination

KPagination is a component used for pagination.

# Props

# totalCount - required

A total number of items inside the paginated data source.

<KPagination :totalCount="50"/>

# pageSizes

A list of page sizes that the user can choose from.

Prop is an Array of numbers. The default page sizes are: [15, 30, 50, 75, 100].

You can provide custom page sizes. The first one in the array will be the initial page size unless custom initialPageSize is set.

<KPagination :totalCount="100" :pageSizes="[10, 20, 30, 40]"/>

# initialPageSize

An optional initial page size.

Prop is a Number. If the value is not set, the first one of the available pageSizes is selected as a page size.

<KPagination :totalCount="100" :pageSizes="[10, 20, 30, 40]" :initialPageSize="20"/>

# items

Optional array of items that can be provided for easy pagination. Slice of this array with visible items is returned as visibleItems inside the pageChanged event.

Visible letters: a b c 
<template>
  <div>
    <span><b>Visible letters: </b></span>
    <span v-for="number in data.visibleLetters">{{ number }} </span>
    <KPagination 
      :items="data.letters"
      :totalCount="data.letters.length" 
      :pageSizes="[3]" 
      @pageChanged="({visibleItems}) => data.visibleLetters = visibleItems"/>
  </div>
</template>

export default {
  data: {
    return {
      letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], 
      visibleLetters: ['a', 'b', 'c']
    };
  }
}

# neighbors

A number that sets the neighboring pages visible to the left and right of the center page when ellipsis are visible on both sides. By default, 1 neighbor is shown. For bigger sets of data we want user to see more pages to go through the pagination faster.

<KPagination :totalCount="1000" :pageSize="15" neighbors="2"/>

# disablePageJump

Restrict navigation to only previous / next page. Defaults to false.

Visible letters: a b c 
<template>
  <div>
    <span><b>Visible letters: </b></span>
    <span v-for="number in data.visibleLetters">{{ number }} </span>
    <KPagination 
      :items="data.letters"
      :totalCount="data.letters.length" 
      :pageSizes="[3]" 
      :disablePageJump="true"
      @pageChanged="({visibleItems}) => data.visibleLetters = visibleItems"/>
  </div>
</template>

export default {
  data: {
    return {
      letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], 
      visibleLetters: ['a', 'b', 'c']
    };
  }
}

# currentPage

Manually control the current page instead of using native handling. If using this prop you MUST keep it up-to-date using the @pageChanged event in order to remain reactive to clicking the prev, next, and specific page buttons.

Visible letters: d e f 
<template>
  <div>
    <span><b>Visible letters: </b></span>
    <span v-for="number in data.visibleLetters">{{ number }} </span>
    <KPagination 
      :items="data.letters"
      :totalCount="data.letters.length" 
      :pageSizes="[3]" 
      :currentPage="currPage"
      @pageChanged="({visibleItems, page}) => { 
        data.visibleLetters = visibleItems 
        currPage = page 
      }"/>
  </div>
</template>

export default {
  data () {
    return {
      currPage: 2
    }
  }
}
</script>

# Usage

# Events

  • pageChanged - emitted when the page has been changed. The event provides following information. All of the numbers are sent in a human-understandable base (starting at 1 instead of 0) to be used directly in UI.

    {
  page,         // Current page
  pageCount,    // Max number of pages
  firstItem,    // Index of the first item visible on the current page
  lastItem,     // Index of the last item visible on the current page
  visibleItems  // A slice of `items` array visible on the current page
}

  • pageSizeChanged - emitted when the number of items per page has been changed

    {
  pageSize,     // Number of items on a single page
  pageCount,    // Max number of pages
}

# Example

Cool names list

Alice
Bob
Charlie 
<template>
  <div>
    <KCard title="Cool names list">
      <template #body>
        <div v-for="name in data.visibleNames">
        {{name}}
        </div>
      </template>
    </KCard>

    <KPagination 
      :items="data.names"
      :totalCount="data.names.length" 
      :pageSizes="[3, 4, 5]" 
      @pageChanged="({visibleItems}) => data.visibleNames = visibleItems"/>
  </div>
</template>

<script>
export default {
  data () {
    const names = [
      'Alice', 'Bob', 'Charlie', 
      'Derek', 'Ellie', 'Frank', 
      'George', 'Helen', 'Ingrid'
    ]
    return {
      names
      visibleNames: names.slice(0,3);
      page: 1
    }
  }
}
</script>

# Theming

Variable Purpose
--KPaginationBorderColor KPagination border color

An Example of changing the border color of KPagination to lime might look like:

Note: We are scoping the overrides to a wrapper in this example

<template>
  <div class="KPagination-wrapper">
    <KPagination />
  </div>
</template>

<style>
.KPagination-wrapper {
  --KPagination-wrapperBorderColor: lime;
}
</style>

← Popover →