Convert Table To List In Mobile View - Table To List

Convert Table To List In Mobile View - Table To List
File Size: 3.67 KB
Views Total: 322
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.