AvalynxTable: Lightweight, Responsive Tables for Bootstrap 5.3+
With AvalynxTable, my very first vanilla JavaScript library has made it into the Top 10,000 libraries on the jsDelivr CDN — a great milestone! In this post, I’ll share the idea behind it, highlight its main features, and show you how to start using the library in just a few minutes.
Try it out
- Live‑Demo: https://avalynx-table.jbs-newmedia.de/examples/table.html
- GitHub: https://github.com/avalynx/avalynx-table
- jsDelivr: https://www.jsdelivr.com/package/npm/avalynx-table
What Is AvalynxTable?
AvalynxTable is a small, standalone script that transforms plain HTML tables into smart, responsive tables.
When the viewport hits a defined breakpoint, columns and rows “stack” automatically so the content stays clean and readable on smaller screens.
It uses Bootstrap’s own markup and utilities (starting with version 5.3) — no extra dependencies required.
Key Features
- Automatic enrichment: Each table cell automatically gets
data-*attributes based on its header (<th>), so column titles can appear directly within the compact layout. - Targeted activation: Choose exactly which tables should be processed using a simple CSS selector.
- Custom breakpoints: Define the screen width at which the stacked layout kicks in — to perfectly fit your design.
- Zero dependencies: 100% vanilla JavaScript. Just include it and go.
- Accessible: Table headers remain semantically intact, and in stacked mode the header–cell relationships stay clear for screen readers.
Why Another Table Script?
Responsive tables can be tricky — they often either force horizontal scrolling or wrap awkwardly.
AvalynxTable takes a more elegant approach: below a certain breakpoint, each data cell is paired with its corresponding header and displayed as a small labeled block.
That way, both readability and context are preserved — especially on mobile devices.
Conclusion
AvalynxTable turns traditional tables into robust, mobile-friendly components — no build tools, no dependencies, and fully aligned with the Bootstrap look and feel.
Reaching the jsDelivr Top 10,000 is a great motivation to keep improving it further.
If you give it a try, I’d love to hear your feedback, bug reports, or ideas.
Have fun exploring it! 😊