Make Bootstrap 5 Tables More Readable On Mobile Devices – AvalynxTable.js

Preview:

Description:

AvalynxTable is a tiny JavaScript library that makes Bootstrap 5 HTML tables look good and function well on mobile devices.

You know how tables can get all squished and hard to read on smaller screens?  This Bootstrap 5 extension fixes that by automatically stacking rows and columns when the table reaches a certain breakpoint. This makes it much easier to view and interact with table data on phones and tablets.

How to use it:

1. Download and load the AvalynxTable’s files in your Bootstrap project.

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- AvalynxTable -->
<link href="/dist/css/avalynx-table.css" rel="stylesheet" />
<script src="/dist/js/avalynx-table.js"></script>

2. Initialize the AvalynxTable on your Bootstrap table and the library will do the rest.

<table class="avalynx-table table">
  ...
</table>

new AvalynxTable('.avalynx-table');

3. AvalynxTable also allows you to specify custom breakpoints for when tables should stack on top of each other. This flexibility ensures that no matter the device or screen size, your tables will stack and become easily navigable at just the right moment.

<table class="avalynx-table avalynx-table-md table">
  ...
</table>
<table class="avalynx-table avalynx-table-xl table">
  ...
</table>

Changelog:

03/08/2025

• assetscomposer.json added