[Feature Request] Missing "items-length" property in v-data-iterator component

[lucasmcht]

Problem to solve

Currently, pagination has to be done locally, while it may be required in some use cases to paginate using API. Making this property available would greatly simplify this.

Proposed solution

Add 'items-length' property, with the same as in the 'v-data-table-server' component.

[Maqsyo]

I would really appreciate this feature

[lucasmcht]

The fact that this old functionality is no longer present is really handicapping for us, if we propose a PR to add an "itemsLength" prop, will it only be read or is it not in the objectives of Vuetify to add this functionality?

[kor3k]

same problem applies to v-data-table

#20035 (comment)

[johnleider]

Resurrecting this issue. Can someone please show me a playground of how you would use this? Is it as simple as just adding a new prop and forcing itemsLength computed property to be either it or flatItems?

vuetify/packages/vuetify/src/components/VDataIterator/VDataIterator.tsx

Line 124 in 9d30fa5

const itemsLength = computed(() => flatItems.value.length)

[lucasmcht]

@johnleider Yes that's the idea, currently we apply the following patch (using patch-package) to make it work :

index bdf0dab..54cfd2c 100644
--- a/node_modules/vuetify/lib/components/VDataIterator/VDataIterator.mjs
+++ b/node_modules/vuetify/lib/components/VDataIterator/VDataIterator.mjs
@@ -88,7 +88,7 @@ export const VDataIterator = genericComponent()({
     const {
       flatItems
     } = useGroupedItems(sortedItems, groupBy, opened);
-    const itemsLength = computed(() => flatItems.value.length);
+    const itemsLength = computed(() => props.itemsLength ?? flatItems.value.length);
     const {
       startIndex,
       stopIndex,
@@ -102,14 +102,16 @@ export const VDataIterator = genericComponent()({
       itemsPerPage,
       itemsLength
     });
-    const {
-      paginatedItems
-    } = usePaginatedItems({
-      items: flatItems,
-      startIndex,
-      stopIndex,
-      itemsPerPage
-    });
+    let paginatedItems;
+    if (!!props.itemsLength) paginatedItems = flatItems;
+    else {
+      paginatedItems = usePaginatedItems({
+        items: flatItems,
+        startIndex,
+        stopIndex,
+        itemsPerPage
+      }).paginatedItems;
+    }
     const paginatedItemsWithoutGroups = computed(() => extractRows(paginatedItems.value));
     const {
       isSelected,
diff --git a/node_modules/vuetify/lib/components/VDataIterator/composables/items.mjs b/node_modules/vuetify/lib/components/VDataIterator/composables/items.mjs
index 3bfeaf7..28ca1bb 100644
--- a/node_modules/vuetify/lib/components/VDataIterator/composables/items.mjs
+++ b/node_modules/vuetify/lib/components/VDataIterator/composables/items.mjs
@@ -15,6 +15,10 @@ export const makeDataIteratorItemsProps = propsFactory({
     type: [String, Array, Function],
     default: null
   },
+  itemsLength: {
+    type: Number,
+    default: null,
+  },
   returnObject: Boolean
 }, 'DataIterator-items');
 export function transformItem(props, item) {

[adamskeeled]

@johnleider This seems to be stagnant, any idea when this could go forward? Ran into this issue yesterday

[J-Sek]

What's the use case? Lazy loading collection? Fully server-side pagination & filtering? Without understanding the use case I am inclined to classify this as a misunderstanding.

• pagination can be easily instructed to have any length
• alternatively, you can populate items with dummy items (placeholders) to be swapped once they get loaded
  ...either way, I don't see how faking collection size inside the component helps achieve anything. I would assume you would need much more than this in a realistic scenario.

[lucasmcht]

Hello @J-Sek,

Our use case is quite simple, we have a paginated REST API endpoint, and we are using it to display a certain amount of items on the page. The endpoint returns the total amount of items, so that the client can compute the next request to do, and we want to pass this "total" to the v-data-iterator, so that it can use it for it's internal pagination. The v-data-iterator component already have internal pagination, we just want to be able to control the way that the total amount of items is computed. This feature was already included back in vuetify 2.x.x.

Our final use case is server side pagination, although I think that both the use cases that you mentionned are important to have for this component either way.

[kor3k]

same use case as @lucasmcht .

wanted to list & paginate server data with v-data-iterator. it was not possible, so i tried to use v-data-table(-server) and override bottom slot. it was not possible too because none of these exposes slot props itemsLength there.