From ccaf9440c504d9fe56544edd37a24f87c302d6c5 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 9 Jun 2026 17:38:18 -0500
Subject: [PATCH 1/4] feat(sortableTable): build filters from page template and
 JSON

Tables with data-sortable-filters get a cloned fieldset before init; shared template ships via delayed assets and tup-ui snippet.
---
 .../sortable-table-finish-deferred.plan.md    |  10 +-
 .../site_cms/js/modules/sortableTable.html    |  45 +--
 .../site_cms/js/modules/sortableTable.js      | 368 +++++++++++++++---
 .../templates/assets_core_delayed.html        |   1 +
 .../sortable_table_filter_templates.html      |  24 ++
 tmp/pr-1169.html                              | 101 ++---
 6 files changed, 375 insertions(+), 174 deletions(-)
 create mode 100644 taccsite_cms/templates/includes/sortable_table_filter_templates.html

diff --git a/docs/plans/sortable-table-finish-deferred.plan.md b/docs/plans/sortable-table-finish-deferred.plan.md
index b0817a4cc..87a3a20ce 100644
--- a/docs/plans/sortable-table-finish-deferred.plan.md
+++ b/docs/plans/sortable-table-finish-deferred.plan.md
@@ -1,24 +1,22 @@
 ---
 name: Sortable table finish (deferred)
-overview: "After Phase 0 merge: steps 5–7 — JS-built filters, cleanup, CKEditor allowlist PR to main."
-status: deferred
+overview: "Steps 5–6 done on branch; step 7 — CKEditor allowlist PR to main."
+status: in-progress
 ---
 
 # Sortable table: Phase 0, then steps 5–7
 
-**Deferred until Phase 0 PRs are merged.** Pick up from here for dynamic filters + hack retirement.
-
 ## Phase 0: Ship current code
 
 Merge as-is: Core-CMS sortableTable, Core-Styles promote util, tup-ui snippet pins.
 
 ## Step 5: Dynamic filter markup in JS
 
-Table-only in CMS; JS builds fieldset/controls/output; ARIA set in code.
+**Done (branch):** Table-only in CMS; `data-sortable-filters` JSON on the table; JS builds fieldset/controls/output with ARIA in code. Legacy CMS-authored filter groups still work.
 
 ## Step 6: Clean up
 
-Remove snippet promote; dedupe JS; bump SHAs.
+**Done (branch):** Snippet promote removed; CDN pins use `Core-Styles@v2.57.0` and `Core-CMS@v4.40.0-rc6`.
 
 ## Step 7: CKEditor ARIA — separate branch → `main`
 
diff --git a/taccsite_cms/static/site_cms/js/modules/sortableTable.html b/taccsite_cms/static/site_cms/js/modules/sortableTable.html
index d4008866a..05f45be3f 100644
--- a/taccsite_cms/static/site_cms/js/modules/sortableTable.html
+++ b/taccsite_cms/static/site_cms/js/modules/sortableTable.html
@@ -1,6 +1,8 @@
 <!-- STYLE -->
 <link href="…/site_cms/css/modules/sortableTable.css" rel="stylesheet" />
 
+<!-- FILTER: one <template id="sortable-table-filters"> per page — includes/sortable_table_filter_templates.html -->
+
 <!-- SCRIPT -->
 <script src="https://cdn.jsdelivr.net/npm/list.js@2.3.1/dist/list.min.js" crossorigin="anonymous"></script>
 <script type="module">
@@ -12,43 +14,14 @@
   });
 </script>
 
-<!-- FILTER -->
-<fieldset class="js-sortable-filter-list sortable-filter-list">
-  <legend class="sr-only">Results in the table update as you type or select filters</legend>
-
-  <label for="example-filter" class="sortable-filter">
-    <input
-      id="example-filter"
-      class="js-sortable-filter sortable-filter__input"
-      aria-controls="example-table"
-      type="search"
-      placeholder="Search…"
-    />
-    <output
-      class="js-sortable-total sortable-filter__total"
-      for="example-filter example-umbrella"
-      aria-atomic="true"
-    ></output>
-  </label>
-
-  <label for="example-umbrella" class="sortable-filter">
-    <span class="sortable-filter__label"><abbr title="Funder or Project">Umbrella</abbr></span>
-    <select
-      id="example-umbrella"
-      class="js-sortable-filter sortable-filter__input"
-      aria-controls="example-table"
-    >
-      <option value="">any</option>
-      <option>Example Org</option>
-      <!-- … -->
-    </select>
-  </label>
-</fieldset>
-
-<!-- TABLE -->
-<table id="example-table" class="js-sortable">
+<!-- TABLE (filters built in JS when data-sortable-filters is set) -->
+<table
+  id="example-table"
+  class="js-sortable"
+  data-sortable-filters='[{"type":"search"},{"type":"select","column":2,"label":"Umbrella"}]'
+>
 <!--
