Skip to content

feat(sortableTable): auto-build filters #1178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wesleyboar wants to merge 4 commits into
base: main
Choose a base branch
from
Open

feat(sortableTable): auto-build filters #1178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ccaf944
feat(sortableTable): build filters from page template and JSON
wesleyboar Jun 9, 2026
02496d3
chore: whitespace
wesleyboar Jun 9, 2026
b13909f
fix(sortableTable): clone header markup into select filter captions
wesleyboar Jun 9, 2026
76cdffa
docs: delete misc comment
wesleyboar Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions docs/plans/sortable-table-finish-deferred.plan.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`

Expand Down
48 changes: 12 additions & 36 deletions taccsite_cms/static/site_cms/js/modules/sortableTable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand All @@ -12,43 +14,17 @@
});
</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", "placeholder":"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>
Expand Down
Loading