Bootstrap Table To Cards

Transforms Bootstrap 4 tables to cards if screen width is under a threshold to improve mobile readability.

Setup

Simply download tableToCards.js and reference it in your HTML file(s): <script src="tableToCards.js"></script>.

Requirements

Requires jQuery. If you haven't already, reference jQuery in your HTML file(s): <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>.

Usage

The effect will automatically be applied to all HTML <table>s that have the Bootstrap 4 .table class. If you do not want a specific table to be transformed, add the attribute data-card-ignore. Your tables will now transform in cards if you lower the browser width.

Card (sub-)titles

If you want the cards to have a title, simplay add the attribute data-card-title to a <th> in your table. The same applies for subtitles (multiple subtitles are supported) with the attribute data-card-subtitle.

Action links

In case a column consists of action links, add the attribute data-card-action-links to the corresponding <th>.

Card footer

To add a footer to your cards, you may add the attribute data-card-footer to your <th>. You can also specify a data-card-footer-pattern, where {0} will be replaced with the current cell value, and {1} will display the field name.

Merge columns

If you want multiple table columns to be displayed as one field in the cards, you can do so by adding a name with the data-card-merge-name attribute. All columns with the same name will be merged into one card field. You also need to provide a data-card-merge-index specifying the order in which the fields are merged. The optional data-card-merge-pattern attribute allows you to format your data: {0} will be replaced with the cell value itself. Don't forget to add spaces!

Transform width

By default, a table will be transformed if the screen width is below 566 pixels. You can change this to any size by using data-card-width on the <table> tag itself. Note that only pixel size are supported.