Data in table couldn't render correctly at first

[harryshih2258]

Hi, I get my data from using axios and render table by following code.
But I found a problem, the table would show empty firstly. If I click some column sorting or use the global searching, the data of table would show correctly.

    <vue3-datatable :rows="table_sites" :columns="cols" :sortable="true" :search="search" :showFirstPage="false" :showLastPage="false" >
        <template #actions="data">
            <button @click="edit(data.value)">Edit</button>
            <button @click="clean(data.value.id)">Delete</button>
        </template>
    </vue3-datatable>

Ex: Before

After clicking sorting button

I tried to solve it, and I found all example would use setTimeout funcion to assign rows value after one second. Like following code: setTimeout(() => { rows = data.value || []; }, 1000); I do it, then the problem would be solved. The table would show correctly at frist. Do I have to assign rows value by this method （setTimeout）? Thank you so much, and appreciate you offering the great package.

[bhaveshpatel200]

HI, I have used setTimeout for showing skeleton loading, because of using static data, so.

By default you need to make loading variable which is default true and after your axios response comes you just need to false that loading which will display first time skeleton loader till your data comes from the axios call.

So, please latest version of the datatable which will provide skeleton loader functionality.

Seems you have not added datatable css, so please add that otherwise datatable not look good and also loader style will not be applied and may be some of the functionality not working properly like column chooser.

[harryshih2258]

HI, I have used setTimeout for showing skeleton loading, because of using static data, so.

By default you need to make loading variable which is default true and after your axios response comes you just need to false that loading which will display first time skeleton loader till your data comes from the axios call.

So, please latest version of the datatable which will provide skeleton loader functionality.

Seems you have not added datatable css, so please add that otherwise datatable not look good and also loader style will not be applied and may be some of the functionality not working properly like column chooser.

Hi, Thank you. It seems work fine after I add datatable css. Even if I don't use the setTimeout for showing skeleton loading.

[bhaveshpatel200]

Great.

setTimeout is just used for demo purpose.

[bhaveshpatel200]

Hi @harryshih2258 , Its good news!. Now our datatable supports server-side rendering and its live in latest release version 1.1.0.

I have also updated all the demos in server side rendering. so you can find the code from that.