Press "Enter" to skip to content

[Konvert] Convert HTML Table to Card View On Phone

Konvert Table to Card is a plain responsive JavaScript table solution that converts HTML tables into a mobile-friendly card view.

bootstrap table card view, list 2 issues of using tables when designing web pages for use on mobile devices, responsive table card view, bootstrap table to cards

How to make use of it:

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

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

2. Initialize the plugin on the HTML table and complete it.

<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>member@gmail.com<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>admin@gmail.com<br>Admin<br>Admin<br>12345678<br></td>
      <td>Active</td>
    </tr>
  </tbody>
</table>
TABLE_KONVERTER.init(".test1", {
  // options here
});

3. Set the show mode you favor:

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

4. Determine whether or not to auto-align table cells.

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

Convert HTML Table To Card View On Mobile, Konvert Table Plugin/Github, convert table to responsive, bootstrap card table, mobile friendly table html, bootstrap table responsive in mobile view


See Demo And Download

Official Website(kushalcodes): Click Here

This superior jQuery/javascript plugin is developed by kushalcodes. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *