DataTable "Virtual Scroll" Documentation Example Is Broken

UI Components for Vue
Post Reply
adlaws
Posts: 10
Joined: 04 Feb 2021, 10:51

09 Feb 2021, 04:40

Hi guys,

The Virtual Scroll example in the online documentation for the DataTable component seems to be broken in both PrimeVue 2 and 3:

PrimeVue 2: https://www.primefaces.org/primevue/sho ... ble/scroll
PrimeVue v3: https://www.primefaces.org/primevue/sho ... ble/scroll

The example appears, but no data is being displayed, and only the headers are shown ("Name", "Country", "Representative", "Status").

Apart from this, the DataTable component does appear to work (I'm using it in my own code), so probably just the example needs fixing.

Having said that, the documentation could probably do with a bit of expansion on what the various properties for the DataTable actually do.

I've figured it out from what is shown in the documentation and a bit of playing around, but it would be nice to have them specifically explained.

In particular, I feel like the relationships between the following properties could do with some further explanation:
  • rows
  • totalRecords
  • virtualRowHeight
Also, I'm not sure that the necessity of defining a `loading` slot template within Column definitions is properly emphasised. If you don't define one you get the following error when the DataTable is initialized:

Code: Select all

[Vue warn]: Error in render: "TypeError: context.props.column.$scopedSlots[context.props.type] is not a function"
vue.runtime.esm.js?2b0e:1888 TypeError: context.props.column.$scopedSlots[context.props.type] is not a function
    at render (ColumnSlot.vue?62a0:23)
    at options.render (index.js?6435:83)
...which is pretty mysterious, especially if you convert from a "non-virtual scroll" table where everything was working just fine.

In case it helps anyone else, this is what I am talking about:

Code: Select all

<Column
    header="Things"
>
    <template #loading>
        <span class="loading-text">
            THIS WILL BE DISPLAYED DURING VIRTUAL SCROLL 
            AND YOU *MUST* HAVE IT OR YOU WILL GET AN 
            ERROR WHEN THE TABLE IS INITIALIZED
        </span>
    </template>
    <template #body="slotProps">
        {{ slotProps.data.name }}
    </template>
</Column>
Cheers!

Andrew

adlaws
Posts: 10
Joined: 04 Feb 2021, 10:51

18 Mar 2021, 06:15

I've noticed that virtual scrolling for DataTables in the PrimeVUE 3 documentation seems to have disappeared...?

Is this functionality no longer available in Vue3 DataTables?

I'm trying to upgrade to PrimeVUE 3 from 2, and I can't see any way to migrate my DataTable with this feature intact.

EDIT: I see it has been temporarily disabled for issue#981 (https://github.com/primefaces/primevue/issues/981). Hopefully it comes back soon!

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

15 Apr 2021, 14:53

Hi,

DataTable scrolling is improved. To see the new features https://primefaces.org/primevue/showcas ... ble/scroll

Best Regards,

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests