DEV Community

HC
HC

Posted on • Edited on

Use a composable function to customize the table footer of vue3-easy-data-table

#vue3 #vue #composable #hook

Before you start this tutorial, please make sure you have known how to use vue3-easy-data-table, you can check here for the document.

First of all, we need to install and import use-vue3-easy-data-table which provides customization related composable functions.

 npm install use-vue3-easy-data-table
Enter fullscreen mode Exit fullscreen mode

Demo:

Image description

Script part: 

 <script lang="ts" setup> import type { Header, Item } from "vue3-easy-data-table"; import { computed, ref } from "vue"; import { mockClientItems } from "../mock"; import { usePagination } from "use-vue3-easy-data-table"; import type { UsePaginationReturn } from "use-vue3-easy-data-table"; const dataTable = ref(); const { currentPageFirstIndex, currentPageLastIndex, clientItemsLength, maxPaginationNumber, currentPaginationNumber, isFirstPage, isLastPage, nextPage, prevPage, updatePage, }: UsePaginationReturn = usePagination(dataTable); const headers: Header[] = [ { text: "Name", value: "name" }, { text: "Address", value: "address" }, { text: "Height", value: "height", sortable: true }, { text: "Weight", value: "weight", sortable: true }, { text: "Age", value: "age", sortable: true }, { text: "Favourite sport", value: "favouriteSport" }, { text: "Favourite fruits", value: "favouriteFruits" }, ]; const items: Item[] = mockClientItems(200); </script>
Enter fullscreen mode Exit fullscreen mode

We can see from the above that firstly we use a variable called dataTable to obtain the reference of table DOM elements. Then we use dataTable as a parameter of the usePagination which is a composable function returns table footer related variables and functions:

Image description

The variables usePagination returns are all reactive, for example, if you call the nextPage function, then the currentPageFirstIndex, currentPageLastIndex and currentPaginationNumber variables will update, so finally you can use these variables in template and write style code to customize your own table footer:

Template part: 

 <template> <EasyDataTable ref="dataTable" :headers="headers" :items="items" :rows-per-page="10" hide-footer /> <div class="customize-footer"> <div class="customize-index"> Now displaying: {{currentPageFirstIndex}} ~ {{currentPageLastIndex}} of {{clientItemsLength}} </div> <div class="customize-buttons"> <span v-for="paginationNumber in maxPaginationNumber" class="customize-button" :class="{'active': paginationNumber === currentPaginationNumber}" @click="updatePage(paginationNumber)" > {{paginationNumber}} </span> </div> <div class="customize-pagination"> <button class="prev-page" @click="prevPage" :disabled="isFirstPage">prev page</button> <button class="next-page" @click="nextPage" :disabled="isLastPage">next page</button> </div> </div> </template>
Enter fullscreen mode Exit fullscreen mode

Style part 

 <style scoped> .customize-footer { margin: 5px; display: flex; flex-direction: column; align-items: center; } .customize-footer div { margin: 5px; } .customize-button { display: inline-block; width: 20px; height: 20px; text-align: center; border-radius: 100%; cursor: pointer; padding: 3px; line-height: 20px; } .customize-button.active { color: #fff; background-color: #3db07f; } .customize-pagination button { margin: 0 5px; cursor: pointer; } </style>
Enter fullscreen mode Exit fullscreen mode

If you are interested about vue3-easy-data-table, please check the document here: https://hc200ok.github.io/vue3-easy-data-table-doc/

And very thankful if you can give me a Github ⭐ for supporting me, repository link：https://github.com/HC200ok/vue3-easy-data-table/

Top comments (0)