Skip to content

feat(VDataTableVirtual): expose containerRef for scroll container access#22734

Open
mixelburg wants to merge 1 commit intovuetifyjs:masterfrom
mixelburg:feat/data-table-virtual-expose-container-ref
Open

feat(VDataTableVirtual): expose containerRef for scroll container access#22734
mixelburg wants to merge 1 commit intovuetifyjs:masterfrom
mixelburg:feat/data-table-virtual-expose-container-ref

Conversation

@mixelburg
Copy link
Copy Markdown
Contributor

Description

Resolves #22647

VDataTableVirtual manages its own internal scroll container (.v-table__wrapper), but the element was not accessible through any public API. This made implementing reliable infinite scroll or custom scroll detection unnecessarily brittle — users had to reach into internals via querySelector('.v-table__wrapper') which can break at any time.

This PR exposes containerRef in the component's public API (alongside the existing calculateVisibleItems and scrollToIndex).

Usage

<template>
  <v-data-table-virtual ref="table" :items="items" :headers="headers" height="400">
    <template #tfoot>
      <div ref="sentinel" />
    </template>
  </v-data-table-virtual>
</template>

<script setup>
const table = ref()
const sentinel = ref()

onMounted(() => {
  const observer = new IntersectionObserver(([entry]) => {
    if (entry.isIntersecting) loadMore()
  }, { root: table.value.containerRef })

  observer.observe(sentinel.value)
})
</script>

Changes

  • Exposed containerRef in VDataTableVirtual's return value (matches how VVirtualScroll already works)
  • Added API doc entry in VDataTableVirtual.json

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] v-data-table-virtual: Expose scroll container element or an @scroll-end event for infinite scroll use cases

1 participant