How to catch scrolling event on v-data-table component?

Question

Is there a way to catch scrolling event on v-data-table component of Vuetify frmework?

I mean the case when table has a fixed height so the table body will scroll.

<v-data-table
  fixed-header
  :height=400
  :headers="headers"
  :items="desserts"
  item-key="name"
  disable-pagination
  hide-default-footer
></v-data-table>

https://codepen.io/Zurab-D/pen/yLXOyRJ

score 3 · Accepted Answer · answered Jul 12 '22 at 21:07

All you have to do is target the table DOM element after the Vue mounts. Just use "this" and go from there...check out the mounted hook below.

<template lang="html">
  <div class="graph-content">
    <v-data-table v-show="topArtistUplifts.length" id="topUpliftTable" class="data-table-custom"
      :headers="tableHeaders" :items="topArtistUplifts" fixed-header :height="tableHeight"
      :items-per-page="-1" hide-default-footer :mobile-breakpoint="0">

      <template v-slot:item.artist_name="{ item }">
        <span>
          <router-link :to="{ name: 'Artist', query: { artistId: item.artist_id, ...linkQuery }}"
            class="artist-link inline">
              {{ item.artist_name }}
          </router-link>
        </span>
      </template>
      <template v-slot:item.absolute_number="{ item }">
        <span>+{{ getAbbreviatedNum(item.absolute_number) }}</span>
      </template>
      <template v-slot:item.relative_number="{ item }">
        <span :class="percentChangeStyle(item.relative_number * 100)">{{ percentChangeFormat((item.relative_number * 100).toFixed(2)) }}</span>
      </template>
    </v-data-table>
    <div class="no-notifs full-height" v-show="!topArtistUplifts.length">
      No uplift to report yet – please check back soon.
    </div>
    <Loader v-if="updating.topArtistUplifts" :height="50"/>
  </div>
</template>

<script>
methods: {
  handleUpliftScroll(e) {
    console.log('yoooo i'm a table scroll event: ', e)
  },
},
mounted() {
  const tableWrapper = this.$el.children[0].children[0]
  tableWrapper.addEventListener('scroll', this.handleUpliftScroll)
}
</script>

In vue2 you can look for class v-data-table__wrapper document.querySelector('.v-data-table__wrapper') — Lars Ladegaard, Aug 12 '22 at 10:27

score 1 · Answer 2 · answered Sep 01 '21 at 20:13

here is the code:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    desserts: Array.from({ length: 5000 }).map((v, k) => ({
        name: `#${k}`,
        calories: 518,
    })),
    headers: [
      { text: 'Dessert', value: 'name' },
      { text: 'Calories', value: 'calories' },
    ],
  }),
  mounted() {
    document.addEventListener('wheel', this.onScroll)
  },
  methods: {
    onScroll : function(){
      console.log('scroll')
    }
  }
})

I meant there must be a built-in way for this component. But if not, then this method is also very good, thanks — Zurab, Sep 02 '21 at 08:54

How to catch scrolling event on v-data-table component?

2 Answers2