-<table id="example-table" class="js-sortable o-fixed-header-table">
+<table id="example-table" class="js-sortable o-fixed-header-table" data-sortable-filters="…">
 -->
   <caption class="sr-only">…</caption>
   <thead>
diff --git a/taccsite_cms/static/site_cms/js/modules/sortableTable.js b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
index 28f551605..712777e07 100644
--- a/taccsite_cms/static/site_cms/js/modules/sortableTable.js
+++ b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
@@ -13,39 +13,299 @@ const SORT_TABLE_CLASS = 'js-sortable';
 const FILTER_CLASS = 'js-sortable-filter';
 const FILTER_LIST_CLASS = 'js-sortable-filter-list';
 const OUTPUT_CLASS = 'js-sortable-total';
-const LIST_CLASS = 'list';
-const SORT_BUTTON_CLASS = 'sort';
+const THEIR_LIST_CLASS = 'list';
+const THEIR_BUTTON_CLASS = 'sort';
 
 const DEFAULT_TABLE_SELECTOR = 'table.' + SORT_TABLE_CLASS;
 const NOT_SORTABLE_SELECTOR = 'th.not-sortable';
+const FILTERS_DATA_ATTR = 'data-sortable-filters';
+
+/**
+ * Filter chrome: clone <template> nodes from includes/sortable_table_filter_templates.html.
+ * Captions, <option> text, and JSON placeholders use textContent / properties only.
+ */
+const FILTER_TEMPLATE_ID = 'sortable-table-filters';
+const FILTER_SEARCH_LABEL_SELECTOR = 'label:has(input[type="search"])';
+const FILTER_SELECT_LABEL_SELECTOR = 'label:has(select)';
 
 let listJsMissingLogged = false;
 
 /**
+ * @typedef {FilterSpecForSearch | FilterSpecForSelect} FilterSpec
+ * @typedef {{ type: 'search', placeholder?: string }} FilterSpecForSearch
+ * @typedef {{ type: 'select', column: number, label?: string }} FilterSpecForSelect
+ */
+
+/**
+ * @param {string} tableId
+ * @param {ParentNode} scopeElement
+ * @returns {NodeListOf<Element>}
+ */
+function findFilterControls(tableId, scopeElement) {
+  return scopeElement.querySelectorAll(
+    '.' + FILTER_CLASS + '[aria-controls="' + CSS.escape(tableId) + '"]'
+  );
+}
+
+/**
+ * @param {HTMLInputElement | HTMLSelectElement} control
+ * @param {string} tableId
+ */
+function registerFilterControl(control, tableId) {
+  control.classList.add(FILTER_CLASS);
+  control.setAttribute('aria-controls', tableId);
+}
+
+/**
+ * @param {HTMLTableElement} table
+ * @returns {FilterSpec[] | null}
+ */
+function parseFilterSpecs(table) {
+  const json = table.getAttribute(FILTERS_DATA_ATTR);
+  if (!json) {
+    return null;
+  }
+  try {
+    const specs = JSON.parse(json);
+    if (!Array.isArray(specs) || !specs.length) {
+      return null;
+    }
+    return specs;
+  } catch {
+    console.warn(
+      '[sortableTable] Invalid JSON in data-sortable-filters.',
+      table
+    );
+    return null;
+  }
+}
+
+/**
+ * Trimmed text from the header cell at `columnIndex`, or a generic column name.
+ *
+ * @param {HTMLTableElement} table
+ * @param {number} columnIndex
+ * @returns {string}
+ */
+function getHeaderCellTextForColumn(table, columnIndex) {
+  const textFallback = `Column ${columnIndex + 1}`;
+  const cell = table.tHead?.rows[0]?.cells[columnIndex];
+  const textTrimmed = cell?.textContent?.trim() ?? '';
+  const text = textTrimmed || textFallback;
+
+  return text;
+}
+
+/**
+ * Puts `<option>` text in A–Z order (browser locale, case-insensitive).
+ *
+ * @param {string[]} optionTexts
+ */
+function sortSelectOptions(optionTexts) {
+  optionTexts.sort((a, b) =>
+    a.localeCompare(b, undefined, { sensitivity: 'base' })
+  );
+}
+
+/**
+ * @param {HTMLTableElement} table
  * @param {number} columnIndex
+ * @returns {string[]}
+ */
+function collectSelectOptions(table, columnIndex) {
+  const tbody = table.tBodies[0];
+  if (!tbody) {
+    return [];
+  }
+  const seen = new Set();
+  /** @type {string[]} */
+  const options = [];
+
+  for (const row of tbody.rows) {
+    const cell = row.cells[columnIndex];
+    warnIfRowCellMissing(table, cell);
+
+    const optionsFromCellText = getCellText(cell)
+      .split(',')
+      .map((piece) => piece.trim())
+      .filter(Boolean);
+
+    for (const optionText of optionsFromCellText) {
+      if (seen.has(optionText)) {
+        continue;
+      }
+      seen.add(optionText);
+      options.push(optionText);
+    }
+  }
+
+  sortSelectOptions(options);
+  return options;
+}
+
+/**
+ * @param {string} tableId
+ * @param {string} key
  * @returns {string}
  */
