Vue3 datatable act as a server side rendering

[rizahoemae]

Hello, I'm interested in your Vue3 datatable. I've implemented it as client-side rendering and it's working fine, but there are some cases where I need it to work as server-side rendering. After studying your code, I found some points to make it work as server-side rendering. Among these, I need to define a few variables: totalRows (total data), page (current page), and the pageChange event.

However, there is a problem when I define totalRows. I want it to be automatically calculated based on maxPage, as I see in line 484:

const maxPage = computed(() => {
   const totalPages =
     <number>currentPageSize.value < 1
       ? 1
       : Math.ceil(<number>filterRowCount.value / <number>currentPageSize.value);
   return Math.max(totalPages || 0, 1);
});

But for some reason, totalRows doesn't seem to be assigned as the amount of data. Instead, it automatically calculates rows.length.

This is my API structure:

{
  current_page: 1,
  data: […],
  max_page: 23,
  messages: "",
  recordsTotal: 229,
  state: true
}

When I fetch the API, I assign it to data, where the variable totalData is taken from API.recordsTotal and currentPage from API.current_page. This is how I call it in the Vue3 datatable:

<vue3-datatable
             :rows="data"
             :page="currentPage"
             :columns="headings"
             :totalRows="totalData"
             :sortable="true"
             :showPageSize="false"
             :stickyFirstColumn="true"
             @pageChange="pageChange"
           >

However, what is displayed in the browser is not what I want. I want it to display "Showing 1 to 10 of 229 entries", and there are a number of pages (with empty data) where the user clicks and it triggers the pageChange event to fill in the data.

[rizahoemae]

is it because of this line, assigned new value of rows.length to filterRowCount ? on line 745 inside filterRows function

filterRowCount.value = rows.length || 0;

[bhaveshpatel200]

Hi, This package is only for client side for now. I will add soon server side pagination as well as possible. We have already vairables for totalRows but for now package is for client side, so in client side I am getting counts from filters data instead of from totalRow variables directly. but for server side you can add one more props serverside variable and can check and use totalRow values instead of rows count.

[rizahoemae]

Thanks for answering,

Sorry, you meant to add one more serverside prop variable from your datatable with

<vue3-datatable
              :rows="data"
              :page="currentPage"
              :columns="headings"
              :totalRows="totalData"
              :sortable="true"
              :showPageSize="false"
              :stickyFirstColumn="true"
              :serverside="xxxx"
              @pageChange="pageChange"
            >

?

[bhaveshpatel200]

Yes, exactly, we need one more variables for server side pagination and based on that we can add conditions for client side or server side pagination.

[rizahoemae]

alright looking forward for the enhancement, thank you for your updates!

[bhaveshpatel200]

Hi @rizahoemae, 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.