Ideas Branch

package.json

@@ -17,7 +17,8 @@
     "v-click-outside": "^3.2.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.2",
-    "vue-window-size": "^2.0.0"
+    "vue-window-size": "^2.0.0",
+    "vuetify": "^3.3.23"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",

src/components/CustomTable2.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps<{
+  tableData: {
+    headers: string[]
+    rowHeaders: string[]
+    rowsPerRowHeader: number
+    data: any[][]
+  }
+}>()
+
+const border = 'border-notebookText'
+</script>
+
+<template>
+  <table class="table-fixed border-collapse lg:w-full">
+    <tr class="bg-slate">
+      <th
+        v-for="(header, i) in tableData.headers"
+        :key="i"
+        :class="'w-1/' + tableData.headers.length"
+        class="py-2 px-4 text-sm lg:text-base"
+      >
+        {{ header }}
+      </th>
+    </tr>
+    <tbody class="bg-[#303030]">
+      <tr v-for="(row, i) in tableData.data" :key="i">
+        <th
+          v-if="i % tableData.rowsPerRowHeader == 0"
+          :rowspan="tableData.rowsPerRowHeader"
+          class="text-sm lg:text-base"
+        >
+          {{ tableData.rowHeaders[i / tableData.rowsPerRowHeader] }}
+        </th>
+        <td v-for="(item, j) in row" :key="j" class="py-4 px-2 lg:text-lg">{{ item }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>

src/components/Equation.vue

@@ -12,8 +12,8 @@ onMounted(() => {
 </script>
 <template>
   <div
-    class="w-full overflow-x-scroll bg-transparent invisible-scroller text-center"
     ref="containerRef"
+    class="w-full overflow-x-scroll bg-transparent invisible-scroller text-center"
   ></div>
 </template>
 <!--