Convert Table To List In Mobile View - Table To List

Table To List is a jQuery responsive table plugin that improves the readability of large tables in mobile view by converting them into lists when the viewport size is small than 767px.

Easy to use and compatible with Bootstrap framework.

See Also:

• 10 Best Responsive Table Plugins In JavaScript And CSS

How to use it:

1. Insert the Table To List plugin after loading 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 in which the converted list displays.

<div id="parent" class="container">
  <table class="table" id="myTable">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

$(function() {
  getList('#myTable', '#parent');
});

---

This awesome jQuery plugin is developed by SaurabhAkolkar. For more Advanced Usages, please check the demo page or visit the official website.