Skip to content

CollapseTable v1.0.0 — Initial Release

Choose a tag to compare

@VishnuSivadasVS VishnuSivadasVS released this 18 Aug 13:03
· 2 commits to latest since this 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, optional data-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.