Densify table

src/components/task/TaskTableComponent.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="q-pa-md">
+  <div class="q-pa-sm">
     <q-table
       :rows="tasks"
       :columns="columns"
+      dense
       row-key="$id"
       no-data-label="I didn't find anything for you"
       no-results-label="The filter didn't uncover any results"
@@ -25,13 +26,7 @@
           @click="deleteTasks"
         />
         <q-space />
-        <q-input
-          borderless
-          dense
-          debounce="300"
-          color="primary"
-          v-model="filter"
-        >
+        <q-input borderless debounce="300" color="primary" v-model="filter">
           <template v-slot:append>
             <q-icon name="search" />
           </template>
@@ -40,9 +35,8 @@
       <template v-slot:header="props">
         <q-tr :props="props">
           <q-th key="desc" auto-width>
-            <q-checkbox v-model="props.selected"></q-checkbox>
+            <q-checkbox dense v-model="props.selected"></q-checkbox>
           </q-th>
-          <q-th auto-width />
           <q-th v-for="col in props.cols" :key="col.name" :props="props">
             {{ col.label }}
           </q-th>
@@ -52,17 +46,7 @@
       <template v-slot:body="props">
         <q-tr :props="props">
           <q-td key="desc" auto-width>
-            <q-checkbox v-model="props.selected"></q-checkbox>
-          </q-td>
-          <q-td auto-width>
-            <q-btn
-              size="sm"
-              color="primary"
-              round
-              dense
-              @click="props.expand = !props.expand"
-              :icon="props.expand ? 'remove' : 'add'"
-            />
+            <q-checkbox dense v-model="props.selected"></q-checkbox>
           </q-td>
           <q-td v-for="col in props.cols" :key="col.name" :props="props">
             <div v-if="col.name == 'skills'" class="q-gutter-sm">
@@ -90,13 +74,6 @@
             </div>
           </q-td>
         </q-tr>
-        <q-tr v-show="props.expand" :props="props">
-          <q-td auto-width />
-          <q-td auto-width />
-          <q-td colspan="100%">
-            <div class="text-left">{{ props.row.description }}<br /></div>
-          </q-td>
-        </q-tr>
       </template>
     </q-table>
   </div>