From 89c45a9362a0299d7107b8aed18ed1bb7b8a0478 Mon Sep 17 00:00:00 2001
From: Emils Gulbis <emils.gulbis@gmail.com>
Date: Tue, 5 Mar 2024 17:24:29 +0200
Subject: [PATCH 1/2] feat(Table): pagination

---
 src/runtime/components/data/Table.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 605a55d7f7..85f516810e 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -136,6 +136,10 @@ export default defineComponent({
       type: String,
       default: 'label'
     },
+    pagination: {
+      type: Object as PropType<{ pageCount: number, page: number }>,
+      default: () => ({})
+    },
     sort: {
       type: Object as PropType<{ column: string, direction: 'asc' | 'desc' }>,
       default: () => ({})
@@ -191,14 +195,20 @@ export default defineComponent({
 
     const savedSort = { column: sort.value.column, direction: null }
 
+    const page = toRef(() => props.pagination?.page ?? 1)
+    const pageCount = toRef(() => props.pagination?.pageCount ?? props.rows.length)
+
+    const start = computed(() => pageCount.value * (page.value - 1))
+    const end = computed(() => pageCount.value * page.value)
+
     const rows = computed(() => {
       if (!sort.value?.column || props.sortMode === 'manual') {
-        return props.rows
+        return props.rows.slice(start.value, end.value)
       }
 
       const { column, direction } = sort.value
-
-      return props.rows.slice().sort((a, b) => {
+      
+      return props.rows.slice(start.value, end.value).sort((a, b) => {
         const aValue = get(a, column)
         const bValue = get(b, column)
 

From 885ca974665bb433421f7369df8abd6037581d01 Mon Sep 17 00:00:00 2001
From: Emils Gulbis <emils.gulbis@gmail.com>
Date: Tue, 5 Mar 2024 17:39:31 +0200
Subject: [PATCH 2/2] feat(Table) sorting before pagination

---
 src/runtime/components/data/Table.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/data/Table.vue b/src/runtime/components/data/Table.vue
index 85f516810e..6ff43de293 100644
--- a/src/runtime/components/data/Table.vue
+++ b/src/runtime/components/data/Table.vue
@@ -208,14 +208,14 @@ export default defineComponent({
 
       const { column, direction } = sort.value
       
-      return props.rows.slice(start.value, end.value).sort((a, b) => {
+      return props.rows.toSorted((a, b) => {
         const aValue = get(a, column)
         const bValue = get(b, column)
 
         const sort = columns.value.find((col) => col.key === column)?.sort ?? defaultSort
 
         return sort(aValue, bValue, direction)
-      })
+      }).slice(start.value, end.value)
     })
 
     const selected = computed({