CollapseTable v1.0.0 — Initial Release
- ✨ Zero-dependency library to make HTML tables responsive by collapsing lower-priority columns into a per-row details view with a +/− toggle.
- 📱 Auto fits table to 100% width; headers and cells are left-aligned by default.
- ♿ Accessible:
aria-expanded,aria-controls, keyboard support (Enter/Space). - 🔧 Simple API:
set,unset,refresh,expandAll,collapseAll. - 🧠 Smart behavior: honors
data-priority,data-min, optionaldata-label; uses Resize & Mutation observers. - 🎛️ Customizable icons/strings/classNames via options; minimal CSS auto-injected.
- 🌐 UMD build; works in plain HTML or alongside frameworks.
- 📦 Artifacts:
dist/collapsetable.min.js,dist/collapsetable.js,dist/collapsetable.min.js.map.
CDN (jsDelivr):
<script src="https://cdn.jsdelivr.net/gh/CodesEasy/CollapseTable.JS@v1.0.0/dist/collapsetable.min.js"></script>
<script>
var collapseTable = new CollapseTable();
collapseTable.set("table1");
</script>Markup example:
<table id="table1">
<thead>
<tr>
<th data-priority="1" data-min="200">Project</th>
<th data-priority="2" data-min="160">Client</th>
<th data-priority="3" data-min="130">Status</th>
<th data-priority="4" data-min="120">Budget</th>
<th data-priority="5" data-min="140">Start</th>
<th data-priority="6" data-min="140">End</th>
</tr>
</thead>
<tbody>
<tr><td>Website Revamp</td><td>Acme</td><td>Active</td><td>₹2,50,000</td><td>2025-06-01</td><td>2025-09-30</td></tr>
</tbody>
</table>Breaking changes: None.