From 1fe254437c433b4dd38d6f7403b39d36eb4b3c06 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 1 Jun 2026 10:54:40 -0500
Subject: [PATCH 01/13] feat(cms): add sortable project table module

Vanilla sort for table.o-sortable-table (not tablesort: APG button headers).
Init from assets_core_delayed on #cms-content.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../site_cms/js/modules/sortableTable.js      | 140 ++++++++++++++++++
 .../templates/assets_core_delayed.html        |   3 +
 2 files changed, 143 insertions(+)
 create mode 100644 taccsite_cms/static/site_cms/js/modules/sortableTable.js

diff --git a/taccsite_cms/static/site_cms/js/modules/sortableTable.js b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
new file mode 100644
index 000000000..00ad68a33
--- /dev/null
+++ b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
@@ -0,0 +1,140 @@
+/**
+ * Client-side sort for CMS tables marked with `table.o-sortable-table`.
+ *
+ * Not using tristen/tablesort: it sorts focusable <th> (Enter/aria-sort) without a
+ * button in the header (W3C APG); no `th.is-not-sortable` or link-text sort keys.
+ * Matching our editor/CSS contract would duplicate this module.
+ *
+ * Editor markup:
+ * - Table: `o-fixed-header-table o-sortable-table`
+ * - Non-sortable column: `th.is-not-sortable` (e.g. Description)
+ */
+
+const DEFAULT_TABLE_SELECTOR = 'table.o-sortable-table';
+const NOT_SORTABLE_SELECTOR = 'th.is-not-sortable';
+
+/**
+ * @param {HTMLTableCellElement} cell
+ * @returns {string}
+ */
+function getSortValue(cell) {
+  const link = cell.querySelector('a');
+  const text = link ? link.textContent : cell.textContent;
+  return (text ?? '').trim();
+}
+
+/**
+ * @param {HTMLTableElement} table
+ * @param {number} columnIndex
+ * @param {'ascending' | 'descending'} direction
+ */
+function sortTable(table, columnIndex, direction) {
+  const tbody = table.tBodies[0];
+  if (!tbody) {
+    return;
+  }
+
+  const rows = [ ...tbody.rows ];
+  const multiplier = direction === 'ascending' ? 1 : -1;
+
+  rows.sort((rowA, rowB) => {
+    const a = getSortValue(rowA.cells[columnIndex]);
+    const b = getSortValue(rowB.cells[columnIndex]);
+    return multiplier * a.localeCompare(b, undefined, { sensitivity: 'base' });
+  });
+
+  rows.forEach((row) => tbody.appendChild(row));
+}
+
+/**
+ * @param {HTMLTableCellElement} headerCell
+ * @param {'ascending' | 'descending' | 'none'} ariaSort
+ */
+function setHeaderSortState(headerCell, ariaSort) {
+  headerCell.setAttribute('aria-sort', ariaSort);
+  const button = headerCell.querySelector('button');
+  if (button) {
+    button.setAttribute(
+      'aria-label',
+      ariaSort === 'none'
+        ? headerCell.dataset.sortLabel
+        : `${headerCell.dataset.sortLabel}, sorted ${ariaSort}`
+    );
+  }
+}
+
+/**
+ * @param {HTMLTableElement} table
+ * @param {string} notSortableSelector
+ */
+function initSortableTable(table, notSortableSelector) {
+  const headerRow = table.tHead?.rows[0];
+  if (!headerRow) {
+    return;
+  }
+
+  /** @type {HTMLTableCellElement[]} */
+  const sortableHeaders = [];
+
+  [ ...headerRow.cells ].forEach((cell, index) => {
+    if (!(cell instanceof HTMLTableCellElement)) {
+      return;
+    }
+    if (cell.matches(notSortableSelector)) {
+      cell.classList.add('is-not-sortable');
+      return;
+    }
+
+    const label = cell.textContent?.trim() ?? `Column ${index + 1}`;
+    cell.dataset.sortLabel = label;
+    cell.innerHTML = '';
+
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'o-sortable-table__sort';
+    button.textContent = label;
+    cell.append(button);
+
+    button.addEventListener('click', () => {
+      const current = cell.getAttribute('aria-sort');
+      const next =
+        current === 'ascending' ? 'descending' : 'ascending';
+
+      sortableHeaders.forEach((other) => {
+        if (other !== cell) {
+          setHeaderSortState(other, 'none');
+        }
+      });
+
+      setHeaderSortState(cell, next);
+      sortTable(table, index, next);
+    });
+
+    sortableHeaders.push(cell);
+  });
+
+  if (sortableHeaders.length) {
+    const first = sortableHeaders[0];
+    const firstIndex = [ ...headerRow.cells ].indexOf(first);
+    setHeaderSortState(first, 'ascending');
+    sortTable(table, firstIndex, 'ascending');
+  }
+}
+
+/**
+ * @param {object} [options]
+ * @param {ParentNode} [options.scopeElement=document]
+ * @param {string} [options.tableSelector=table.o-sortable-table]
+ * @param {string} [options.notSortableSelector=th.is-not-sortable]
+ */
+export default function sortableTable({
+  scopeElement = document,
+  tableSelector = DEFAULT_TABLE_SELECTOR,
+  notSortableSelector = NOT_SORTABLE_SELECTOR,
+} = {}) {
+  scopeElement.querySelectorAll(tableSelector).forEach((table) => {
+    if (table instanceof HTMLTableElement) {
+      initSortableTable(table, notSortableSelector);
+    }
+  });
+}
diff --git a/taccsite_cms/templates/assets_core_delayed.html b/taccsite_cms/templates/assets_core_delayed.html
index e349ebabc..75ba5ddbf 100644
--- a/taccsite_cms/templates/assets_core_delayed.html
+++ b/taccsite_cms/templates/assets_core_delayed.html
@@ -10,6 +10,7 @@
 {# TACC/Core-CMS #}
 <script type="module">
   import updateEmailLinkHrefs from '{% static "site_cms/js/modules/updateEmailLinkHrefs.js" %}';
+  import sortableTable from '{% static "site_cms/js/modules/sortableTable.js" %}';
 
   const scopeElement = document.getElementById('cms-content');
   const fakeText = '__REMOVE_THIS__';
@@ -20,4 +21,6 @@
     subject: 'data-subject',
     body: 'data-body'
   });
