Missing preset for VirtualScroller

[eboileau]

VirtualScroller is missing, it doesn't work either in the docs for the DataTable. That's exactly the use case I need. I managed to create something for the FileUpload, but I am struggling with this one... I'm trying build a preset based on the VirtualScroller API, and looking at the VirtualScrollerStyle.js from PrimeVue lib for styling. I am defining root, content, spacer, loader, and loadingIcon, based on PT options, but w/o any props, just basic style, to no avail...

Any idea when this could be available, or do you have a snippet I could use as a template preset?

BTW, I like your approach with presets for unstyled mode using Tailwind, this is now much cleaner, and the docs are very well explaining the merge customization, thanks!

[mertsincan]

Hi,

VirtualScroller is a base API. So we don't remove its styles for unstyled mode. But you can pass classes, etc. to it with pt.
Please try;

<DataTable :pt="{
    virtualScroller: {
             root: 'TEST_CLASS'
    }
}"

Best Regards,

[eboileau]

Thanks @mertsincan for your quick reply, but then I don't understand why it doesn't work...

This is my main.js

// presets
import PrimeVue from 'primevue/config'
import WindScm from '@/presets/windscm'
...
app.use(PrimeVue, { unstyled: true, pt: WindScm, ripple: true })

Then in some view

<template>
      <div>
        <DataTable
          :value="records"
          ref="dt"
          sortMode="multiple"
          removableSort
          scrollable
          scrollHeight="400px"
          :virtualScrollerOptions="{ itemSize: 46 }"
          tableStyle="min-w-{50rem}"
        >
        ...
        </DataTable>
     ...
    </div>
</template>

Nothing shows up in my table. Same as in the docs here https://tailwind.primevue.org/datatable/#virtualscroll
Am I missing something?

[darioillusorium]

Hi! I have had to manually create the style of the virtualscroll within the tailwind presets (looking at the style of the classes that are used in styled mode). Specifically I use aura ( (github) ) so I have created "virtualscroller/index.js" within "presets/aura" with this content:

export default {
    root: {
        class: [
            'relative overflow-auto [contain:strict] [transform: translateZ(0)] will-change-scroll [outline: 0 none]'
        ]
    },
    content: {
        class: [
            'absolute top-0 left-0 min-h-full min-w-full will-change-transform',
        ]
    },
    spacer: {
        class: [
            'absolute top-0 left-0 h-px w-px [transform-origin: 0 0] pointer-events-none'
        ]
    }
};

This works for me. I hope it helps if you are using Tailwind Pressets from Github. But I think its a bug.