Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VirtualScroller not working with DataTable #168

Open
eboileau opened this issue Feb 28, 2024 · 3 comments
Open

VirtualScroller not working with DataTable #168

eboileau opened this issue Feb 28, 2024 · 3 comments

Comments

@eboileau
Copy link

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
Copy link
Author

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

@aseilerhara
Copy link

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
Copy link
Author

eboileau commented May 7, 2024

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

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

No branches or pull requests

2 participants