Merge pull request #611 from Budibase/fix-pagination

fix pagination

packages/builder/src/components/database/DataTable/ModelDataTable.svelte

@@ -36,14 +36,14 @@
     }
   }
 
-  $: paginatedData = data
+  $: sort = $backendUiStore.sort
-    ? data.slice(
+  $: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
+  $: paginatedData = sorted
+    ? sorted.slice(
         currentPage * ITEMS_PER_PAGE,
         currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
       )
     : []
-  $: sort = $backendUiStore.sort
-  $: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
 
   $: headers = Object.keys($backendUiStore.selectedModel.schema)
     .sort()
@@ -78,10 +78,10 @@
       </tr>
     </thead>
     <tbody>
-      {#if sorted.length === 0}
+      {#if paginatedData.length === 0}
         <div class="no-data">No Data.</div>
       {/if}
-      {#each sorted as row}
+      {#each paginatedData as row}
         <tr>
           <td>
             <EditRowPopover {row} />
@@ -100,7 +100,7 @@
   <TablePagination
     {data}
     bind:currentPage
-    pageItemCount={data.length}
+    pageItemCount={paginatedData.length}
     {ITEMS_PER_PAGE} />
 </section>
 

packages/builder/src/components/database/DataTable/Table.svelte

@@ -26,15 +26,15 @@
 
   $: columns = schema ? Object.keys(schema) : []
 
+  $: sort = $backendUiStore.sort
+  $: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
   $: paginatedData =
-    data && data.length
+    sorted && sorted.length
-      ? data.slice(
+      ? sorted.slice(
           currentPage * ITEMS_PER_PAGE,
           currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
         )
       : []
-  $: sort = $backendUiStore.sort
-  $: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
 </script>
 
 <section>
@@ -68,7 +68,7 @@
   <TablePagination
     {data}
     bind:currentPage
-    pageItemCount={data.length}
+    pageItemCount={paginatedData.length}
     {ITEMS_PER_PAGE} />
 </section>