Pagination

To add pages, import the Pager component and specify values of the required attributes:

• total - the number of all data rows to be displayed
• pageSize - the number of rows per page
• value - the current page (starting from 1); set to 1 by default

<script setup>
    import { Pager } from "@svar-ui/vue-core";
    import { Grid } from "@svar-ui/vue-grid";
    import { getData } from "./common/data";
    const { allData, columns } = getData();

    const data = ref([]);
    function setPage(ev) {
        const { from, to } = ev;
        data.value = allData(from, to);
    }
    setPage({ from: 0, to: 8 });
</script>

<template>
  <Pager :total="allData.length" :pageSize="8" :onchange="setPage" />
  <Grid :data="data" :columns="columns" />
</template>

---

Related sample: Pagination