diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 3f9c0589..6521da9e 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -351,3 +351,11 @@ footer {
 .tabulator-row.active-row.tabulator-row-even {
   background-color: var(--table-color-background-row-active-even);
 }
+
+ul.status-filter-bar {
+  align-items: center;
+  display: flex;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
diff --git a/web/app/src/components/JobsTable.vue b/web/app/src/components/JobsTable.vue
index 363d6422..3f170cde 100644
--- a/web/app/src/components/JobsTable.vue
+++ b/web/app/src/components/JobsTable.vue
@@ -41,11 +41,7 @@ export default {
         // { title: "ID", field: "id", headerSort: false, formatter: (cell) => cell.getData().id.substr(0, 8), },
         {
           title: 'Status', field: 'status', sorter: 'string',
-          formatter(cell) {
-            const cellValue = cell.getData();
-            const label = toTitleCase(cellValue.status);
-            return `<span title="${label}" class="indicator status-${cellValue.status}"></span>`;
-          },
+          formatter: (cell) => indicator(cell.getData().status),
         },
         { title: 'Name', field: 'name', sorter: 'string' },
         { title: 'Type', field: 'type', sorter: 'string' },
diff --git a/web/app/src/components/TasksTable.vue b/web/app/src/components/TasksTable.vue
index 4e61a173..4d08c465 100644
--- a/web/app/src/components/TasksTable.vue
+++ b/web/app/src/components/TasksTable.vue
@@ -9,7 +9,7 @@
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import * as datetime from "@/datetime";
 import * as API from '@/manager-api'
-import { toTitleCase } from '@/strings';
+import { indicator } from '@/statusindicator';
 import { apiClient } from '@/stores/api-query-count';
 import { useTasks } from '@/stores/tasks';
 
@@ -32,11 +32,7 @@ export default {
         // { title: "ID", field: "id", headerSort: false, formatter: (cell) => cell.getData().id.substr(0, 8), },
         {
           title: 'Status', field: 'status', sorter: 'string',
-          formatter(cell, formatterParams) { // eslint-disable-line no-unused-vars
-            const cellValue = cell.getData();
-            const label = toTitleCase(cellValue.status);
-            return `<span title="${label}" class="indicator status-${cellValue.status}"></span>`;
-          }
+          formatter: (cell) => indicator(cell.getData().status),
         },
         { title: 'Name', field: 'name', sorter: 'string' },
         {
diff --git a/web/app/src/statusindicator.js b/web/app/src/statusindicator.js
new file mode 100644
index 00000000..7c5b2030
--- /dev/null
+++ b/web/app/src/statusindicator.js
@@ -0,0 +1,16 @@
+import { toTitleCase } from '@/strings';
+
+/**
+ * Construct HTML for a certain job/task status.
+ *
+ * This function is implemented here as JavaScript, because we don't know how to
+ * get Tabulator to use Vue components in cells.
+ *
+ * @param {string} status The job/task status. Assumed to only consist of
+ *     letters and dashes, HTML-safe, and valid as a CSS class name.
+ * @returns the HTML for the status indicator.
+ */
+export function indicator(status) {
+  const label = toTitleCase(status);
+  return `<span title="${label}" class="indicator status-${status}"></span>`;
+}