From 97c16b7d0d51405563b74e18438c1a49910f7365 Mon Sep 17 00:00:00 2001
From: Kazuki Sawada <kazuki@6715.jp>
Date: Sun, 21 Aug 2022 23:33:10 +0900
Subject: [PATCH] fix table styling

---
 view/src/components/TsvTable.vue | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/view/src/components/TsvTable.vue b/view/src/components/TsvTable.vue
index 203437c..b54d764 100644
--- a/view/src/components/TsvTable.vue
+++ b/view/src/components/TsvTable.vue
@@ -13,7 +13,16 @@
       </thead>
       <tbody>
         <tr v-for="d in sortedData" :key="d.toString()">
-          <td v-for="(v, i) in d" :key="header[i]">{{ v }}</td>
+          <td v-for="(value, i) in d" :key="header[i]">
+            <div v-if="isNumeric(value)" class="numericCell">
+              {{ value }}
+            </div>
+            <details v-else-if="value.length > 24">
+              <summary>{{ value.slice(0, 24) }} ...</summary>
+              {{ value }}
+            </details>
+            <div v-else>{{ value }}</div>
+          </td>
         </tr>
       </tbody>
     </table>
@@ -24,10 +33,6 @@
 import { parse } from "papaparse";
 import { defineComponent } from "vue";
 
-const isNumeric = (v: string) => {
-  return !isNaN(+v);
-};
-
 export default defineComponent({
   props: {
     tsv: {
@@ -51,7 +56,7 @@ export default defineComponent({
     sortedData() {
       const data = this.rows.slice(1).sort((as, bs) => {
         const [a, b] = [as[this.sortColumn], bs[this.sortColumn]];
-        if (isNumeric(a)) {
+        if (this.isNumeric(a)) {
           return +a - +b;
         } else {
           if (a < b) {
@@ -72,6 +77,9 @@ export default defineComponent({
     },
   },
   methods: {
+    isNumeric(v: string) {
+      return !isNaN(+v);
+    },
     sortBy(column: number) {
       if (this.sortColumn === column) {
         this.sortOrder = this.sortOrder === "desc" ? "asc" : "desc";
@@ -98,15 +106,22 @@ td,
 th {
   padding: 0.5em 1em;
   border: 1px solid #999;
-  white-space: nowrap;
 }
-
 th {
   cursor: pointer;
+  white-space: nowrap;
 
   .sortOrder {
     font-size: 0.4em;
     color: gray;
   }
 }
+.numericCell {
+  text-align: right;
+  white-space: nowrap;
+}
+
+details[open] > summary {
+  display: none;
+}
 </style>