Convert Table To List On Mobile - jQuery flextable

flextable is a tiny responsive table plugin which automatically converts a wide html table into a more readable HTML unordered list on mobile devices. Free to use under the GPLv2 and later license.

How to use it:

1. Download and insert the jQuery flextable plugin after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="js/flextable.js"></script>

2. Just call the function on your existing HTML table and done.

<table id="example">
  <thead>
    <tr>
      <th>Opta</th>
      <th>duntiatin</th>
      <th>explaborpor</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>this</td>
      <td>is</td>
      <td>the</td>
      ...
    </tr>
    <tr>
      <td>this</td>
      <td>is</td>
      <td>the</td>
      ...
    </tr>
  </tbody>
</table>

$('#example').flextable();

3. This will hide the original table and generate an HTML list as follows when the window size is smaller than 768px.

<ul class="flextable-list" id="flextable-base">
  <li class="flextable-head">Opta</li>
  <li class="flextable-data">this</li>
  <li class="flextable-head">duntiatin</li>
  <li class="flextable-data">is</li>
  <li class="flextable-head">explaborpor</li>
  <li class="flextable-data">the</li>
  ...
</ul>

4. Config the responsive table plugin with the following settings:

• bt: 'parent' - parent element width; 'window' - based on window width
• bw: only with bt: 'window', if window width is lower then bw
• cm: 'auto' - on load and on resize; 'load' - only on load
• hparent: selector of parent holding header cells to get tablehead if not defined by thead » used if thead not found AND hcell is empty
• hcell: selector of cells to get tablehead if not defined by thead » used if thead not found
• header: 'before' - add li with header data before data cell; 'after' - add li with header data after data cell; 'none' - ignore header data
• combine: false - displays data as simple list; true - creates a '<li><ul><li>header</li><li>data</li></ul></li>' set if header is included
• debug: shows some information in js console

$('#example').flextable({
  debug: false,
  bt: 'parent', 
  bw: 768, 
  cm: 'auto', 
  hparent: '',
  hcell: '', 
  header: 'before', 
  combine: false
});

---

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