jQuery Reflow Table

Company Last Trade Trade Time Change Prev Close Open Bid Ask 1y Target Est Lorem Ipsum
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10 Spanning cell
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94 Spanning cell
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32 Spanning cell
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11 Spanning cell
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50 Non-spanning Non-spanning
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12 Non-spanning Non-spanning
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16 Non-spanning Non-spanning

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

Toggle Mobile Mode by Button

Company Last Trade Trade Time Change Prev Close Open Bid Ask 1y Target Est
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16

Example Code
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();
});

Mobile Mode Only
Company Last Trade Trade Time Change Prev Close Open Bid Ask 1y Target Est
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11

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

Customized CSS Styles
Company Last Trade Trade Time Change Prev Close Open Bid Ask 1y Target Est
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94

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

Reflow Table with Events

Company Last Trade Trade Time Change Prev Close Open Bid Ask 1y Target Est
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94

Example Code
// 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 Library Integration

Company Last Trade Trade Time Change Prev Close Open Bid Ask 1y Target Est
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.10
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.20 381.02 378.92 x 300 378.99 x 100 505.94
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11
MSFT Microsoft Corporation 25.50 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.50
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.70 15.94 15.79 x 6100 15.80 x 17000 18.16

Example Code
/**
 * 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,
});