From f1476a5e9472a2e19dc1754f94200c0091bb7a37 Mon Sep 17 00:00:00 2001
From: BrajamohanDas-afk <Brajamohandas0390@gmail.com>
Date: Sun, 18 Jan 2026 17:14:41 +0530
Subject: [PATCH 1/3] fix(ui): add numbered pagination and row numbers to ION
 file preview.

---
 ui/src/components/ListPreview.vue            | 196 ++++++++++++++++---
 ui/src/components/executions/FilePreview.vue |   6 +-
 ui/src/translations/en.json                  |  10 +-
 3 files changed, 178 insertions(+), 34 deletions(-)

diff --git a/ui/src/components/ListPreview.vue b/ui/src/components/ListPreview.vue
index 87a3768d409..20ab1326a2f 100644
--- a/ui/src/components/ListPreview.vue
+++ b/ui/src/components/ListPreview.vue
@@ -1,22 +1,51 @@
 <template>
-    <el-table :data="value" stripe>
-        <el-table-column v-for="(column, index) in generateTableColumns" :key="index" :prop="column" :label="column">
-            <template #default="scope">
-                <span v-if="isComplex(scope.row[column])">
-                    <el-tooltip :content="JSON.stringify(scope.row[column], null, 2)">
-                        <span class="preview-row">{{ truncate(JSON.stringify(scope.row[column])) }}</span>
-                    </el-tooltip>
-                </span>
-                <span v-else>
-                    {{ scope.row[column] }}
-                </span>
-            </template>
-        </el-table-column>
-    </el-table>
+    <div class="list-preview-container">
+        <el-table :data="previewData" stripe class="ion-table-preview">
+            <el-table-column type="index" :index="indexMethod" label="#" width="60" align="center" />
+            <el-table-column v-for="(column, index) in generateTableColumns" :key="index" :prop="column" :label="column">
+                <template #default="scope">
+                    <div :class="['cell-wrapper', {'expanded': expandedCells.has(getCellKey(scope.$index, column))}]">
+                        <span v-if="isComplex(scope.row[column])">
+                            <span class="preview-cell">{{ getTruncatedContent(scope.row[column], scope.$index, column) }}</span>
+                            <el-button
+                                v-if="needsExpansion(scope.row[column])"
+                                link
+                                type="primary"
+                                size="small"
+                                class="expand-button"
+                                @click="toggleExpand(scope.$index, column)"
+                            >
+                                {{ expandedCells.has(getCellKey(scope.$index, column)) ? $t('preview.collapse') : $t('preview.expand') }}
+                            </el-button>
+                        </span>
+                        <span v-else class="preview-cell">
+                            {{ scope.row[column] }}
+                        </span>
+                    </div>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <div v-if="totalPages > 1" class="pagination-controls">
+            <el-pagination
+                v-model:currentPage="currentPage"
+                :pageSize="MAX_PREVIEW_ROWS"
+                :total="props.value.length"
+                layout="prev, pager, next"
+                :hideOnSinglePage="true"
+                @current-change="goToPage"
+            />
+            <div class="pagination-summary">
+                {{ $t('preview.showing_rows', {start: startRow, end: endRow, total: props.value.length}) }}
+            </div>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
     import {ref, computed} from "vue";
+    const MAX_PREVIEW_ROWS = 50; 
+    const MAX_CELL_CHARS = 2000; 
 
     const props = defineProps({
         value: {
@@ -25,11 +54,43 @@
         }
     });
 
