Header of collapsible matches table

src/components/Spellitem.vue

@@ -1,11 +1,12 @@
 <template>
   <tr>
-    <td colspan="3">
+    <td colspan="3" class="spell">
       <q-collapsible
-        :label="spell.name"
         group="spells"
+        :label="label"
       >
-        {{spell.description}}
+
+        <p>{{spell.description}}</p>
       </q-collapsible>
     </td>
   </tr>
@@ -13,11 +14,34 @@
 
 <script>
 export default {
+  computed: {
+    level () {
+      return this.spell.level.toLowerCase() === 'cantrip' ? '0' : this.spell.level.charAt(0)
+    },
+    label () {
+      return this.level + this.schoolCapitalized + '\n' + this.spell.name
+    },
+    schoolCapitalized () {
+      debugger
+      return this.spell.school.charAt(0).toUpperCase() + this.spell.school.slice(1)
+    }
+  },
   props: [
     'spell'
   ]
 }
 </script>
 
-<style scoped lang="stylus">
+<style lang="stylus">
+  .spell .item-content
+    position: relative
+  .spell .item-content > *
+    white-space: pre-line !important
+    overflow: visible !important
+    line-height: 0
+    padding-top: .5em
+    text-indent: 33.333%
+    &::first-letter
+      margin-right: 2em
+      float: right
 </style>

src/components/Spelllist.vue

@@ -10,18 +10,18 @@
         </td>
       </tr>
       <tr>
-        <th class="text-left">
+        <th class="text-left no-padding">
-          <a
+          <a class="sort-name"
             v-on:click="sortBy = 'name'"
           >Name</a>
         </th>
-        <th class="text-left">
+        <th class="text-left no-padding">
-          <a
+          <a class="sort-school"
             v-on:click="sortBy = 'school'"
           >School</a>
         </th>
-        <th class="text-right">
+        <th class="text-right no-padding">
-          <a
+          <a class="sort-level"
             v-on:click="sortBy = 'level'"
           >Level</a>
         </th>
@@ -97,6 +97,12 @@ export default {
   .spell-list
     width: 100%
   th a
-    padding: 1em
+    display: inline-block
-    display: block
+    padding: 1em 0
+    &.sort-name
+      margin-left: 1em
+      margin-right: -1em
+    &.sort-level
+      margin-left: -5em
+      margin-right: 5em
 </style>

src/query.js

@@ -23,7 +23,6 @@ export default class Query {
   }
 
   sort (key = 'sortScore') {
-    debugger
     this.data = this.data.sort((a, b) => {
       if (a[key] < b[key]) return -1
       if (a[key] > b[key]) return 1