Convert Table To List Using Jquery With Bootstrap

Table to List is to convert table to list using Jquery with Bootstrap. TabletoList is a responsive table plugin for jQuery that improves the readability of large tables in mobile view by converting them into lists when the viewport size is smaller than 767 pixels.

How to make use of it:

1. Insert the Table To List plugin after loading the jQuery JavaScript library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/tableToList.js"></script>

2. Call the plugin on the HTML table and specify the container during which the converted listing shows.

<div id="parent" class="container">
  <table class="table" id="myTable">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Task</th>
        <th scope="col">Progress</th>
        <th scope="col">Label</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Update software</td>
        <td>55</td>
        <td>Modrate</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Clean database</td>
        <td>70</td>
        <td>Good</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Cron job running</td>
        <td>30</td>
        <td>Not Bad</td>
      </tr>
    </tbody>
  </table>
</div>
$(function() {
  getList('#myTable', '#parent');
});

Convert Table To List In Mobile View, Table To List Plugin/Github, bootstrap table responsive in mobile view, responsive table columns to rows


See Demo And Download

Official Website(SaurabhAkolkar): Click Here

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

Share