-function columnKey(columnIndex) {
-  return `col-${columnIndex}`;
+function getFilterControlId(tableId, key) {
+  return `${tableId}-filter-${key}`;
+}
+
+/**
+ * @param {string} templateId
+ * @returns {DocumentFragment}
+ */
+function clonePageTemplate(templateId) {
+  const template = document.getElementById(templateId);
+
+  if (!(template instanceof HTMLTemplateElement)) {
+    throw new Error(
+      '[sortableTable] Missing <template id="' +
+        templateId +
+        '">. Include includes/sortable_table_filter_templates.html once on the page.'
+    );
+  }
+
+  return template.content.cloneNode(true);
+}
+
+/**
+ * @param {HTMLLabelElement} searchLabel
+ * @param {string} tableId
+ * @param {FilterSpecForSearch} spec
+ * @returns {string} control id
+ */
+function wireSearchFilterLabel(searchLabel, tableId, spec) {
+  const input = searchLabel.querySelector('input[type="search"]');
+  const controlId = getFilterControlId(tableId, 'search');
+
+  searchLabel.htmlFor = controlId;
+  input.id = controlId;
+  if (spec.placeholder) {
+    input.placeholder = spec.placeholder;
+  }
+  registerFilterControl(input, tableId);
+
+  return controlId;
+}
+
+/**
+ * @param {HTMLLabelElement} label
+ * @param {HTMLTableElement} table
+ * @param {FilterSpecForSelect} spec
+ * @returns {string} control id
+ */
+function wireSelectFilterLabel(label, table, spec) {
+  const caption = label.querySelector('.sortable-filter__label');
+  const select = label.querySelector('select.sortable-filter__input');
+  const controlId = getFilterControlId(table.id, `col-${spec.column}`);
+
+  label.htmlFor = controlId;
+  caption.textContent =
+    spec.label ?? getHeaderCellTextForColumn(table, spec.column);
+  select.id = controlId;
+  registerFilterControl(select, table.id);
+
+  for (const optionText of collectSelectOptions(table, spec.column)) {
+    const option = document.createElement('option');
+    option.textContent = optionText;
+    select.append(option);
+  }
+
+  return controlId;
+}
+
+/**
+ * @param {HTMLTableElement} table
+ * @param {FilterSpec[]} specs
+ * @returns {HTMLFieldSetElement}
+ */
+function buildFilterFieldset(table, specs) {
+  const fragment = clonePageTemplate(FILTER_TEMPLATE_ID);
+  const fieldset = /** @type {HTMLFieldSetElement} */ (
+    fragment.querySelector('fieldset')
+  );
+
+  const searchSpec = specs.find((spec) => spec.type === 'search');
+  const selectSpecs = specs.filter((spec) => spec.type === 'select');
+
+  const searchField = fieldset.querySelector(FILTER_SEARCH_LABEL_SELECTOR);
+  const selectField = fieldset.querySelector(FILTER_SELECT_LABEL_SELECTOR);
+  const filterControlIds = [];
+
+  /* buildSearchField */
+  if (searchSpec) {
+    filterControlIds.push(
+      wireSearchFilterLabel(searchField, table.id, searchSpec)
+    );
+  } else {
+    searchField.remove();
+  }
+
+  /* buildSelectField */
+  for (const spec of selectSpecs) {
+    const newSelectField = selectField.cloneNode(true);
+    filterControlIds.push(
+      wireSelectFilterLabel(newSelectField, table, spec)
+    );
+    fieldset.append(newSelectField);
+  }
+  selectField.remove();
+
+  /* buildOutputField */
+  if (searchSpec) {
+    const output = fieldset.querySelector('output.' + OUTPUT_CLASS);
+    output.setAttribute('for', filterControlIds.join(' '));
+  }
+
+  return fieldset;
+}
+
+/**
+ * @param {HTMLTableElement} table
+ */
+function buildFilters(table) {
+  const specs = parseFilterSpecs(table);
+  if (!specs) {
+    return;
+  }
+  if (!table.id) {
+    console.warn(
+      '[sortableTable] data-sortable-filters requires a table id; skipping filter UI.',
+      table
+    );
+    return;
+  }
+
+  const fieldset = buildFilterFieldset(table, specs);
+
+  table.parentNode?.insertBefore(fieldset, table);
 }
 
 /**
+ * @param {HTMLTableElement} table
+ * @param {HTMLTableCellElement | undefined} cell
+ */
+function warnIfRowCellMissing(table, cell) {
+  if (!cell) {
+    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).',
+      table
+    );
+  }
+}
+
+/**
+ * Text List.js uses for sort, search, and filter options (link text when present).
+ *
  * @param {HTMLTableCellElement | undefined} cell
- * @param {{ table: HTMLTableElement, warnedMissingCell?: boolean }} [logContext]
  * @returns {string}
  */
