Convert HTML Table To Card View On Mobile Using JavaScript

Preview:

Description:

A plain JavaScript responsive table solution that transforms HTML tables into user-friendly card view on mobile (screen size is less than 426px).

Compatible with the latest Bootstrap framework.

How to use it:

1. Insert the JavaScript konvert-table-to-card.min.js into the document.

<script src="konvert-table-to-card.min.js"></script>

2. Initialize the plugin on the HTML table and done.

<table class="display nowrap table table-hover table-striped table-bordered w-100 table-compact mb-0 test1">
  <thead class="">
    <th scope="col" class="paragraphText text-center">Action</th>
    <th scope="col" class="paragraphText text-center theme-sort"><a href="#">ID</a></th>
    <th scope="col" class="paragraphText text-center theme-sort"><a href="#">Photo</a></th>
    <th scope="col" class="paragraphText text-center">Personal Information</th>
    <th scope="col" class="paragraphText text-center theme-sort"><a href="#">Status</a></th>
  </thead>
  <tbody class="tbody-light">
    <tr>
      <td style="max-width: 100px;"><a class="btn-link link-underline text-underline" target="__blank"
          href="#">Edit</a> <a class="btn-link link-underline text-underline" target="__blank" href="#">View</a></td>
      <td>2</td>
      <td>
        <div><img class="img-fluid modal-image"
            src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
            style="max-width: 100px;">
        </div>
      </td>
      <td>[email protected]<br>Member<br>Member<br>12345678<br></td>
      <td>Active</td>
    </tr>
    <tr>
      <td style="max-width: 100px;"><a class="btn-link link-underline text-underline" target="__blank"
          href="#">Edit</a> <a class="btn-link link-underline text-underline" target="__blank" href="#">View</a></td>
      <td>1</td>
      <td>
        <div class="mkd-image-container"><img class="img-fluid modal-image"
            src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
            style="max-width: 100px;">
        </div>
      </td>
      <td>[email protected]<br>Admin<br>Admin<br>12345678<br></td>
      <td>Active</td>
    </tr>
  </tbody>
</table>

TABLE_KONVERTER.init(".test1", {
  // options here
});

3. Set the display mode you prefer:

• simple
• casual
• buddha

TABLE_KONVERTER.init(".test1", {
  style: buddha
});

4. Determine whether to auto-align table cells.

TABLE_KONVERTER.init(".test1", {
  type: 'autoAlign'
});

Changelog:

07/31/2021

• Bugfix