Convert Table To List On Mobile - jQuery flextable

File Size: 15.8 KB
Views Total: 3254
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<script src="js/flextable.js"></script>

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

<table id="example">

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>

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
  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.