ui: datatable columns only recognize width instead of max-width

introduce pinia to get viewportHeight

Author: zjp-CN

ui/app/components/Kani.vue

@@ -1,32 +1,76 @@
 <script setup lang="ts">
 import { ofetch } from "ofetch";
-import { URL_MERGE_DIFF, MergeKaniColumns, multiSort, type VecMergeHashKaniList } from "~/shared/utils/merged_list";
+import { URL_MERGE_DIFF, MergeKaniColumns, multiSort, type VecMergeHashKaniList, FILTERS, ProofKind } from "~/shared/utils/kani";
+import { useStyleStore } from "~/stores/style";
 
-const vec = ref<VecMergeHashKaniList>([]);
+const { viewportHeight } = storeToRefs(useStyleStore());
+const colStyle = (ratio: number) => {
+  const style = {
+    "width": `${Math.round(viewportHeight.value * ratio)}px`,
+    "white-space": "normal", "word-break": "break-word",
+  };
+  console.log(style);
+  return style;
+};
+
+const raw = ref<VecMergeHashKaniList>([]);
 // Download JSON
 ofetch<VecMergeHashKaniList>(
   URL_MERGE_DIFF,
   { parseResponse: JSON.parse }
-).then(val => vec.value = val);
+).then(val => raw.value = val);
+
+// fitler rows
+const filters = ref(FILTERS.filters);
+// stats
+const counts = computed<{ total: number, standard: number, contract: number }>(() => ({
+  total: raw.value.length,
+  standard: raw.value.filter(ele => ele.proof_kind === ProofKind.Standard).length,
+  contract:
+    raw.value.filter(ele => ele.proof_kind === ProofKind.Contract).length,
+}));
+
 
 // Set title
 useHead({ title: "Verify Rust Std - Kani" });
 </script>
 
 <template>
-  <div>len = {{ vec.length }}</div>
+  <DataTable :value="raw" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" sortMode="multiple" removableSort
+    v-model:multi-sort-meta="multiSort" stripedRows tableStyle="min-width: 20rem" v-model:filters="filters"
+    :globalFilterFields="FILTERS.fields" currentPageReportTemplate="{first} to {last} of {totalRecords}">
 
-  <DataTable :value="vec" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" sortMode="multiple" removableSort
-    v-model:multi-sort-meta="multiSort" stripedRows tableStyle="min-width: 50rem">
-    <!-- :virtual-scroller-options="{ itemSize: 5, lazy: true, }"> It's slow to render the table, so partial render. -->
     <template #header>
-      <div class="flex flex-wrap items-center justify-between gap-2">
-        <span class="text-xl font-bold">Products</span>
-        <Button icon="pi pi-refresh" rounded raised />
+      <div class="flex justify-between items-center">
+        <div>
+        </div>
+        <div>
+          <IconField>
+            <InputIcon>
+              <i class="pi pi-search" />
+            </InputIcon>
+            <InputText v-model="filters.global.value" placeholder="filepath or function" />
+          </IconField>
+        </div>
       </div>
     </template>
 
+    <!-- Passing ratio to maxWidth seems not working. Pass bodyStyle to wrap long paths while bodyClass not working. -->
     <Column v-for="col of MergeKaniColumns" :key="col.key" :field="col.col.field" :header="col.col.header"
-      :style="{ width: col.col.width }" :sortable="col.col.sortable"></Column>
+      :style="{ width: col.col.width }" bodyStyle="white-space: normal; word-break: break-word"
+      :sortable="col.col.sortable">
+    </Column>
+
+    <template #paginatorstart>
+      <span>Total: {{ counts.total }}</span>
+    </template>
+    <template #paginatorend>
+      <div class="grid grid-cols-2 grid-rows-2 place-items-center">
+        <span>Standard:</span>
+        <span>{{ counts.standard }}</span>
+        <span>Contract:</span>
+        <span>{{ counts.contract }}</span>
+      </div>
+    </template>
   </DataTable>
 </template>

