From 80ab625e2e3b7413a55d69f194b511e0a9df6ab1 Mon Sep 17 00:00:00 2001
From: sabhi128 <sabhiahm12@gmail.com>
Date: Sat, 5 Sep 2026 19:24:03 +0500
Subject: [PATCH 1/2] feat(datasets): add column data-type badges and sorting
 to ParquetViewer

---
 .../__tests__/datasets/ParquetViewer.spec.js  | 10 ++++++
 .../src/components/datasets/ParquetViewer.vue | 32 +++++++++++++++++--
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/__tests__/datasets/ParquetViewer.spec.js b/frontend/src/components/__tests__/datasets/ParquetViewer.spec.js
index b0a32f35a..961fd2935 100644
--- a/frontend/src/components/__tests__/datasets/ParquetViewer.spec.js
+++ b/frontend/src/components/__tests__/datasets/ParquetViewer.spec.js
@@ -96,4 +96,14 @@ describe("ParquetViewer", () => {
     await flushPromises();
     expect(wrapper.vm.split).toBe("train");
   });
+
+  it("renders column headers with formatted column type badges", async () => {
+    await flushPromises();
+    const textContent = wrapper.text();
+    expect(textContent).toContain("id");
+    expect(textContent).toContain("int");
+    expect(textContent).toContain("text");
+    expect(textContent).toContain("str");
+    expect(textContent).toContain("label");
+  });
 });
diff --git a/frontend/src/components/datasets/ParquetViewer.vue b/frontend/src/components/datasets/ParquetViewer.vue
index 594dbb148..add6165e6 100644
--- a/frontend/src/components/datasets/ParquetViewer.vue
+++ b/frontend/src/components/datasets/ParquetViewer.vue
@@ -98,11 +98,21 @@
                 class="w-full rounded-md mb-4"
                 row-class-name="row-item-clamp cursor-pointer"
                 cell-class-name="!align-top">
-        <el-table-column v-for="column in previewData.columns"
+        <el-table-column v-for="(column, idx) in previewData.columns"
                         :key="column"
                         :prop="column"
-                        :label="column"
-                        min-width="180" />
+                        sortable
+                        min-width="180">
+          <template #header>
+            <div class="flex items-center gap-1.5 overflow-hidden">
+              <span class="truncate font-medium text-gray-700" :title="column">{{ column }}</span>
+              <span v-if="getColumnType(idx)"
+                    class="text-[11px] px-1.5 py-0.5 rounded bg-gray-100 text-gray-600 font-mono font-normal flex-shrink-0 border border-gray-200">
+                {{ formatColumnType(getColumnType(idx)) }}
+              </span>
+            </div>
+          </template>
+        </el-table-column>
       </el-table>
       <CsgPagination
         :perPage="perPage"
@@ -175,6 +185,22 @@
     )
   })
 
+  const getColumnType = (index) => {
+    return previewData.value?.columns_type?.[index] || ''
+  }
+
+  const formatColumnType = (type) => {
+    if (!type) return ''
+    const lower = type.toLowerCase()
+    if (lower === 'string') return 'str'
+    if (lower.includes('int')) return lower
+    if (lower.includes('float')) return 'float'
+    if (lower.includes('bool')) return 'bool'
+    if (lower.includes('list') || lower.includes('array')) return 'list'
+    if (lower.includes('dict') || lower.includes('struct')) return 'dict'
+    return type
+  }
+
   const showRows = computed(() => {
     let result = ''
     if (Rows.value >= 1000000) {

From 012098af52aeb6e2428fae7b37981c05ae730119 Mon Sep 17 00:00:00 2001
From: sabhi128 <sabhiahm12@gmail.com>
Date: Sat, 5 Sep 2026 19:51:11 +0500
Subject: [PATCH 2/2] fix(datasets): implement numeric sort method and refine
 header test assertions

---
 .../__tests__/datasets/ParquetViewer.spec.js  | 19 ++++++++++-----
 .../src/components/datasets/ParquetViewer.vue | 24 +++++++++++++++++++
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/__tests__/datasets/ParquetViewer.spec.js b/frontend/src/components/__tests__/datasets/ParquetViewer.spec.js
index 961fd2935..7dd25f9ea 100644
--- a/frontend/src/components/__tests__/datasets/ParquetViewer.spec.js
+++ b/frontend/src/components/__tests__/datasets/ParquetViewer.spec.js
@@ -99,11 +99,18 @@ describe("ParquetViewer", () => {
 
   it("renders column headers with formatted column type badges", async () => {
     await flushPromises();
-    const textContent = wrapper.text();
-    expect(textContent).toContain("id");
-    expect(textContent).toContain("int");
-    expect(textContent).toContain("text");
-    expect(textContent).toContain("str");
-    expect(textContent).toContain("label");
+    const headerText = wrapper.find('.el-table__header-wrapper').text();
+    expect(headerText).toContain("id");
+    expect(headerText).toContain("int");
+    expect(headerText).toContain("text");
+    expect(headerText).toContain("str");
+    expect(headerText).toContain("label");
+  });
+
+  it("sorts numeric columns numerically instead of lexicographically", () => {
+    const sortFn = wrapper.vm.getSortMethod("id", 0);
+    expect(sortFn({ id: "2" }, { id: "10" })).toBeLessThan(0);
+    expect(sortFn({ id: "10" }, { id: "2" })).toBeGreaterThan(0);
+    expect(sortFn({ id: "2" }, { id: "2" })).toBe(0);
   });
 });
diff --git a/frontend/src/components/datasets/ParquetViewer.vue b/frontend/src/components/datasets/ParquetViewer.vue
index add6165e6..cb8d7229e 100644
--- a/frontend/src/components/datasets/ParquetViewer.vue
+++ b/frontend/src/components/datasets/ParquetViewer.vue
@@ -102,6 +102,7 @@
                         :key="column"
                         :prop="column"
                         sortable
+                        :sort-method="getSortMethod(column, idx)"
                         min-width="180">
           <template #header>
             <div class="flex items-center gap-1.5 overflow-hidden">
@@ -201,6 +202,29 @@
     return type
   }
 
+  const getSortMethod = (column, index) => {
+    const colType = getColumnType(index)
+    const lower = (colType || '').toLowerCase()
+    const isNumeric = lower.includes('int') || lower.includes('float') || lower.includes('number')
+
+    return (a, b) => {
+      const valA = a[column]
+      const valB = b[column]
+      if (valA === valB) return 0
+      if (valA === undefined || valA === null) return -1
+      if (valB === undefined || valB === null) return 1
+
+      if (isNumeric) {
+        const numA = Number(valA)
+        const numB = Number(valB)
+        if (!isNaN(numA) && !isNaN(numB)) {
+          return numA - numB
+        }
+      }
+      return String(valA).localeCompare(String(valB))
+    }
+  }
+
   const showRows = computed(() => {
     let result = ''
     if (Rows.value >= 1000000) {