$("#table-basic").reflowTable();

var reflowTable = $("#table-toggle").reflowTable({
  'autoWidth': false,
});
// Add click listener for mobile-on
$(".btn-reflow-toggle-mobile-on").click(function () {
  reflowTable.mobileMode(true);
});
// Add click listener for mobile-off
$(".btn-reflow-toggle-mobile-off").click(function () {
  reflowTable.mobileMode(false);
});
// Add click listener for mobile switcher
$(".btn-reflow-toggle-mobile-switch").click(function () {
  reflowTable.switchMode();
});

$("#table-mobile-only").reflowTable({
  'autoWidth': false,
}).mobileMode(true);

$("#table-customized-css").addClass('reflow-table-customized-style')
.reflowTable({
  'autoWidth': false,
}).mobileMode(true);

// Reflow Table with Events
var reflowEvents = $("#table-events").reflowTable({
  // 'autoWidth': false,
  'eventMobileOn': function() {
    alert('This table is in Mobile mode now');
  },
  'eventMobileOff': function() {
    alert('This table is in Desktop mode now');
  },
});
// Event Binding
$("#table-events").on('reflow-table.mobile.on', function() {
  console.log('This table is in Mobile mode now (Trigger by Event binding)');
});
$("#table-events").on('reflow-table.mobile.off', function() {
  console.log('This table is in Desktop mode now (Trigger by Event binding)');
});

/**
 * DataTables integration
 * 
 * For this integration, we choose `drawCallback` to implement Reflow Table update. 
 * DataTables `page.dt` event is triggered too early before draw, while `createdRow` is lacked 
 * of flexibility.
 * 
 * @see https://datatables.net/reference/option/drawCallback 
 */
var datatables = $('#table-datatables').DataTable({
 
  "drawCallback": function( settings ) {
    // Bind a draw callback to re-build row th title for Reflow Table after
    $("#table-datatables").reflowTable('update');
  }
});
// Initialize Reflow Table (Before or after DataTables are both accepted)
var reflowDataTable = $("#table-datatables").reflowTable({
  'autoWidth': false,
});