From ec5e14de61fe9e3b8e48bff740bf1dedc0930de6 Mon Sep 17 00:00:00 2001
From: Saqib Ansari <nextchamp.saqib@gmail.com>
Date: Wed, 11 Dec 2024 11:57:16 +0530
Subject: [PATCH] feat: datatable pagination

---
 .../charts/components/ChartBuilderTable.vue   |  1 +
 frontend/src2/charts/components/DrillDown.vue |  1 +
 .../src2/charts/components/TableChart.vue     |  1 +
 frontend/src2/components/DataTable.vue        | 73 +++++++++++++++++--
 4 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/frontend/src2/charts/components/ChartBuilderTable.vue b/frontend/src2/charts/components/ChartBuilderTable.vue
index d061b543..31e4eb66 100644
--- a/frontend/src2/charts/components/ChartBuilderTable.vue
+++ b/frontend/src2/charts/components/ChartBuilderTable.vue
@@ -20,6 +20,7 @@ const drillOn = ref<{ row: QueryResultRow; column: QueryResultColumn } | null>(n
 			:columns="chart.dataQuery.result.columns"
 			:rows="chart.dataQuery.result.formattedRows"
 			:on-export="chart.dataQuery.downloadResults"
+			:enable-pagination="true"
 			@cell-dbl-click="(row, column) => (drillOn = { row, column })"
 		>
 			<template #column-header="{ column }">
diff --git a/frontend/src2/charts/components/DrillDown.vue b/frontend/src2/charts/components/DrillDown.vue
index 584dda01..9c563fe9 100644
--- a/frontend/src2/charts/components/DrillDown.vue
+++ b/frontend/src2/charts/components/DrillDown.vue
@@ -62,6 +62,7 @@ watch(
 					:loading="drillDownQuery.executing"
 					:columns="drillDownQuery.result.columns"
 					:rows="drillDownQuery.result.rows"
+					:enable-pagination="true"
 					:show-column-totals="true"
 					:show-filter-row="true"
 				>
diff --git a/frontend/src2/charts/components/TableChart.vue b/frontend/src2/charts/components/TableChart.vue
index 3aa84ab3..6966ff75 100644
--- a/frontend/src2/charts/components/TableChart.vue
+++ b/frontend/src2/charts/components/TableChart.vue
@@ -45,6 +45,7 @@ const drillOn = ref<{ row: QueryResultRow; column: QueryResultColumn }>()
 			:show-filter-row="tableConfig.show_filter_row"
 			:show-column-totals="tableConfig.show_column_totals"
 			:show-row-totals="tableConfig.show_row_totals"
+			:enable-pagination="true"
 			:on-export="chart ? chart.dataQuery.downloadResults : undefined"
 			:sort-order="sortOrder"
 			@sort="onSort"
diff --git a/frontend/src2/components/DataTable.vue b/frontend/src2/components/DataTable.vue
index f7367a74..fd5e0b2e 100644
--- a/frontend/src2/components/DataTable.vue
+++ b/frontend/src2/components/DataTable.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Download, Search, Table2Icon } from 'lucide-vue-next'
-import { computed, ref } from 'vue'
+import { ChevronLeft, ChevronRight, Download, Search, Table2Icon } from 'lucide-vue-next'
+import { computed, reactive, ref } from 'vue'
 import { createHeaders, formatNumber } from '../helpers'
 import { FIELDTYPES } from '../helpers/constants'
 import { QueryResultColumn, QueryResultRow } from '../types/query.types'
@@ -16,6 +16,7 @@ const props = defineProps<{
 	showRowTotals?: boolean
 	showColumnTotals?: boolean
 	showFilterRow?: boolean
+	enablePagination?: boolean
 	loading?: boolean
 	onExport?: Function
 	sortOrder?: Record<string, 'asc' | 'desc'>
@@ -117,6 +118,33 @@ function sortBy(column: QueryResultColumn, direction: 'asc' | 'desc' | '') {
 	}
 	emit('sort', sortOrder.value)
 }
+
+const page = reactive({
+	current: 1,
+	size: 100,
+	total: 1,
+	startIndex: 0,
+	endIndex: 99,
+	next() {
+		if (page.current < page.total) {
+			page.current++
+		}
+	},
+	prev() {
+		if (page.current > 1) {
+			page.current--
+		}
+	},
+})
+// @ts-ignore
+page.total = computed(() => {
+	if (!visibleRows.value?.length) return 1
+	return Math.ceil(visibleRows.value.length / page.size)
+})
+// @ts-ignore
+page.startIndex = computed(() => (page.current - 1) * page.size)
+// @ts-ignore
+page.endIndex = computed(() => Math.min(page.current * page.size, visibleRows.value?.length || 0))
 </script>
 
 <template>
@@ -202,13 +230,16 @@ function sortBy(column: QueryResultColumn, direction: 'asc' | 'desc' | '') {
 					</tr>
 				</thead>
 				<tbody>
-					<tr v-for="(row, idx) in visibleRows?.slice(0, 100)" :key="idx">
+					<tr
+						v-for="(row, idx) in visibleRows?.slice(page.startIndex, page.endIndex)"
+						:key="idx"
+					>
 						<td
-							class="sticky left-0 z-10 whitespace-nowrap border-b border-r bg-white px-2 text-right text-xs"
+							class="tnum sticky left-0 z-10 whitespace-nowrap border-b border-r bg-white px-2 text-right text-xs"
 							width="1%"
 							height="30px"
 						>
-							{{ idx + 1 }}
+							{{ idx + page.startIndex + 1 }}
 						</td>
 
 						<td
@@ -261,7 +292,37 @@ function sortBy(column: QueryResultColumn, direction: 'asc' | 'desc' | '') {
 					<div></div>
 				</slot>
 				<slot name="footer-right">
-					<div>
+					<div class="flex items-center gap-2">
+						<div
+							v-if="props.enablePagination && visibleRows?.length && page.total > 1"
+							class="flex flex-shrink-0 items-center justify-end gap-2"
+						>
+							<p class="tnum text-sm text-gray-600">
+								{{ page.startIndex + 1 }} - {{ page.endIndex }} of
+								{{ visibleRows.length }}
+							</p>
+
+							<div class="flex gap-2">
+								<Button
+									variant="ghost"
+									@click="page.prev"
+									:disabled="page.current === 1"
+								>
+									<ChevronLeft class="h-4 w-4 text-gray-700" stroke-width="1.5" />
+								</Button>
+								<Button
+									variant="ghost"
+									@click="page.next"
+									:disabled="page.current === page.total"
+								>
+									<ChevronRight
+										class="h-4 w-4 text-gray-700"
+										stroke-width="1.5"
+									/>
+								</Button>
+							</div>
+						</div>
+
 						<Button v-if="props.onExport" variant="ghost" @click="props.onExport">
 							<template #icon>
 								<Download class="h-4 w-4 text-gray-700" stroke-width="1.5" />