feat: add list rendering to table cells

src/components/DataTable.vue

@@ -19,7 +19,21 @@
           :key="idx"
           :colspan="idx === 1 && !isHexValue(row[1]) ? 2 : 1"
         >
+          <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 {