w-table: is it possible to manually trigger the "refresh" of the component view?

[verzulli]

Hi, I'm working on a (sort of) real-time web-app that receive events from a websocket and, rightafter, display them on a "new" row of a specific w-table.

As I'm having some strange performance problems (that I'm heavily investigating....) my "feeling" is that the auto-refresh of the w-table component could cause some problems (eg: when a message arrive in the middle of a previous "w-table refresh", and a new "w-table refresh" is triggered by my just-added new item in the related item array).

My question is: is there some configuration that can be applied somewhere, so that the w-table component will NOT refresh automatically, but, instead, refresh only when triggered by application?

Should this be possible, I could properly plan the "refresh" based on the frequency of received event....

Thanks in advance!

(and, BTW, thanks for wave-ui! It's really a pleasure to work with it....)

[antoniandre]

Hi @verzulli, thanks for your feedback.

The w-table will "refresh" when its data changes, and that's just by Vue internal mechanism thanks to the reactivity. If you don't want this to happen automatically, you should only change the data of the w-table on a specific trigger.

One way to do it is to:

<w-table :headers="headers" :items="items" />

export default {
    data: () => ({
        headers: [{ ... }, ...] // Array of table headers.
        items: [] // Initialized as empty array of table rows.
    }),

    methods: {
        // Supposing you call this function when your websocket receives new data, with the new table items array.
        onWebsocketUpdate (newItems) {
            this.updateTableRows(newItems)
        },
        updateTableRows (newItems) {
            this.items = [] // Removes everything (unless it's a log and you should only append the new items).
            newItems.forEach(item => {
                this.items.push(item)
            })
        }
    },

    // On created if the data is already available or on first server fetch.
    created () {
        this.updateTableRows(newItems)
    }
}

If this is already what you are doing and it does not work properly, please give more details.

• how many rows of data are you displaying and how big is the content of all the items?
• what is the performance issue you are seeing? a blink of data?
• what are your Vue and Wave UI versions?
• a reproduction link would be best You may need to set an updatingData flag to prevent updating if already updating or in a way debouce updates.

[antoniandre]

Closing due to inactivity. please reopen if not solved. :)

[verzulli]

(Sorry for the late reply. Just adding further details.)

After a bit more troubleshooting, and even if not 100% sure, I reached the conclusion that the "memory leak" I was suffering was related to the "development environment" I was using.

Actually, I was suffering the problem while developing.... and as, in my case, development involves the usage of the Vue Devtools and... as such tools keep track of "State change" and... as such state changes are huge (in my case).... this should imply that the Devtools required more and more memory, up to sort of "crashing" the whole app.

As soon as I "built" the "production" version of my application... and shipped it in production.... everything worked flawlessly, without such a memory/performance problem.

In short: I experienced the problem ONLY in "development". Once in "production", everything was OK.

Again: sorry for this late reply.