-function getSortValue(cell, logContext) {
+function getCellText(cell) {
   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();
@@ -100,14 +360,12 @@ function syncAriaFromListButtons(columns) {
  * @param {ParentNode} scopeElement
  * @returns {ParentNode | null}
  */
-function filterGroupRoot(tableId, scopeElement) {
-  const selector =
-    '.' + FILTER_CLASS + '[aria-controls="' + CSS.escape(tableId) + '"]';
-  const anchor = scopeElement.querySelector(selector);
-  if (!anchor) {
+function findFilterGroupRoot(tableId, scopeElement) {
+  const filters = findFilterControls(tableId, scopeElement);
+  if (!filters.length) {
     return null;
   }
-  return anchor.closest('.' + FILTER_LIST_CLASS) ?? scopeElement;
+  return filters[0].closest('.' + FILTER_LIST_CLASS) ?? scopeElement;
 }
 
 /**
@@ -115,8 +373,8 @@ function filterGroupRoot(tableId, scopeElement) {
  * @param {ParentNode} scopeElement
  * @returns {HTMLOutputElement[]}
  */
-function findFilterTotalElements(tableId, scopeElement) {
-  const root = filterGroupRoot(tableId, scopeElement);
+function findFilterCountElements(tableId, scopeElement) {
+  const root = findFilterGroupRoot(tableId, scopeElement);
   if (!root) {
     return [];
   }
@@ -129,8 +387,8 @@ function findFilterTotalElements(tableId, scopeElement) {
  * @param {number} count
  * @returns {string}
  */
-function formatResultCount(count) {
-  return count === 1 ? '1 result' : `${count} results`;
+function formatCount(count) {
+  return (count === 1) ? '1 result' : `${count} results`;
 }
 
 /**
@@ -138,16 +396,16 @@ function formatResultCount(count) {
  * @param {SortableTableList} list
  * @param {ParentNode} scopeElement
  */
-function wireFilterTotal(tableId, list, scopeElement) {
-  const totals = findFilterTotalElements(tableId, scopeElement);
-  if (!totals.length) {
+function wireFilterCount(tableId, list, scopeElement) {
+  const countElements = findFilterCountElements(tableId, scopeElement);
+  if (!countElements.length) {
     return;
   }
 
   const sync = () => {
-    const text = formatResultCount(list.matchingItems.length);
-    for (const output of totals) {
-      output.value = text;
+    const text = formatCount(list.matchingItems.length);
+    for (const el of countElements) {
+      el.value = text;
     }
   };
 
@@ -166,18 +424,16 @@ function wireFilters(table, list, scopeElement) {
     return;
   }
 
-  const selector =
-    '.' + FILTER_CLASS + '[aria-controls="' + CSS.escape(tableId) + '"]';
-  const filters = scopeElement.querySelectorAll(selector);
-  if (!filters.length) {
+  const filterControls = findFilterControls(tableId, scopeElement);
+  if (!filterControls.length) {
     return;
   }
 
-  const apply = () => {
-    const terms = [ ...filters ]
-      .map((el) => (el instanceof HTMLInputElement || el instanceof HTMLSelectElement
-        ? el.value
-        : ''
+  const applyFilters = () => {
+    const terms = [ ...filterControls ].map(el =>
+        (el instanceof HTMLInputElement || el instanceof HTMLSelectElement
+          ? el.value
+          : ''
       ).trim())
       .filter(Boolean);
     if (terms.length) {
@@ -187,13 +443,15 @@ function wireFilters(table, list, scopeElement) {
     }
   };
 
-  for (const el of filters) {
-    const eventName =
-      el instanceof HTMLInputElement &&
-      (el.type === 'search' || el.type === 'text')
-        ? 'input'
-        : 'change';
-    el.addEventListener(eventName, apply);
+  for (const el of filterControls) {
+    let eventName = 'change';
+    if (el instanceof HTMLInputElement) {
+      eventName =
+        (el.type === 'search' || el.type === 'text' || el.type === '')
+          ? 'input'
+          : 'change';
+    }
+    el.addEventListener(eventName, applyFilters);
   }
 }
 
@@ -204,6 +462,8 @@ function wireFilters(table, list, scopeElement) {
  * @param {string} buttonClass
  */
 function prepSortableTable(table, scopeElement, notSortableSelector, buttonClass) {
+  buildFilters(table);
+
   const headerRow = table.tHead?.rows[0];
   if (!headerRow) {
     console.warn(
@@ -219,14 +479,12 @@ function prepSortableTable(table, scopeElement, notSortableSelector, buttonClass
     return;
   }
 
-  tbody.classList.add(LIST_CLASS);
+  tbody.classList.add(THEIR_LIST_CLASS);
 
   /** @type {SortableColumn[]} */
   const columns = [];
   /** @type {Array<{ data: string[] }>} */
   const valueNames = [];
-  const logContext = { table, warnedMissingCell: false };
-
   [ ...headerRow.cells ].forEach((cell, columnIndex) => {
     if (!(cell instanceof HTMLTableCellElement)) {
       return;
@@ -240,12 +498,12 @@ function prepSortableTable(table, scopeElement, notSortableSelector, buttonClass
       return;
     }
 
-    const key = columnKey(columnIndex);
+    const key = `col-${columnIndex}`;
     cell.dataset.sortLabel = label;
 
     const button = document.createElement('button');
     button.type = 'button';
-    button.className = [ buttonClass, SORT_BUTTON_CLASS ].filter(Boolean).join(' ');
+    button.className = [ buttonClass, THEIR_BUTTON_CLASS ].filter(Boolean).join(' ');
     button.setAttribute('data-sort', key);
     while (cell.firstChild) {
       button.append(cell.firstChild);
@@ -256,7 +514,9 @@ function prepSortableTable(table, scopeElement, notSortableSelector, buttonClass
     columns.push({ th: cell, button, key, columnIndex });
 
     for (const row of tbody.rows) {
-      row.setAttribute(`data-${key}`, getSortValue(row.cells[columnIndex], logContext));
+      const rowCell = row.cells[columnIndex];
+      warnIfRowCellMissing(table, rowCell);
+      row.setAttribute(`data-${key}`, getCellText(rowCell));
     }
   });
 
@@ -270,14 +530,14 @@ function prepSortableTable(table, scopeElement, notSortableSelector, buttonClass
 
   const list = new window.List(table, {
     valueNames,
-    listClass: LIST_CLASS,
+    listClass: THEIR_LIST_CLASS,
   });
 
   list.on('sortComplete', () => syncAriaFromListButtons(columns));
   syncAriaFromListButtons(columns);
   if (table.id) {
     wireFilters(table, list, scopeElement);
-    wireFilterTotal(table.id, list, scopeElement);
+    wireFilterCount(table.id, list, scopeElement);
   }
 }
 
diff --git a/taccsite_cms/templates/assets_core_delayed.html b/taccsite_cms/templates/assets_core_delayed.html
index 6d1867733..d0c890b9a 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 #}
+{% include "includes/sortable_table_filter_templates.html" %}
 <link rel="stylesheet" href="{% static 'site_cms/css/modules/sortableTable.css' %}" />
 <script
   src="https://cdn.jsdelivr.net/npm/list.js@2.3.1/dist/list.min.js"
diff --git a/taccsite_cms/templates/includes/sortable_table_filter_templates.html b/taccsite_cms/templates/includes/sortable_table_filter_templates.html
new file mode 100644
index 000000000..5d9dc9e6e
--- /dev/null
+++ b/taccsite_cms/templates/includes/sortable_table_filter_templates.html
@@ -0,0 +1,24 @@
+{# Cloned by sortableTable.js when a table has data-sortable-filters. #}
+{# Include once per page (e.g. assets_core_delayed.html or research-projects snippet). #}
+
+<template id="sortable-table-filters">
+  <fieldset class="js-sortable-filter-list sortable-filter-list">
+    <legend class="sr-only">Results in the table update as you type or select filters</legend>
+
+    <label class="sortable-filter mr-auto">
+      <input
+        type="search"
+        class="sortable-filter__input"
+        placeholder="Search…"
+      />
+      <output class="js-sortable-total text-truncate" aria-atomic="true"></output>
+    </label>
+
+    <label class="sortable-filter">
+      <span class="sortable-filter__label"></span>
+      <select class="sortable-filter__input">
+        <option value="">any</option>
+      </select>
+    </label>
+  </fieldset>
+</template>
diff --git a/tmp/pr-1169.html b/tmp/pr-1169.html
index 2fc45d4ad..2a13a0896 100644
--- a/tmp/pr-1169.html
+++ b/tmp/pr-1169.html
@@ -21,12 +21,12 @@
   <link
     rel="stylesheet"
     id="research-projects-assets-alert-css"
-    href="https://cdn.jsdelivr.net/gh/TACC/Core-Styles@v2.57.0-rc3/dist/bootstrap4/components/alert.css"
+    href="https://cdn.jsdelivr.net/gh/TACC/Core-Styles@v2.57.0/dist/bootstrap4/components/alert.css"
   />
   <link
     rel="stylesheet"
     id="research-projects-assets-table-css"
-    cdn-href="https://cdn.jsdelivr.net/gh/TACC/Core-CMS@c7145ec2/taccsite_cms/static/site_cms/css/modules/sortableTable.css"
+    cdn-href="https://cdn.jsdelivr.net/gh/TACC/Core-CMS@v4.40.0-rc6/taccsite_cms/static/site_cms/css/modules/sortableTable.css"
     href="./sortableTable.css"
   />
   <script
@@ -38,15 +38,11 @@
     type="module"
     id="research-projects-assets-table-js"
   >
-    import promoteDataAriaAttributes from 'https://cdn.jsdelivr.net/gh/TACC/Core-Styles@feat/promote-data-aria-attributes/src/lib/_utils/js/promote-data-aria-attributes.js';
-    /* import sortableTable from 'https://cdn.jsdelivr.net/gh/TACC/Core-CMS@c7145ec2/taccsite_cms/static/site_cms/js/modules/sortableTable.js'; */
+    /* import sortableTable from 'https://cdn.jsdelivr.net/gh/TACC/Core-CMS@v4.40.0-rc6/taccsite_cms/static/site_cms/js/modules/sortableTable.js'; */
     import sortableTable from './sortableTable.js';
 
-    const scopeElement = document.getElementById('cms-content');
-
-    promoteDataAriaAttributes(scopeElement);
     sortableTable({
-      scopeElement,
+      scopeElement: document.getElementById('cms-content'),
       buttonClass: 'btn btn-link',
     });
   </script>
@@ -54,87 +50,36 @@
 </head>
 <body>
 
-  <main id="cms-content">
-
-    <fieldset
-      class="js-sortable-filter-list sortable-filter-list"
-      data-aria-describedby="projects-desc"
-    >
-      <legend id="projects-desc" class="sr-only">Project results in table update as you type or select filters</legend>
-      <label
-        for="projects-filter"
-        class="sortable-filter mr-auto"
-      >
-        <i
-          class="icon icon-search icon-md sortable-filter__icon"
-          data-aria-label="Search"
-        >Search</i>
+  <template id="sortable-table-filters">
+    <fieldset class="js-sortable-filter-list sortable-filter-list">
+      <legend class="sr-only">Results in the table update as you type or select filters</legend>
+      <label class="sortable-filter mr-auto">
         <input
-          id="projects-filter"
-          class="js-sortable-filter sortable-filter__input"
-          data-aria-controls="projects-table"
           type="search"
-          placeholder="Search..."
+          class="sortable-filter__input"
+          placeholder="Search…"
         />
-        <output
-          class="js-sortable-total text-truncate"
-          for="projects-filter projects-umbrella projects-category"
-          data-aria-atomic="true"
-        ></output>
-      </label>
-      <label
-        for="projects-umbrella"
-        class="sortable-filter"
-      >
-        <span class="sortable-filter__label">Umbrella</span>
-        <select
-          id="projects-umbrella"
-          class="js-sortable-filter sortable-filter__input"
-          data-aria-controls="projects-table"
-        >
-          <option value="">any</option>
-          <option>CyVerse</option>
-          <option>DesignSafe</option>
-          <option>NSF</option>
-          <option>TACC</option>
-          <option>UT System</option>
-        </select>
+        <output class="js-sortable-total text-truncate" aria-atomic="true"></output>
       </label>
-      <label
-        for="projects-category"
-        class="sortable-filter"
-      >
-        <span class="sortable-filter__label">Category</span>
-        <select
-          id="projects-category"
-          class="js-sortable-filter sortable-filter__input"
-          data-aria-controls="projects-table"
-        >
+      <label class="sortable-filter">
+        <span class="sortable-filter__label"></span>
+        <select class="sortable-filter__input">
           <option value="">any</option>
-          <option>Bioinformatics</option>
-          <option>Cloud / Interactive HPC</option>
-          <option>Cloud Testbed</option>
-          <option>Computational Drug Discovery</option>
-          <option>Cyberinfrastructure</option>
-          <option>Data Management</option>
-          <option>Digital Collections</option>
-          <option>Geoscience / Porous Materials</option>
-          <option>HPC Systems</option>
-          <option>Health Informatics</option>
-          <option>Life Sciences Data</option>
-          <option>Natural Hazards Engineering</option>
-          <option>Natural History / Biodiversity</option>
-          <option>Neuroscience</option>
-          <option>Next-Gen / Composable Computing</option>
-          <option>Portals &amp; Interfaces</option>
-          <option>Research Computing</option>
-          <option>User Services</option>
         </select>
       </label>
     </fieldset>
+  </template>
+
+  <main id="cms-content">
+
     <table
       id="projects-table"
       class="js-sortable o-fixed-header-table w-100"
+      data-sortable-filters='[
+        {"type":"search", "placeholder":"Search..."},
+        {"type":"select", "column":2,"label":"Umbrella"},
+        {"type":"select", "column":3,"label":"Category"}
+      ]'
     >
       <caption class="sr-only">Project Introductions</caption>
       <thead>

From 02496d39300e2b8a72579a114179680adc666d9f Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 9 Jun 2026 18:02:09 -0500
Subject: [PATCH 2/4] chore: whitespace

---
 taccsite_cms/static/site_cms/js/modules/sortableTable.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/taccsite_cms/static/site_cms/js/modules/sortableTable.html b/taccsite_cms/static/site_cms/js/modules/sortableTable.html
index 05f45be3f..57f64622d 100644
--- a/taccsite_cms/static/site_cms/js/modules/sortableTable.html
+++ b/taccsite_cms/static/site_cms/js/modules/sortableTable.html
@@ -18,7 +18,10 @@
 <table
   id="example-table"
   class="js-sortable"
-  data-sortable-filters='[{"type":"search"},{"type":"select","column":2,"label":"Umbrella"}]'
+  data-sortable-filters='[
+    {"type":"search", "placeholder":"Search..."},
+    {"type":"select", "column":2, "label":"Umbrella"}
+  ]'
 >
 <!--
 <table id="example-table" class="js-sortable o-fixed-header-table" data-sortable-filters="…">

From b13909f41a2f3be64e40324d5b2e653c8bf29607 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 9 Jun 2026 18:11:56 -0500
Subject: [PATCH 3/4] fix(sortableTable): clone header markup into select
 filter captions

Filter labels keep abbr and other header HTML; fallback to JSON label or column name when the th is empty.
---
 .../site_cms/js/modules/sortableTable.js      | 26 ++++++++++---------
 tmp/pr-1169.html                              |  4 +--
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/taccsite_cms/static/site_cms/js/modules/sortableTable.js b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
index 712777e07..3d104ff38 100644
--- a/taccsite_cms/static/site_cms/js/modules/sortableTable.js
+++ b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
@@ -22,7 +22,7 @@ const FILTERS_DATA_ATTR = 'data-sortable-filters';
 
 /**
  * Filter chrome: clone <template> nodes from includes/sortable_table_filter_templates.html.
- * Captions, <option> text, and JSON placeholders use textContent / properties only.
+ * Select filter captions clone header cell markup; <option> text and JSON placeholders use textContent / properties.
  */
 const FILTER_TEMPLATE_ID = 'sortable-table-filters';
 const FILTER_SEARCH_LABEL_SELECTOR = 'label:has(input[type="search"])';
@@ -81,19 +81,22 @@ function parseFilterSpecs(table) {
 }
 
 /**
- * Trimmed text from the header cell at `columnIndex`, or a generic column name.
- *
+ * @param {HTMLElement} caption
  * @param {HTMLTableElement} table
- * @param {number} columnIndex
- * @returns {string}
+ * @param {FilterSpecForSelect} spec
  */
-function getHeaderCellTextForColumn(table, columnIndex) {
-  const textFallback = `Column ${columnIndex + 1}`;
+function setSelectFilterCaption(caption, table, spec) {
+  const columnIndex = spec.column;
+  const textFallback = spec.label ?? `Column ${columnIndex + 1}`;
   const cell = table.tHead?.rows[0]?.cells[columnIndex];
-  const textTrimmed = cell?.textContent?.trim() ?? '';
-  const text = textTrimmed || textFallback;
 
-  return text;
+  if (cell instanceof HTMLTableCellElement && cell.textContent?.trim()) {
+    caption.replaceChildren(
+      ...Array.from(cell.childNodes, (node) => node.cloneNode(true))
+    );
+    return;
+  }
+  caption.textContent = textFallback;
 }
 
 /**
@@ -202,8 +205,7 @@ function wireSelectFilterLabel(label, table, spec) {
   const controlId = getFilterControlId(table.id, `col-${spec.column}`);
 
   label.htmlFor = controlId;
-  caption.textContent =
-    spec.label ?? getHeaderCellTextForColumn(table, spec.column);
+  setSelectFilterCaption(caption, table, spec);
   select.id = controlId;
   registerFilterControl(select, table.id);
 
diff --git a/tmp/pr-1169.html b/tmp/pr-1169.html
index 2a13a0896..d388a3272 100644
--- a/tmp/pr-1169.html
+++ b/tmp/pr-1169.html
@@ -85,8 +85,8 @@
       <thead>
         <tr>
           <th>Name</th>
-          <th><abbr title="Description">Desc</abbr></th>
-          <th>Umbrella</th>
+          <th>Description</th>
+          <th><abbr title="Funder or Project">Umbrella</abbr></th>
           <th>Category</th>
         </tr>
       </thead>

From 76cdffa85f7e5b7b0eabd1886ee63f5cf0e1ff6c Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Tue, 9 Jun 2026 18:17:01 -0500
Subject: [PATCH 4/4] docs: delete misc comment

---
 taccsite_cms/static/site_cms/js/modules/sortableTable.js | 4 ----
 1 file changed, 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 3d104ff38..484d5da32 100644
--- a/taccsite_cms/static/site_cms/js/modules/sortableTable.js
+++ b/taccsite_cms/static/site_cms/js/modules/sortableTable.js
@@ -20,10 +20,6 @@ const DEFAULT_TABLE_SELECTOR = 'table.' + SORT_TABLE_CLASS;
 const NOT_SORTABLE_SELECTOR = 'th.not-sortable';
 const FILTERS_DATA_ATTR = 'data-sortable-filters';
 
-/**
- * Filter chrome: clone <template> nodes from includes/sortable_table_filter_templates.html.
- * Select filter captions clone header cell markup; <option> text and JSON placeholders use textContent / properties.
- */
 const FILTER_TEMPLATE_ID = 'sortable-table-filters';
 const FILTER_SEARCH_LABEL_SELECTOR = 'label:has(input[type="search"])';
 const FILTER_SELECT_LABEL_SELECTOR = 'label:has(select)';