jio-pagination

Props

Prop name	Description	Type	Values
currentPage	The current page number.	number	-
totalPages	The total number of pages.	number	-
setPage	The function triggered by page navigation buttons	TSFunctionType	-

Slots

Name	Description	Bindings
prev-page-icon	Place an <svg> or <jio-icon> inside me
next-page-icon	Place an <svg> or <jio-icon> inside me

View on Gitlab

General

This is the standard pagination component.

View design in Figma

Code examples

<template>
  <div class="jio-core">
    <div>
      <ul>
        <li v-for="user in paginatedResults[currentPage - 1]">
          {{ user.id }} - {{ user.name }}
        </li>
      </ul>
    </div>
    <div>
      <jio-pagination
        v-if="paginatedResults.length > 0"
        :currentPage="currentPage"
        :totalPages="paginatedResults.length"
        :setPage="setPage"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";

// Mock results
interface User {
  id: number;
  name: string;
}

function createMockResults(): User[] {
  const results: User[] = [];

  for (let i = 0; i < 200; i++) {
    results.push({
      id: i,
      name: `User ${i}`,
    });
  }

  return results;
}

const searchResults = createMockResults();
const currentPage = ref(1);
const paginatedResults = chunk(searchResults, 10);

function setPage(index: number): void {
  currentPage.value = index;
}

// This function is available in the core utils
// It's copied here so Styleguidist can use it too
function chunk<T>(array: T[], chunkSize: number): T[][] {
  return array.reduce((acc, elem, index) => {
    if (index % chunkSize == 0) {
      acc.push([]);
    }

    acc[acc.length - 1].push(elem);

    return acc;
  }, [] as T[][]);
}
</script>

jio-pagination ​

Props ​

Slots ​

General ​

Code examples ​

jio-pagination

Props

Slots

General

Code examples