ui/app/shared/utils/merged_list.ts renamed to ui/app/shared/utils/kani.ts

@@ -1,4 +1,5 @@
 import type { DataTableSortMeta } from "primevue";
+import { FilterMatchMode } from '@primevue/core/api';
 
 export const URL_MERGE_DIFF = "https://raw.githubusercontent.com/os-checker/verify-rust-std_data/refs/heads/main/merge_diff-proofs-only.json";
 
@@ -31,23 +32,30 @@ export interface MergeKaniColumn {
 export const MergeKaniColumns: MergeKaniColumn[] = [
   {
     key: "file",
-    col: { field: "file", header: "File Path", width: "25%", sortable: true },
+    col: { field: "file", header: "File Path", width: "18%", sortable: true },
   },
   {
     key: "func",
     col: { field: "func", header: "Function", width: "25%", sortable: true },
   },
   {
     key: "hash",
-    col: { field: "hash", header: "Hash", width: "25%" },
+    col: { field: "hash", header: "Hash", width: "25%", },
   },
   {
     key: "proof_kind",
-    col: { field: "proof_kind", header: "Proof Kind", width: "10%", sortable: true },
+    col: { field: "proof_kind", header: "Proof Kind", width: "12%", sortable: true },
   },
 ];
 
 export const multiSort: DataTableSortMeta[] = [
   // { field: "proof_kind", order: 1 },
   // { field: "func", order: 1 },
 ];
+
+export const FILTERS = {
+  filters: {
+    global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+  },
+  fields: ["file", "func"]
+};

ui/app/stores/style.ts

@@ -0,0 +1,29 @@
+export const useStyleStore = defineStore('style', () => {
+  const color = reactive({
+    green: "green", red: "red", grey: "grey",
+    topButton: "white", orange: "orange", orange_light: "orange",
+  });
+  const viewportHeight = ref(800);
+
+  onMounted(() => {
+    // 获取元素的计算后的样式
+    const styles = window.getComputedStyle(document.documentElement);
+
+    // 获取CSS变量的值
+    color.green = styles.getPropertyValue('--p-emerald-500').trim();
+    color.red = styles.getPropertyValue('--p-red-500').trim();
+    color.grey = styles.getPropertyValue('--p-gray-400').trim();
+    color.topButton = styles.getPropertyValue('--p-button-primary-background').trim();
+    color.orange_light = styles.getPropertyValue('--p-orange-400').trim();
+    color.orange = styles.getPropertyValue('--p-orange-500').trim();
+
+    // 视窗高度
+    viewportHeight.value = window.innerHeight;
+    window.addEventListener('resize', () => {
+      viewportHeight.value = window.innerHeight;
+    });
+  });
+
+  return { color, viewportHeight }
+});
+

ui/nuxt.config.ts

@@ -7,7 +7,11 @@ export default defineNuxtConfig({
   ssr: false, // Client-side Only Rendering (SPA)
   css: ["primeicons/primeicons.css"],
   typescript: { typeCheck: true },
-  modules: ['@primevue/nuxt-module', '@nuxtjs/tailwindcss'],
+  modules: [
+    '@primevue/nuxt-module',
+    '@nuxtjs/tailwindcss',
+    '@pinia/nuxt'
+  ],
   primevue: {
     options: {
       theme: {
@@ -16,4 +20,4 @@ export default defineNuxtConfig({
       }
     }
   }
-})
+})

ui/package-lock.json

@@ -11,9 +11,11 @@
   },
   "dependencies": {
     "@nuxtjs/tailwindcss": "^6.14.0",
+    "@pinia/nuxt": "^0.11.2",
     "@primeuix/themes": "^1.2.3",
     "nuxt": "^4.0.1",
     "ofetch": "^1.4.1",
+    "pinia": "^3.0.3",
     "primeicons": "^7.0.0",
     "primevue": "^4.3.7",
     "tailwindcss-primeui": "^0.6.1",