From 464c6eaf42917bf0cf721c5944a5fc002dc8c094 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Tue, 11 Jan 2022 13:29:45 +0100
Subject: [PATCH] feat: add list rendering to table cells

---
 src/components/DataTable.vue | 38 ++++++++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index 64be75b..4107b78 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -19,7 +19,21 @@
           :key="idx"
           :colspan="idx === 1 && !isHexValue(row[1]) ? 2 : 1"
         >
-          {{ cell }}
+          <template v-if="Array.isArray(cell)">
+            <ul
+              :class="[
+                cell.length > 11 ? 'col-3' : cell.length > 4 ? 'col-2' : '',
+              ]"
+            >
+              <li v-for="(item, idx) in cell" :key="idx">
+                {{ item }}
+              </li>
+            </ul>
+          </template>
+
+          <template v-else>
+            {{ cell }}
+          </template>
         </td>
         <td
           v-if="isHexValue(row[1])"
@@ -49,7 +63,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@/scss/_variables.scss";
+@import "@/scss/base.scss";
 
 .datatable {
   border-collapse: collapse;
@@ -64,6 +78,26 @@ export default {
     @media (min-width: 35em) {
       padding: 0.5em 1em;
     }
+
+    ul {
+      margin: 0;
+      padding: 0;
+
+      @media (min-width: 40em) {
+        &.col-2 {
+          columns: 2 auto;
+        }
+
+        &.col-3 {
+          columns: 3 auto;
+        }
+      }
+    }
+
+    li {
+      margin: 0 0 0 1em;
+      padding: 0;
+    }
   }
 
   &__body {