vue-paginator

A responsive paginator for Vue 3 based on vue-router and tailwind. See demo at stackblitz.

Usage

var pagination = ref({
  offset: 0,
  limit: 15,
});

var items = ref(
  Array.from({ length: 300 })
);

var paginationItems = computed(() => {
  return items.value.slice(
    pagination.value.offset,
    pagination.value.offset + pagination.value.limit);
});

var selectPage = ({ offset }) => (
  pagination.value.offset = offset;
);

<!-- Iteration -->

<tr v-for="item of paginationItems" :key="item">
  <td>Name {{ item }}</td>
  <td>Age {{ item }}</td>
  <td>Address {{ item }}</td>
</tr>

Without Controls, and 5 range elements

<Paginator @select="selectPage"
    :page-range="5"
    :limit="pagination.limit"
    :total-items="items.length" />

With Controls, and 3 range elements

<PaginatorControls @select="selectPage"
    :limit="pagination.limit"
    :total-items="items.length" />

Responsive Paginator

It will render page range items depending on the window size.

<PaginatorResponsive @select="selectPage"
  :limit="pagination.limit"
  :total-items="items.length" />

Run

npm install
npm run build
npm run dev