Use a composable function to customize the table footer of vue3-easy-data-table
Tags: vue3, vue, composable, hook
Published: 2022-07-27 14:53:00

Before you start this tutorial, please make sure you have known how to use `vue3-easy-data-table`, you can check [here](https://hc200ok.github.io/vue3-easy-data-table-doc/) 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
```

## Demo:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e89i6ft75uclwpys0oyt.gif)

## Script part:
```vue
<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>
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc28gjll4icnvqkowgm6.png)
 

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:
```vue
<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>
```

## Style part
```scss
<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>

```

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/