-    const maxColumnLength = ref(100);
+    const expandedCells = ref(new Set<string>());
+    const currentPage = ref(1);
+
+    const previewData = computed(() => {
+        const startIndex = (currentPage.value - 1) * MAX_PREVIEW_ROWS;
+        const endIndex = startIndex + MAX_PREVIEW_ROWS;
+        return props.value.slice(startIndex, endIndex);
+    });
+
+    const totalPages = computed(() => {
+        const pages = Math.ceil(props.value.length / MAX_PREVIEW_ROWS);
+        return pages;
+    });
+
+    const indexMethod = (index: number) => {
+        return (currentPage.value - 1) * MAX_PREVIEW_ROWS + index + 1;
+    };
+
+
+    const startRow = computed(() => {
+        return (currentPage.value - 1) * MAX_PREVIEW_ROWS + 1;
+    });
+
+    const endRow = computed(() => {
+        return Math.min(currentPage.value * MAX_PREVIEW_ROWS, props.value.length);
+    });
+
+    const goToPage = (page: number): void => {
+        if (page >= 1 && page <= totalPages.value) {
+            currentPage.value = page;
+            expandedCells.value.clear();
+        }
+    };
 
     const generateTableColumns = computed(() => {
         const allKeys = new Set<string>();
-        props.value.forEach(item => {
+        previewData.value.forEach(item => {
             Object.keys(item).forEach(key => allKeys.add(key));
         });
         return Array.from(allKeys);
@@ -39,15 +100,99 @@
         return data instanceof Array || data instanceof Object;
     };
 
-    const truncate = (text: any): string | any => {
-        if (typeof text !== "string") return text;
-        return text.length > maxColumnLength.value
-            ? text.slice(0, maxColumnLength.value) + "..."
-            : text;
+    const getCellKey = (rowIndex: number, column: string): string => {
+        return `${rowIndex}-${column}`;
+    };
+
+    const needsExpansion = (data: any): boolean => {
+        const stringified = JSON.stringify(data, null, 2);
+        return stringified.length > MAX_CELL_CHARS;
+    };
+
+    const getTruncatedContent = (data: any, rowIndex: number, column: string): string => {
+        const cellKey = getCellKey(rowIndex, column);
+        const stringified = JSON.stringify(data, null, 2);
+
+        if (expandedCells.value.has(cellKey)) {
+            return stringified;
+        }
+        
+        if (stringified.length > MAX_CELL_CHARS) {
+            return stringified.slice(0, MAX_CELL_CHARS) + "... [truncated]";
+        }
+        
+        return stringified;
+    };
+
+    const toggleExpand = (rowIndex: number, column: string): void => {
+        const cellKey = getCellKey(rowIndex, column);
+        if (expandedCells.value.has(cellKey)) {
+            expandedCells.value.delete(cellKey);
+        } else {
+            expandedCells.value.add(cellKey);
+        }
     };
 </script>
 
 <style scoped lang="scss">
+    .list-preview-container {
+        width: 100%;
+        overflow: auto;
+    }
+
+    .ion-table-preview {
+        table-layout: fixed;
+        width: 100%;
+        
+        :deep(.el-table__body-wrapper) {
+            overflow-x: auto;
+        }
+    }
+
+    .cell-wrapper {
+        max-height: 120px;
+        overflow: hidden;
+        position: relative;
+        display: block;
+        word-break: break-word;
+        
+        &.expanded {
+            max-height: none;
+            overflow: visible;
+        }
+    }
+
+    .preview-cell {
+        display: block;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        font-family: monospace;
+        font-size: 12px;
+        line-height: 1.4;
+    }
+
+    .expand-button {
+        margin-top: 4px;
+        font-size: 12px;
+    }
+
+    .pagination-controls {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        padding: 16px;
+        border-top: 1px solid var(--ks-border-primary);
+        background-color: var(--ks-background-secondary);
+    }
+
+    .pagination-summary {
+        font-size: 14px;
+        color: var(--ks-text-secondary);
+        text-align: center;
+    }
+
     :deep(.ks-editor) {
         .editor-container {
             box-shadow: none;
@@ -59,13 +204,4 @@
             }
         }
     }
-
-    .preview-row {
-        height: 24px;
-        overflow: hidden;
-        white-space: pre;
-        text-overflow: ellipsis;
-        display: inline-block;
-        max-width: 100%;
-    }
 </style>
\ No newline at end of file
diff --git a/ui/src/components/executions/FilePreview.vue b/ui/src/components/executions/FilePreview.vue
index 097baa5192d..9b796bfc309 100644
--- a/ui/src/components/executions/FilePreview.vue
+++ b/ui/src/components/executions/FilePreview.vue
@@ -161,15 +161,15 @@
     ];
 
     const configPreviewInitialRows = (): number => {
-        return miscStore.configs?.preview.initial || 50;
+        return  miscStore.configs?.preview.initial || 500;
     };
 
     const configPreviewMaxRows = (): number => {
-        return miscStore.configs?.preview.max || 5000;
+        return  miscStore.configs?.preview.max || 5000;
     };
 
     const maxPreviewOptions = computed(() => {
-        return [10, 25, 50, 100, 500, 1000, 5000, 10000, 25000, 50000].filter(
+        return [50, 100, 250, 500, 1000, 5000, 10000, 25000, 50000].filter(
             value => value <= configPreviewMaxRows()
         );
     });
diff --git a/ui/src/translations/en.json b/ui/src/translations/en.json
index f6b63aa8390..c6a9b2929b2 100644
--- a/ui/src/translations/en.json
+++ b/ui/src/translations/en.json
@@ -1605,7 +1605,15 @@
       "label": "Preview",
       "force-editor": "Enforce editor view",
       "auto-view": "Auto view",
-      "view": "View"
+      "view": "View",
+      "rows_truncated": "Showing {shown} of {total} rows. Download the file to view all data.",
+      "pagination_info": "Showing rows {start}-{end} of {total}.",
+      "showing_rows": "Showing rows {start}-{end} of {total}",
+      "expand": "Expand",
+      "collapse": "Collapse",
+      "previous": "Previous",
+      "next": "Next",
+      "page_of": "Page {current} of {total}"
     },
     "filter": {
         "update": "Update",

From 161066319bdd39a2349b95c50acb841833ffc861 Mon Sep 17 00:00:00 2001
From: BrajamohanDas-afk <Brajamohandas0390@gmail.com>
Date: Tue, 27 Jan 2026 12:23:18 +0530
Subject: [PATCH 2/3] Optimized list preview pagination and column stability

---
 ui/src/components/ListPreview.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/ListPreview.vue b/ui/src/components/ListPreview.vue
index 20ab1326a2f..f85aa734ddc 100644
--- a/ui/src/components/ListPreview.vue
+++ b/ui/src/components/ListPreview.vue
@@ -90,14 +90,17 @@
 
     const generateTableColumns = computed(() => {
         const allKeys = new Set<string>();
-        previewData.value.forEach(item => {
-            Object.keys(item).forEach(key => allKeys.add(key));
+        props.value.forEach(item => {
+            if (item && typeof item === "object") {
+                Object.keys(item).forEach(key => allKeys.add(key));
+            }
         });
         return Array.from(allKeys);
     });
 
+
     const isComplex = (data: any): boolean => {
-        return data instanceof Array || data instanceof Object;
+        return data !== null && typeof data === "object";
     };
 
     const getCellKey = (rowIndex: number, column: string): string => {

From 15a79935347020b91710206ddb9d4e56b9f6c21a Mon Sep 17 00:00:00 2001
From: BrajamohanDas-afk <Brajamohandas0390@gmail.com>
Date: Mon, 2 Feb 2026 20:15:02 +0530
Subject: [PATCH 3/3] refactor(ui): reuse shared Pagination component in
 ListPreview

---
 ui/src/components/ListPreview.vue | 80 ++++++++++---------------------
 1 file changed, 26 insertions(+), 54 deletions(-)

diff --git a/ui/src/components/ListPreview.vue b/ui/src/components/ListPreview.vue
index f85aa734ddc..90f535244e8 100644
--- a/ui/src/components/ListPreview.vue
+++ b/ui/src/components/ListPreview.vue
@@ -26,26 +26,21 @@
             </el-table-column>
         </el-table>
 
-        <div v-if="totalPages > 1" class="pagination-controls">
-            <el-pagination
-                v-model:currentPage="currentPage"
-                :pageSize="MAX_PREVIEW_ROWS"
-                :total="props.value.length"
-                layout="prev, pager, next"
-                :hideOnSinglePage="true"
-                @current-change="goToPage"
-            />
-            <div class="pagination-summary">
-                {{ $t('preview.showing_rows', {start: startRow, end: endRow, total: props.value.length}) }}
-            </div>
-        </div>
+        <Pagination
+            v-if="totalPages > 1"
+            :total="props.value.length"
+            :size="pageSize"
+            :page="currentPage"
+            @page-changed="onPageChanged"
+        />
     </div>
 </template>
 
 <script setup lang="ts">
     import {ref, computed} from "vue";
-    const MAX_PREVIEW_ROWS = 50; 
-    const MAX_CELL_CHARS = 2000; 
+    import Pagination from "./layout/Pagination.vue";
+
+    const MAX_CELL_CHARS = 2000;
 
     const props = defineProps({
         value: {
@@ -56,36 +51,30 @@
 
     const expandedCells = ref(new Set<string>());
     const currentPage = ref(1);
+    const pageSize = ref(50);
 
     const previewData = computed(() => {
-        const startIndex = (currentPage.value - 1) * MAX_PREVIEW_ROWS;
-        const endIndex = startIndex + MAX_PREVIEW_ROWS;
+        const startIndex = (currentPage.value - 1) * pageSize.value;
+        const endIndex = startIndex + pageSize.value;
         return props.value.slice(startIndex, endIndex);
     });
 
     const totalPages = computed(() => {
-        const pages = Math.ceil(props.value.length / MAX_PREVIEW_ROWS);
-        return pages;
+        return Math.ceil(props.value.length / pageSize.value);
     });
 
     const indexMethod = (index: number) => {
-        return (currentPage.value - 1) * MAX_PREVIEW_ROWS + index + 1;
+        return (currentPage.value - 1) * pageSize.value + index + 1;
     };
 
-
-    const startRow = computed(() => {
-        return (currentPage.value - 1) * MAX_PREVIEW_ROWS + 1;
-    });
-
-    const endRow = computed(() => {
-        return Math.min(currentPage.value * MAX_PREVIEW_ROWS, props.value.length);
-    });
-
-    const goToPage = (page: number): void => {
-        if (page >= 1 && page <= totalPages.value) {
-            currentPage.value = page;
-            expandedCells.value.clear();
+    const onPageChanged = (payload: { page?: number; size?: number }): void => {
+        if (payload.page !== undefined) {
+            currentPage.value = payload.page;
         }
+        if (payload.size !== undefined) {
+            pageSize.value = payload.size;
+        }
+        expandedCells.value.clear();
     };
 
     const generateTableColumns = computed(() => {
@@ -119,11 +108,11 @@
         if (expandedCells.value.has(cellKey)) {
             return stringified;
         }
-        
+
         if (stringified.length > MAX_CELL_CHARS) {
             return stringified.slice(0, MAX_CELL_CHARS) + "... [truncated]";
         }
-        
+
         return stringified;
     };
 
@@ -146,7 +135,7 @@
     .ion-table-preview {
         table-layout: fixed;
         width: 100%;
-        
+
         :deep(.el-table__body-wrapper) {
             overflow-x: auto;
         }
@@ -158,7 +147,7 @@
         position: relative;
         display: block;
         word-break: break-word;
-        
+
         &.expanded {
             max-height: none;
             overflow: visible;
@@ -179,23 +168,6 @@
         font-size: 12px;
     }
 
-    .pagination-controls {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        gap: 12px;
-        padding: 16px;
-        border-top: 1px solid var(--ks-border-primary);
-        background-color: var(--ks-background-secondary);
-    }
-
-    .pagination-summary {
-        font-size: 14px;
-        color: var(--ks-text-secondary);
-        text-align: center;
-    }
-
     :deep(.ks-editor) {
         .editor-container {
             box-shadow: none;