jquery-reflow-table

v1.0.3

Published

2 years ago

RWD reflow table switch for mobile UI/UX by collapsing columns

Downloads

406

0High
0Medium
0Low

yidas

RWD responsive table switch-table table-reflow mobile-ui datatables

RWD reflow table switch for mobile UI/UX by collapsing columns

FEATURES

High performance and data consistency with Mobile UI/UX
Pseudo element implementation
DataTables library Integration

OUTLINE

DEMONSTRATION

https://yidas.github.io/jquery-reflow-table/

After applying Reflow-Table, the table will be responsive with reflow mode, which can be switch by browser's width or customized events.

REQUIREMENTS

This library requires the following:

jQuery 1.11.0+ | 2.0+ | 3.0+

INSTALLATION

Bower Installation

bower install jquery-reflow-table

You could also download by NPM or directly copy dist assets. (Last Release for download)

Assets include

Add CSS file into the <head>:

<link href="css/reflow-table.css" rel="stylesheet">

Add JavaScript file either into the <head>, or the bottom of <body>:

<script type="text/javascript" src="js/reflow-table.js"></script>

Markup

Add the classes .table to the tables as usual when using Bootstrap, then wrap them with a identity such as .freeze-table

<table class="table">
  <thead>
    <th>...</th>
  </thead>
  <tbody>
    <td>...</td>
  <tbody>
</table>

Initailize via JavaScript

You can initialize Table Reflow by jQuery extension call:

<script>
   $(function() {
      $('.reflow-table').reflowTable({});
   });
</script>

Or initialize an element by newing object from Table Reflow class:

<script>
   $(function() {
      new ReflowTable('.reflow-table', {});
   });
</script>

The parameter {} is options configuration

Options

Options could be passed via JavaScript with object.

IMPLEMENTATION

Update for Dynamic Content

There is an update method which you can call when the table content has changed like page switching. The method will update or re-build table to ensure that everything is alright for mobile mode.

$('.reflow-table').reflowTable('update');

Or using API usage to update:

var reflowTable = new ReflowTable('.reflow-table');
// Update Freeze Table while the original table is distorted
function afterTablePageChanged() {
   reflowTable.update();
}

DataTables Integration

DataTables is a jQuery library to add advanced interaction controls to your HTML tables the free & easy way.

To integrate with DataTables, you can apply a table with reflowTable before or after applying DataTables, set Reflow Table's update into DataTables callback such as drawCallback to keep updating data. For example:

var datatables = $('#table-datatables').DataTable({
  
  "drawCallback": function( settings ) {
    
    $("#table-datatables").reflowTable('update');
  }
});

var reflowDataTable = $("#table-datatables").reflowTable();

Example: DataTables Library Integration

For DataTables integration, we choose drawCallback to implement Reflow Table update. After all, DataTables page.dt event fires too early before drawing, while createdRow has a lack of flexibility.

Customize Styles

You could customize pseudo td styles by defining CSS for Table Reflow:

<style>
/* Table Reflow Customized CSS for pseudo heads */
.reflow-table td:before {
    min-width: 160px !important;
    text-transform: uppercase;
}
</style>

EVENTS

This library exposes a few events for hooking into reflow-table functionality.

Example:

$("#table").on('reflow-table.mobile.on', function() {
  alert('Mobile mode is now ON');
});

API USAGE

update()

Update or re-build each Reflow Table row th title for dynamic table content

See Update for Dynamic Content

mobileMode()

Switch table to mobile mode or not

function boolean mobileMode(enable=true)

Example: Toggle Mobile Mode by Button

var reflowTable = $('#myTable').reflowTable();

$(".btn-mobile-on").click(function () {
  reflowTable.mobileMode(true);  // Switch to mobile mode
});

$(".btn0-mobile-off").click(function () {
  reflowTable.mobileMode(false); // Switch back to non-mobile mode
});

destroy()

Destroy Freeze Table by same namespace