diff --git a/frontend/src/utils/async-table/async-table.js b/frontend/src/utils/async-table/async-table.js
index 0c9e9cb04..ae2db074c 100644
--- a/frontend/src/utils/async-table/async-table.js
+++ b/frontend/src/utils/async-table/async-table.js
@@ -60,9 +60,9 @@ export class AsyncTable {
       this._asyncTableHeader = this._element.dataset.asyncTableDbHeader;
     }
 
-    const table = this._element.querySelector('table');
+    const table = this._element.querySelector('table, .div__course-teaser');
     if (!table) {
-      throw new Error('Async Table utility needs a <table> in its element!');
+      throw new Error('Async Table utility needs a <table> or a <div .div__course-teaser> in its element!');
     }
 
     const rawTableId = table.id;
@@ -94,7 +94,7 @@ export class AsyncTable {
   }
 
   _setupSortableHeaders() {
-    this._ths = Array.from(this._scrollTable.querySelectorAll('th.sortable'))
+    this._ths = Array.from(this._scrollTable.querySelectorAll('th.sortable, .course-header'))
       .map((th) => ({ element: th }));
 
     this._ths.forEach((th) => {
diff --git a/templates/table/course/colonnade.hamlet b/templates/table/course/colonnade.hamlet
index 44d3b19b9..65986997f 100644
--- a/templates/table/course/colonnade.hamlet
+++ b/templates/table/course/colonnade.hamlet
@@ -1,5 +1,5 @@
 $newline never
-<div .scrolltable>
+<div .scrolltable .div__course-teaser *{dbsAttrs'}>
   $maybe wHeaders' <- wHeaders
     <div .course-teaser-header>
       $forall widget <- wHeaders'