+
+  sortableTable({ scopeElement });
 </script>

From b981afbff8f5e965a7a1e212a379d156a96d587a Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 1 Jun 2026 17:21:51 -0500
Subject: [PATCH 02/13] fix(cms): guard sortable table when rows lack cells

Return empty sort keys and warn in the console so CMS editors can fix markup.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../site_cms/js/modules/sortableTable.js      | 47 +++++++++++++++++--
 1 file changed, 43 insertions(+), 4 deletions(-)

diff --git a/taccsite_cms/static/site_cms/js/modules/sortableTable.js b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
index 00ad68a33..2ac10adbd 100644
--- a/taccsite_cms/static/site_cms/js/modules/sortableTable.js
+++ b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
@@ -14,15 +14,51 @@ const DEFAULT_TABLE_SELECTOR = 'table.o-sortable-table';
 const NOT_SORTABLE_SELECTOR = 'th.is-not-sortable';
 
 /**
- * @param {HTMLTableCellElement} cell
+ * @param {HTMLTableCellElement | undefined} cell
+ * @param {{ table: HTMLTableElement, warnedMissingCell?: boolean }} [logContext]
  * @returns {string}
  */
-function getSortValue(cell) {
+function getSortValue(cell, logContext) {
+  if (!cell) {
+    if (logContext && !logContext.warnedMissingCell) {
+      logContext.warnedMissingCell = true;
+      console.warn(
+        '[sortableTable] A row is missing a cell for the sorted column. Use the same number of columns on every row in the CMS table (watch colspan/rowspan).',
+        logContext.table
+      );
+    }
+    return '';
+  }
+
   const link = cell.querySelector('a');
   const text = link ? link.textContent : cell.textContent;
   return (text ?? '').trim();
 }
 
+/**
+ * @param {HTMLTableElement} table
+ * @param {HTMLTableRowElement} headerRow
+ */
+function warnIfIrregularRows(table, headerRow) {
+  const tbody = table.tBodies[0];
+  if (!tbody) {
+    return;
+  }
+
+  const expected = headerRow.cells.length;
+
+  for (let i = 0; i < tbody.rows.length; i++) {
+    const row = tbody.rows[i];
+    if (row.cells.length < expected) {
+      console.warn(
+        `[sortableTable] Row ${i + 1} has ${row.cells.length} cells but the header has ${expected}. Fix table markup in the CMS before publishing.`,
+        table
+      );
+      return;
+    }
+  }
+}
+
 /**
  * @param {HTMLTableElement} table
  * @param {number} columnIndex
@@ -36,10 +72,11 @@ function sortTable(table, columnIndex, direction) {
 
   const rows = [ ...tbody.rows ];
   const multiplier = direction === 'ascending' ? 1 : -1;
+  const logContext = { table, warnedMissingCell: false };
 
   rows.sort((rowA, rowB) => {
-    const a = getSortValue(rowA.cells[columnIndex]);
-    const b = getSortValue(rowB.cells[columnIndex]);
+    const a = getSortValue(rowA.cells[columnIndex], logContext);
+    const b = getSortValue(rowB.cells[columnIndex], logContext);
     return multiplier * a.localeCompare(b, undefined, { sensitivity: 'base' });
   });
 
@@ -73,6 +110,8 @@ function initSortableTable(table, notSortableSelector) {
     return;
   }
 
+  warnIfIrregularRows(table, headerRow);
+
   /** @type {HTMLTableCellElement[]} */
   const sortableHeaders = [];
 

From cda57a3d82942eefb8c0c2da46cf996d7fa60564 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 1 Jun 2026 17:37:36 -0500
Subject: [PATCH 03/13] refactor(cms): move sortable table styles to
 is-sortable module

Pair sortableTable.css with JS; use table.is-sortable and c-button--as-link.
Note Core-Components as future home.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../site_cms/css/modules/sortableTable.css    | 32 +++++++++++++++++++
 .../js/modules/README-sortableTable.md        |  9 ++++++
 .../site_cms/js/modules/sortableTable.js      | 18 ++++++-----
 .../templates/assets_core_delayed.html        |  1 +
 4 files changed, 52 insertions(+), 8 deletions(-)
 create mode 100644 taccsite_cms/static/site_cms/css/modules/sortableTable.css
 create mode 100644 taccsite_cms/static/site_cms/js/modules/README-sortableTable.md

diff --git a/taccsite_cms/static/site_cms/css/modules/sortableTable.css b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
new file mode 100644
index 000000000..3317b2575
--- /dev/null
+++ b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
@@ -0,0 +1,32 @@
+/**
+ * Coupled with sortableTable.js (table.is-sortable).
+ * Table look and feel come from Core-Styles base (elements/table).
+ * TODO: Consider a shared sortable-table component in TACC/Core-Components.
+ */
+
+table.is-sortable thead th:not(.is-not-sortable) {
+  padding: 0;
+}
+
+table.is-sortable .is-sortable__sort {
+  width: 100%;
+}
+
+table.is-sortable .is-sortable__sort:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: -2px;
+}
+
+table.is-sortable th[aria-sort='ascending'] .is-sortable__sort::after,
+table.is-sortable th[aria-sort='descending'] .is-sortable__sort::after {
+  margin-inline-start: 0.35em;
+  font-size: 0.85em;
+}
+
+table.is-sortable th[aria-sort='ascending'] .is-sortable__sort::after {
+  content: '▲';
+}
+
+table.is-sortable th[aria-sort='descending'] .is-sortable__sort::after {
+  content: '▼';
+}
diff --git a/taccsite_cms/static/site_cms/js/modules/README-sortableTable.md b/taccsite_cms/static/site_cms/js/modules/README-sortableTable.md
new file mode 100644
index 000000000..37ac98dc1
--- /dev/null
+++ b/taccsite_cms/static/site_cms/js/modules/README-sortableTable.md
@@ -0,0 +1,9 @@
+# `sortableTable` module
+
+Client-side sort for CMS tables with class `is-sortable` on the `<table>`.
+
+Load **`sortableTable.css`** and **`sortableTable.js`** together (see `assets_core_delayed.html` or the tup-ui **research-projects-assets** snippet).
+
+Editors: `o-fixed-header-table is-sortable`; non-sortable column: `th.is-not-sortable`.
+
+**TODO:** Consider elevating this behavior to [TACC/Core-Components](https://github.com/TACC/Core-Components) as a reusable table-sort component.
diff --git a/taccsite_cms/static/site_cms/js/modules/sortableTable.js b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
index 2ac10adbd..6eefd3592 100644
--- a/taccsite_cms/static/site_cms/js/modules/sortableTable.js
+++ b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
@@ -1,16 +1,18 @@
 /**
- * Client-side sort for CMS tables marked with `table.o-sortable-table`.
+ * Client-side sort for CMS tables with class `is-sortable` on the table.
  *
- * Not using tristen/tablesort: it sorts focusable <th> (Enter/aria-sort) without a
- * button in the header (W3C APG); no `th.is-not-sortable` or link-text sort keys.
- * Matching our editor/CSS contract would duplicate this module.
+ * Load with `sortableTable.css` (same folder under `site_cms/css/modules/`).
+ * TODO: Consider TACC/Core-Components as a shared sortable-table component.
+ *
+ * Not using tristen/tablesort: focusable `<th>` only; no button-in-header (APG);
+ * no `th.is-not-sortable` or link-text sort keys without duplicating this module.
  *
  * Editor markup:
- * - Table: `o-fixed-header-table o-sortable-table`
+ * - Table: `o-fixed-header-table is-sortable`
  * - Non-sortable column: `th.is-not-sortable` (e.g. Description)
  */
 
-const DEFAULT_TABLE_SELECTOR = 'table.o-sortable-table';
+const DEFAULT_TABLE_SELECTOR = 'table.is-sortable';
 const NOT_SORTABLE_SELECTOR = 'th.is-not-sortable';
 
 /**
@@ -130,7 +132,7 @@ function initSortableTable(table, notSortableSelector) {
 
     const button = document.createElement('button');
     button.type = 'button';
-    button.className = 'o-sortable-table__sort';
+    button.className = 'c-button c-button--as-link is-sortable__sort';
     button.textContent = label;
     cell.append(button);
 
@@ -163,7 +165,7 @@ function initSortableTable(table, notSortableSelector) {
 /**
  * @param {object} [options]
  * @param {ParentNode} [options.scopeElement=document]
- * @param {string} [options.tableSelector=table.o-sortable-table]
+ * @param {string} [options.tableSelector=table.is-sortable]
  * @param {string} [options.notSortableSelector=th.is-not-sortable]
  */
 export default function sortableTable({
diff --git a/taccsite_cms/templates/assets_core_delayed.html b/taccsite_cms/templates/assets_core_delayed.html
index 75ba5ddbf..f50073914 100644
--- a/taccsite_cms/templates/assets_core_delayed.html
+++ b/taccsite_cms/templates/assets_core_delayed.html
@@ -8,6 +8,7 @@
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
 
 {# TACC/Core-CMS #}
+<link rel="stylesheet" href="{% static 'site_cms/css/modules/sortableTable.css' %}" />
 <script type="module">
   import updateEmailLinkHrefs from '{% static "site_cms/js/modules/updateEmailLinkHrefs.js" %}';
   import sortableTable from '{% static "site_cms/js/modules/sortableTable.js" %}';

From 18511ff7437e08ed7f612ad4c639b9950f0dbb41 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 2 Jun 2026 16:57:11 -0500
Subject: [PATCH 04/13] docs: remove excess in filename

---
 .../js/modules/{README-sortableTable.md => sortableTable.md}      | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename taccsite_cms/static/site_cms/js/modules/{README-sortableTable.md => sortableTable.md} (100%)

diff --git a/taccsite_cms/static/site_cms/js/modules/README-sortableTable.md b/taccsite_cms/static/site_cms/js/modules/sortableTable.md
similarity index 100%
rename from taccsite_cms/static/site_cms/js/modules/README-sortableTable.md
rename to taccsite_cms/static/site_cms/js/modules/sortableTable.md

From 7c853e403c12fc888e72e5d3b7446d51f7f7911f Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 2 Jun 2026 16:57:47 -0500
Subject: [PATCH 05/13] fix: cell layout not matching static table

---
 .../static/site_cms/css/modules/sortableTable.css        | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/taccsite_cms/static/site_cms/css/modules/sortableTable.css b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
index 3317b2575..f65af5fc7 100644
--- a/taccsite_cms/static/site_cms/css/modules/sortableTable.css
+++ b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
@@ -4,12 +4,9 @@
  * TODO: Consider a shared sortable-table component in TACC/Core-Components.
  */
 
-table.is-sortable thead th:not(.is-not-sortable) {
-  padding: 0;
-}
-
-table.is-sortable .is-sortable__sort {
-  width: 100%;
+table.is-sortable .c-button--as-link {
+    line-height: inherit;
+    height: 1lh;
 }
 
 table.is-sortable .is-sortable__sort:focus-visible {

From cad1256eb81bf640e7b56b547787dc639ad04f8d Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 2 Jun 2026 17:03:17 -0500
Subject: [PATCH 06/13] fix: assumptions in css

---
 .../static/site_cms/css/modules/sortableTable.css      | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/taccsite_cms/static/site_cms/css/modules/sortableTable.css b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
index f65af5fc7..c3c4425bf 100644
--- a/taccsite_cms/static/site_cms/css/modules/sortableTable.css
+++ b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
@@ -4,26 +4,28 @@
  * TODO: Consider a shared sortable-table component in TACC/Core-Components.
  */
 
+/* So cell height matches that of a normal table */
 table.is-sortable .c-button--as-link {
     line-height: inherit;
     height: 1lh;
 }
 
 table.is-sortable .is-sortable__sort:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: -2px;
+  outline-offset: 0.25em;
 }
 
 table.is-sortable th[aria-sort='ascending'] .is-sortable__sort::after,
 table.is-sortable th[aria-sort='descending'] .is-sortable__sort::after {
+  font-size: smaller;
+}
+table.is-sortable th[aria-sort='ascending'] .is-sortable__sort:not(.c-button--as-link)::after,
+table.is-sortable th[aria-sort='descending'] .is-sortable__sort:not(.c-button--as-link)::after {
   margin-inline-start: 0.35em;
-  font-size: 0.85em;
 }
 
 table.is-sortable th[aria-sort='ascending'] .is-sortable__sort::after {
   content: '▲';
 }
-
 table.is-sortable th[aria-sort='descending'] .is-sortable__sort::after {
   content: '▼';
 }

From ad16f95980581243cb02ba69db950aae68076f50 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 2 Jun 2026 17:04:31 -0500
Subject: [PATCH 07/13] refactor: nest css

---
 .../site_cms/css/modules/sortableTable.css    | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/taccsite_cms/static/site_cms/css/modules/sortableTable.css b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
index c3c4425bf..6da67cb01 100644
--- a/taccsite_cms/static/site_cms/css/modules/sortableTable.css
+++ b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
@@ -4,28 +4,30 @@
  * TODO: Consider a shared sortable-table component in TACC/Core-Components.
  */
 
-/* So cell height matches that of a normal table */
-table.is-sortable .c-button--as-link {
-    line-height: inherit;
-    height: 1lh;
-}
+.table.is-sortable {
+  /* So cell height matches that of a normal table */
+  & .c-button--as-link {
+      line-height: inherit;
+      height: 1lh;
+  }
 
-table.is-sortable .is-sortable__sort:focus-visible {
-  outline-offset: 0.25em;
-}
+  & .is-sortable__sort:focus-visible {
+    outline-offset: 0.25em;
+  }
 
-table.is-sortable th[aria-sort='ascending'] .is-sortable__sort::after,
-table.is-sortable th[aria-sort='descending'] .is-sortable__sort::after {
-  font-size: smaller;
-}
-table.is-sortable th[aria-sort='ascending'] .is-sortable__sort:not(.c-button--as-link)::after,
-table.is-sortable th[aria-sort='descending'] .is-sortable__sort:not(.c-button--as-link)::after {
-  margin-inline-start: 0.35em;
-}
+  & th[aria-sort='ascending'] .is-sortable__sort::after,
+  & th[aria-sort='descending'] .is-sortable__sort::after {
+    font-size: smaller;
+  }
+  & th[aria-sort='ascending'] .is-sortable__sort:not(.c-button--as-link)::after,
+  & th[aria-sort='descending'] .is-sortable__sort:not(.c-button--as-link)::after {
+    margin-inline-start: 0.35em;
+  }
 
-table.is-sortable th[aria-sort='ascending'] .is-sortable__sort::after {
-  content: '▲';
-}
-table.is-sortable th[aria-sort='descending'] .is-sortable__sort::after {
-  content: '▼';
+  & th[aria-sort='ascending'] .is-sortable__sort::after {
+    content: '▲';
+  }
+  & th[aria-sort='descending'] .is-sortable__sort::after {
+    content: '▼';
+  }
 }

From 557adf3d3644c07930becd400224ad5fb52cc284 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 2 Jun 2026 17:29:05 -0500
Subject: [PATCH 08/13] refactor: css

---
 .../site_cms/css/modules/sortableTable.css    | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/taccsite_cms/static/site_cms/css/modules/sortableTable.css b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
index 6da67cb01..ae9443fd3 100644
--- a/taccsite_cms/static/site_cms/css/modules/sortableTable.css
+++ b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
@@ -4,30 +4,33 @@
  * TODO: Consider a shared sortable-table component in TACC/Core-Components.
  */
 
-.table.is-sortable {
-  /* So cell height matches that of a normal table */
+table.is-sortable {
+  /* So known button styles have no ill effect */
   & .c-button--as-link {
+      /* So cell layout is not influenced by button */
       line-height: inherit;
       height: 1lh;
+      justify-content: start;
+
+      /* So entire cell is clickable */
+      width: 100%;
   }
 
+  /* To improve legibility during visible focus */
   & .is-sortable__sort:focus-visible {
     outline-offset: 0.25em;
   }
 
-  & th[aria-sort='ascending'] .is-sortable__sort::after,
-  & th[aria-sort='descending'] .is-sortable__sort::after {
-    font-size: smaller;
-  }
-  & th[aria-sort='ascending'] .is-sortable__sort:not(.c-button--as-link)::after,
-  & th[aria-sort='descending'] .is-sortable__sort:not(.c-button--as-link)::after {
-    margin-inline-start: 0.35em;
-  }
-
-  & th[aria-sort='ascending'] .is-sortable__sort::after {
-    content: '▲';
-  }
-  & th[aria-sort='descending'] .is-sortable__sort::after {
-    content: '▼';
+  /* Sort indicators */
+  & th[aria-sort="ascending"] .is-sortable__sort::after { content: '▲'; }
+  & th[aria-sort="descending"] .is-sortable__sort::after { content: '▼'; }
+  & th[aria-sort="ascending"] .is-sortable__sort,
+  & th[aria-sort="descending"] .is-sortable__sort {
+    &::after {
+      font-size: smaller;
+    }
+    &:not(.c-button--as-link)::after {
+      margin-inline-start: 0.35em;
+    }
   }
 }

From 64988bcdfc88ff35eee9d76f72d8830e38d86e53 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 2 Jun 2026 17:37:37 -0500
Subject: [PATCH 09/13] fix(css): bootstrap button support

---
 .../site_cms/css/modules/sortableTable.css    | 32 ++++++++++++-------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/taccsite_cms/static/site_cms/css/modules/sortableTable.css b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
index ae9443fd3..51d967fed 100644
--- a/taccsite_cms/static/site_cms/css/modules/sortableTable.css
+++ b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
@@ -5,20 +5,28 @@
  */
 
 table.is-sortable {
-  /* So known button styles have no ill effect */
-  & .c-button--as-link {
-      /* So cell layout is not influenced by button */
-      line-height: inherit;
-      height: 1lh;
-      justify-content: start;
+  /* Buttons */
+  & .is-sortable__sort {
+    width: 100%; /* so entire cell is clickable */
 
-      /* So entire cell is clickable */
-      width: 100%;
-  }
+    /* To improve legibility during visible focus */
+    &:focus-visible {
+      outline-offset: 0.25em;
+    }
 
-  /* To improve legibility during visible focus */
-  & .is-sortable__sort:focus-visible {
-    outline-offset: 0.25em;
+    /* So known button styles have no ill effect */
+    &.btn-link,
+    &.c-button--as-link {
+        line-height: inherit;
+        height: 1lh;
+        justify-content: start;
+    }
+    &.c-button--as-link {
+        height: 1lh;
+    }
+    &.btn-link {
+        padding: 0;
+    }
   }
 
   /* Sort indicators */

From 1d80a9ae047040252704475306243120c7019a6f Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 2 Jun 2026 17:40:37 -0500
Subject: [PATCH 10/13] fix(css): align toggle

---
 taccsite_cms/static/site_cms/css/modules/sortableTable.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/taccsite_cms/static/site_cms/css/modules/sortableTable.css b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
index 51d967fed..fb2c514ba 100644
--- a/taccsite_cms/static/site_cms/css/modules/sortableTable.css
+++ b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
@@ -20,6 +20,7 @@ table.is-sortable {
         line-height: inherit;
         height: 1lh;
         justify-content: start;
+        vertical-align: baseline;
     }
     &.c-button--as-link {
         height: 1lh;

From 3e6c06d00d15eb3b0fe0d0700ea2963f0b63392c Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 2 Jun 2026 18:05:32 -0500
Subject: [PATCH 11/13] refactor(sortableTable): class mgmt, custom btns

---
 .../site_cms/js/modules/sortableTable.js      | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/taccsite_cms/static/site_cms/js/modules/sortableTable.js b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
index 6eefd3592..e78db8948 100644
--- a/taccsite_cms/static/site_cms/js/modules/sortableTable.js
+++ b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
@@ -12,8 +12,12 @@
  * - Non-sortable column: `th.is-not-sortable` (e.g. Description)
  */
 
-const DEFAULT_TABLE_SELECTOR = 'table.is-sortable';
-const NOT_SORTABLE_SELECTOR = 'th.is-not-sortable';
+const SORT_TABLE_CLASS = 'is-sortable';
+const NOT_SORTABLE_CLASS = 'is-not-sortable';
+const SORT_BUTTON_CLASS = 'is-sortable__sort';
+
+const DEFAULT_TABLE_SELECTOR = 'table.' + SORT_TABLE_CLASS;
+const NOT_SORTABLE_SELECTOR = 'th.' + NOT_SORTABLE_CLASS;
 
 /**
  * @param {HTMLTableCellElement | undefined} cell
@@ -105,8 +109,9 @@ function setHeaderSortState(headerCell, ariaSort) {
 /**
  * @param {HTMLTableElement} table
  * @param {string} notSortableSelector
+ * @param {string} buttonClass
  */
-function initSortableTable(table, notSortableSelector) {
+function initSortableTable(table, notSortableSelector, buttonClass) {
   const headerRow = table.tHead?.rows[0];
   if (!headerRow) {
     return;
@@ -122,7 +127,7 @@ function initSortableTable(table, notSortableSelector) {
       return;
     }
     if (cell.matches(notSortableSelector)) {
-      cell.classList.add('is-not-sortable');
+      cell.classList.add(NOT_SORTABLE_CLASS);
       return;
     }
 
@@ -132,7 +137,7 @@ function initSortableTable(table, notSortableSelector) {
 
     const button = document.createElement('button');
     button.type = 'button';
-    button.className = 'c-button c-button--as-link is-sortable__sort';
+    button.className = buttonClass + ' ' + SORT_BUTTON_CLASS;
     button.textContent = label;
     cell.append(button);
 
@@ -167,15 +172,17 @@ function initSortableTable(table, notSortableSelector) {
  * @param {ParentNode} [options.scopeElement=document]
  * @param {string} [options.tableSelector=table.is-sortable]
  * @param {string} [options.notSortableSelector=th.is-not-sortable]
+ * @param {string} [options.buttonClass=''] // e.g. 'c-button c-button--as-link'
  */
 export default function sortableTable({
   scopeElement = document,
   tableSelector = DEFAULT_TABLE_SELECTOR,
   notSortableSelector = NOT_SORTABLE_SELECTOR,
+  buttonClass = '',
 } = {}) {
   scopeElement.querySelectorAll(tableSelector).forEach((table) => {
     if (table instanceof HTMLTableElement) {
-      initSortableTable(table, notSortableSelector);
+      initSortableTable(table, notSortableSelector, buttonClass);
     }
   });
 }

From 044a1b5c013668ddae996e9d618837138bca4b47 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 2 Jun 2026 18:18:56 -0500
Subject: [PATCH 12/13] docs: sortableTable.js

---
 .../static/site_cms/js/modules/sortableTable.js       | 11 +++++------
 .../static/site_cms/js/modules/sortableTable.md       |  9 ---------
 2 files changed, 5 insertions(+), 15 deletions(-)
 delete mode 100644 taccsite_cms/static/site_cms/js/modules/sortableTable.md

diff --git a/taccsite_cms/static/site_cms/js/modules/sortableTable.js b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
index e78db8948..9ab0a3e99 100644
--- a/taccsite_cms/static/site_cms/js/modules/sortableTable.js
+++ b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
@@ -1,11 +1,10 @@
 /**
- * Client-side sort for CMS tables with class `is-sortable` on the table.
+ * Client-side sort for CMS tables with class `is-sortable`
  *
- * Load with `sortableTable.css` (same folder under `site_cms/css/modules/`).
- * TODO: Consider TACC/Core-Components as a shared sortable-table component.
- *
- * Not using tristen/tablesort: focusable `<th>` only; no button-in-header (APG);
- * no `th.is-not-sortable` or link-text sort keys without duplicating this module.
+ * TODO: Consider adding to TACC/Core-Components
+ * NOTE: Not using tristen/tablesort cuz it forgoes button in header cell (a11y)
+ * SEE: https://github.com/tristen/tablesort
+ * SEE: https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/
  *
  * Editor markup:
  * - Table: `o-fixed-header-table is-sortable`
diff --git a/taccsite_cms/static/site_cms/js/modules/sortableTable.md b/taccsite_cms/static/site_cms/js/modules/sortableTable.md
deleted file mode 100644
index 37ac98dc1..000000000
--- a/taccsite_cms/static/site_cms/js/modules/sortableTable.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# `sortableTable` module
-
-Client-side sort for CMS tables with class `is-sortable` on the `<table>`.
-
-Load **`sortableTable.css`** and **`sortableTable.js`** together (see `assets_core_delayed.html` or the tup-ui **research-projects-assets** snippet).
-
-Editors: `o-fixed-header-table is-sortable`; non-sortable column: `th.is-not-sortable`.
-
-**TODO:** Consider elevating this behavior to [TACC/Core-Components](https://github.com/TACC/Core-Components) as a reusable table-sort component.

From 0bffc89cc0fea73a3bd6f6f1b67213933b47d9cd Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 2 Jun 2026 18:27:52 -0500
Subject: [PATCH 13/13] docs: polished, cosnistent, coupling notice

---
 taccsite_cms/static/site_cms/css/modules/sortableTable.css | 5 ++---
 taccsite_cms/static/site_cms/js/modules/sortableTable.js   | 1 +
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/taccsite_cms/static/site_cms/css/modules/sortableTable.css b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
index fb2c514ba..890b93f90 100644
--- a/taccsite_cms/static/site_cms/css/modules/sortableTable.css
+++ b/taccsite_cms/static/site_cms/css/modules/sortableTable.css
@@ -1,7 +1,6 @@
 /**
- * Coupled with sortableTable.js (table.is-sortable).
- * Table look and feel come from Core-Styles base (elements/table).
- * TODO: Consider a shared sortable-table component in TACC/Core-Components.
+ * Styles for CMS tables with class `is-sortable`
+ * IMPORTANT: Coupled with sortableTable.js
  */
 
 table.is-sortable {
diff --git a/taccsite_cms/static/site_cms/js/modules/sortableTable.js b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
index 9ab0a3e99..e1a5d01af 100644
--- a/taccsite_cms/static/site_cms/js/modules/sortableTable.js
+++ b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
@@ -1,5 +1,6 @@
 /**
  * Client-side sort for CMS tables with class `is-sortable`
+ * IMPORTANT: Coupled with `sortableTable.css`
  *
  * TODO: Consider adding to TACC/Core-Components
  * NOTE: Not using tristen/tablesort cuz it forgoes button in header cell (a11y)