Appearance
Paging
The FTPaging component is used to display pagination info at the bottom of a Table.
Usage
Paging contain info on the number of item which are being displayed, as well as some controls to move between pages.
Composition api (script setup)
vue
<script setup lang="ts">
import { FTPaging } from '@fasttrack-solutions/vue-components-lib';
</script><script setup lang="ts">
import { FTPaging } from '@fasttrack-solutions/vue-components-lib';
</script>Options api
vue
<script>
import { FTPaging } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTPaging
}
}
</script><script>
import { FTPaging } from '@fasttrack-solutions/vue-components-lib';
export default {
components: {
FTPaging
}
}
</script>Basic usage
vue
<script lang="ts" setup>
import { ref } from 'vue';
import { FTPaging } from '../components';
const currentPage = ref(1);
const pageSize = ref(5);
const totalItemsCount = ref(100);
</script>
<template>
<FTPaging
v-model="currentPage"
v-model:pageSize="pageSize"
:totalItemsCount
/>
</template><script lang="ts" setup>
import { ref } from 'vue';
import { FTPaging } from '../components';
const currentPage = ref(1);
const pageSize = ref(5);
const totalItemsCount = ref(100);
</script>
<template>
<FTPaging
v-model="currentPage"
v-model:pageSize="pageSize"
:totalItemsCount
/>
</template>Props
In order to modify the default behavior, FTPaging accepts custom helper props:
| Name | Default | Description |
|---|---|---|
totalItemsCount | 0 | Total number of items |
pageSize | 5 | Number of items per page |
modelValue | 1 | Current page number |
showQuickJumper | true | Enable quick page navigation |
simple | false | Use a simplified pagination layout |
pagingOptions | [5, 10, 25, 50, 100] | Available page size options |
showPagingOptions | false | Control the display of paging size options |
scrollableContainerSelector | 'body' | Selector for the scrollable container |
outsideBoard | false | Display pagination controls outside the board |