[Feature Request] VDataTable - more pagination values in slot props

[Harm-Nullix]

ItemsLength, startIndex & stopIndex are not in slot props but are really handy when making pagination your own.

https://github.com/vuetifyjs/vuetify/blob/ae7a66769543bd69bbf75761dec0baf335dd334f/packages/vuetify/src/components/VDataTable/composables/paginate.ts#L27C1-L30C27

An workaround is using the inject of the vuetify:data-table-pagination that is set inside the usePagination composable, but that is an internal working

[jcjp]

Could you show us how do you do it using veutfiy:data-table pagination and how would you expect the proposed slot.

[Harm-Nullix]

Sure,
I am using this (simplified)

<template>
  <div class="v-data-table-footer data-table-footer pa-1 border-t">
    <div class="v-data-table-footer__items-per-page">
      <span>Rows per page:</span>
      <v-select
        hide-details
        :items="pageItems"
        :model-value="pagination.itemsPerPage.value"
        @update:model-value="pagination.setItemsPerPage(Number($event))"
      >
        <template #selection="{ item }">
          <span>{{ item.title }}</span>
        </template>
      </v-select>
    </div>
    <div class="v-data-table-footer__info">
      <div>
        {{!pagination.itemsLength.value ? 0 : pagination.startIndex.value + 1}}-{{pagination.stopIndex.value}} of {{pagination.itemsLength.value}}
      </div>
    </div>
    <div class="v-data-table-footer__pagination">
      <v-pagination v-model="pagination.page.value" density="comfortable" :length="pagination.pageCount.value" show-first-last-page :total-visible="0" variant="plain" />
    </div>
  </div>
</template>
<script setup lang="ts">
  // data-table-footer
  import type { TemplateProps } from '~/frontend/composables/useDataTable'

  defineProps<TemplateProps>()
  const pagination = inject(Symbol.for('vuetify:data-table-pagination'))

  const pageItems = computed(() => [
    { title: '5', value: 5 },
    { title: '15', value: 15 },
    { title: '25', value: 25 },
    { title: '50', value: 50 },
    { title: 'All' value: -1 },
  ])
</script>

And then included like:

<v-data-table>
   <template  #bottom="bottomBindings">
      <slot name="bottom" v-bind="bottomBindings">
        <data-table-footer v-bind="bottomBindings" />
      </slot>
    </template>
</v-data-table>