HC200ok / vue3-easy-data-table

A customizable and easy-to-use data table component made with Vue.js 3.x
MIT License
536 stars 105 forks source link

how to get the number of hits by search? #340

Open xpediteur opened 11 months ago

xpediteur commented 11 months ago

Having a vue3-easy-data-table with search options. Now I want to display the number of hits by search. Which variable or array can I use for this to get the length of the array? I didn't find anything about this in the documentation. Thanks.

<EasyDataTable :headers="headers" :items="statisticArray" :rows-per-page="50" buttons-pagination alternating :search-field="searchField" :search-value="searchValue">

ctissier commented 7 months ago

I'm not sure what you meant by "hits", but if you are (were) looking for the number of results of a search, you can check the clientItemsLength property of the dataTable ref.

<script setup lang="ts">
    //...
    const productsDataTable = ref()
    const itemsCount = computed(() => productsDataTable.value?.clientItemsLength);
    //...
</script>

<template>
    <!-- ... -->
    Filtered/searched items count : {{ itemsCount }}
    <EasyDataTable ref="productsDataTable" ... />
    <!-- ... -->
</template>

If it helps, here is what I believe are all the exposed variables/properties :

currentPageFirstIndex
currentPageLastIndex
clientItemsLength
maxPaginationNumber
currentPaginationNumber
isLastPage
isFirstPage
nextPage
prevPage
updatePage
rowsPerPageOptions
rowsPerPageActiveOption
updateRowsPerPageActiveOption