--- a/client/src/components/importschedule/Importschedule.vue	Mon Mar 04 13:53:09 2019 +0100
+++ b/client/src/components/importschedule/Importschedule.vue	Mon Mar 04 14:50:23 2019 +0100
@@ -4,100 +4,81 @@
     <div class="mt-3 w-100">
       <div class="card flex-grow-1 schedulecard shadow-xs">
         <UIBoxHeader icon="clock" title="Imports" />
-        <div class="card-body schedulecardbody">
-          <div class="card-body schedulecardbody">
-            <div class="searchandfilter mb-3  w-50 d-flex flex-row">
-              <div class="searchgroup input-group">
-                <div class="input-group-prepend">
-                  <span class="input-group-text" id="search">
-                    <font-awesome-icon icon="search"></font-awesome-icon>
-                  </span>
-                </div>
-                <input
-                  v-model="searchQuery"
-                  type="text"
-                  class="form-control"
-                  placeholder
-                  aria-label="Search"
-                  aria-describedby="search"
-                />
-              </div>
+        <div class="searchandfilter p-3 w-50 mx-auto">
+          <div class="searchgroup input-group">
+            <div class="input-group-prepend">
+              <span class="input-group-text" id="search">
+                <font-awesome-icon icon="search"></font-awesome-icon>
+              </span>
             </div>
-            <transition name="fade">
-              <table v-if="schedules.length" class="table table-hover">
-                <thead>
-                  <tr>
-                    <th><translate>ID</translate></th>
-                    <th><translate>Type</translate></th>
-                    <th><translate>Author</translate></th>
-                    <th><translate>Schedule</translate></th>
-                    <th><translate>Email</translate></th>
-                    <th style="width: 140px"></th>
-                  </tr>
-                </thead>
-                <transition-group name="fade" tag="tbody">
-                  <tr v-for="schedule in schedules" :key="schedule.id">
-                    <td>{{ schedule.id }}</td>
-                    <td>{{ schedule.kind.toUpperCase() }}</td>
-                    <td>{{ schedule.user }}</td>
-                    <td>{{ schedule.config.cron }}</td>
-                    <td>
-                      <font-awesome-icon
-                        v-if="schedule.config['send-email']"
-                        class="fa-fw mr-2"
-                        fixed-width
-                        icon="check"
-                      ></font-awesome-icon>
-                    </td>
-                    <td class="text-right">
-                      <button
-                        @click="editSchedule(schedule.id)"
-                        class="btn btn-sm btn-dark mr-1"
-                        :disabled="importScheduleDetailVisible"
-                      >
-                        <font-awesome-icon
-                          icon="pencil-alt"
-                          fixed-width
-                        ></font-awesome-icon>
-                      </button>
-                      <button
-                        @click="deleteSchedule(schedule)"
-                        class="btn btn-sm btn-dark mr-1"
-                        :disabled="importScheduleDetailVisible"
-                      >
-                        <font-awesome-icon
-                          icon="trash"
-                          fixed-width
-                        ></font-awesome-icon>
-                      </button>
-                      <button
-                        @click="triggerManualImport(schedule.id)"
-                        class="btn btn-sm btn-dark"
-                        :disabled="importScheduleDetailVisible"
-                      >
-                        <font-awesome-icon
-                          icon="play"
-                          fixed-width
-                        ></font-awesome-icon>
-                      </button>
-                    </td>
-                  </tr>
-                </transition-group>
-              </table>
-              <div v-else class="mt-4 small text-center py-3">
-                <translate>No scheduled imports</translate>
-              </div>
-            </transition>
-            <div class="text-right">
-              <button
-                :disabled="importScheduleDetailVisible"
-                @click="newImport"
-                class="btn btn-info newbutton"
-              >
-                <translate>New Import</translate>
-              </button>
-            </div>
+            <input
+              v-model="searchQuery"
+              type="text"
+              class="form-control"
+              placeholder
+              aria-label="Search"
+              aria-describedby="search"
+            />
+          </div>
+        </div>
+        <UITableHeader
+          :columns="[
+            { id: 'id', title: 'ID', class: 'col-1' },
+            { id: 'type', title: 'Type', class: 'col-2' },
+            { id: 'author', title: 'Author', class: 'col-2' },
+            { id: 'schedule', title: 'Schedule', class: 'col-2' },
+            { id: 'email', title: 'Email', class: 'col-2' }
+          ]"
+          :sortable="false"
+        />
+        <UITableBody :data="schedules" v-slot="{ item: schedule }">
+          <div class="py-2 col-1">{{ schedule.id }}</div>
+          <div class="py-2 col-2">{{ schedule.kind.toUpperCase() }}</div>
+          <div class="py-2 col-2">{{ schedule.user }}</div>
+          <div class="py-2 col-2">{{ schedule.config.cron }}</div>
+          <div class="py-2 col-2">
+            <font-awesome-icon
+              v-if="schedule.config['send-email']"
+              class="fa-fw mr-2"
+              fixed-width
+              icon="check"
+            ></font-awesome-icon>
           </div>
+          <div class="py-2 col text-right">
+            <button
+              @click="editSchedule(schedule.id)"
+              class="btn btn-sm btn-dark mr-1"
+              :disabled="importScheduleDetailVisible"
+            >
+              <font-awesome-icon
+                icon="pencil-alt"
+                fixed-width
+              ></font-awesome-icon>
+            </button>
+            <button
+              @click="deleteSchedule(schedule)"
+              class="btn btn-sm btn-dark mr-1"
+              :disabled="importScheduleDetailVisible"
+            >
+              <font-awesome-icon icon="trash" fixed-width></font-awesome-icon>
+            </button>
+            <button
+              @click="triggerManualImport(schedule.id)"
+              class="btn btn-sm btn-dark"
+              :disabled="importScheduleDetailVisible"
+            >
+              <font-awesome-icon icon="play" fixed-width></font-awesome-icon>
+            </button>
+          </div>
+        </UITableBody>
+        <div class="p-3 text-right">
+          <button
+            :disabled="importScheduleDetailVisible"
+            @click="newImport"
+            class="btn btn-info newbutton"
+          >
+            <translate>New Import</translate>
+          </button>
         </div>
       </div>
     </div>