VirtualScroller not working with DataTable

[eboileau]

Hi, I'm sorry to insist, but I'm stuck, I don't know what is wrong. Virtual Scroll works with DataTable on Primevue here: https://primevue.org/datatable/#virtualscroll, but does NOT work with Tailwind Primevue here: https://tailwind.primevue.org/datatable/#virtualscroll. Try it out here: https://stackblitz.com/edit/9ywajd-dnq98z?file=src%2Fmain.js, adding app.use(PrimeVue, { unstyled: true, ripple: true }); breaks the virtual scroll on the table.

I can use VirtualScroller alone with or without unstyled: true, but not DataTable with virtual scroll.

On #108, you suggested to use pt. I can pass styles, yes, but the functionality is not there.

I would greatly appreciate your advice on how to use VirtualScroller with DataTable.

---

├── @rushstack/eslint-patch@1.7.2
├── @vitejs/plugin-vue@4.6.2
├── @vue/eslint-config-prettier@7.1.0
├── @vue/test-utils@2.4.4
├── autoprefixer@10.4.17
├── axios@1.6.7
├── eslint-plugin-vue@9.22.0
├── eslint@8.57.0
├── jsdom@21.1.2
├── pinia@2.1.7
├── postcss@8.4.35
├── prettier@2.8.8
├── primeicons@6.0.1
├── primevue@3.49.1
├── tailwindcss@3.4.1
├── vee-validate@4.12.5
├── vite-svg-loader@4.0.0
├── vite@4.5.2
├── vitest@0.29.8
├── vue-router@4.3.0
└── vue@3.4.20

[eboileau]

Any updates? Virtual Scroll still does not work with DataTable on Tailwind Primevue.

[aseilerhara]

Same issue here.

To be more precise, in my case it seems to work on Chrome, but not on Firefox. Nothing appears (same as the example on the doc https://tailwind.primevue.org/datatable/#virtualscroll.

In comparison with the styled version, I notice a missing style display: flex in <tbody data-pc-section="virtualscrollerspacer"></tbody>.

I tried to add it via Pass Through and it seems to work. At least something appears on Firefox.

<script setup>
const passThrough = {
  virtualScrollerSpacer: {
    class: 'flex'
  }
}
</script>
<template>
  <DataTable :pt="passThrough" :value="virtualValue" scrollable ...>
    ...
  </DataTable>
</template>

[eboileau]

Indeed VirtualScroller + DataTable work on Chrome, but NOT on Firefox.

[jolson-auctic]

Adding another voice to this. Firefox (version 126) on Mac, using the tailwind datatable page (https://tailwind.primevue.org/datatable/#virtualscroll) and the datatable is blank. This makes virtual scrolling unusable.

[ramirosandoval]

any news?

[cagataycivici]

As of v4.1.1, the new Tailwind styles have been rewritten using the preprocessor approach with @apply instead of pass-through. As a result this issue is not relevant any more.

New Website is live.