Hi all -
For those of you interested in using reStable stackable tables for your mobile access, I was able to get the code to work.
JavaScript (copy and paste to your API & Code JavaScript box)
KnackInitAsync = function ($, callback) {
// REQUIRED: Explicitly include jQuery
window.$ = $;
/** * jquery-restable - jQuery plugin that make tables responsive
* @version v0.1.2
* @link http://codeb.it/restable/
* @license MIT
*/
* @version v0.1.2
* @link http://codeb.it/restable/
* @license MIT
*/
!function(t,e,n){"use strict";t.fn.ReStable=function(i){function h(e,n){var i,h=[],a={},s=t(e).find("tr").first().children("td,th"),c=0;return l.rowHeaders&&(s=s.slice(1)),s.each(function(){h.push(t(this).text())}),t(e).find("tr").slice(1).each(function(){var e=t(this);c+=1,t.each(h,function(t,n){t+=1,l.rowHeaders?(a[n]||(a[n]={}),l.keepHtml?a[n][e.children("td:nth-child(1)").html()]=e.children("td:nth-child("+(t+1)+")").html():a[n][e.children("td:nth-child(1)").text()]=e.children("td:nth-child("+(t+1)+")").text()):(a[c]||(a[c]={}),a[c][n]=l.keepHtml?e.children("td:nth-child("+t+")").html():e.children("td:nth-child("+t+")").text())})}),i=t("<ul/>",{"class":"tabletolist "+(l.rowHeaders?"rh":"nrh"),id:"tabletolist"+n}).insertBefore(t(e)),t.each(a,function(e,n){var h=t("<li/>",{html:l.rowHeaders?'<span class="titles">'+e+"</span>":""}).appendTo(i),a=t("<ul/>").appendTo(h);t.each(n,function(e,n){t("<li/>",{"class":"cf",html:'<span class="row_headers">'+e+'</span> <span class="row_data '+(l.keepHtml?"html":"")+'">'+n+"</span>"}).appendTo(a)})}),i}var l=t.extend({rowHeaders:!0,maxWidth:480,keepHtml:!1},i);this.each(function(){function i(){t(e).width()>parseInt(l.maxWidth,10)?(t(s).show(),a&&t(a).hide()):(t(s).hide(),a?t(a).show():a=h(s,n))}var a,s=t(this);n+=1,i(),t(e).resize(function(){i()})})},t.ReStable=function(e){t("table").ReStable(e)}}($,this,0);
// REQUIRED: Tell the Knack app to go ahead and finish loading
callback();
};
callback();
};
$(document).on('knack-scene-render.any', function(event, scene) {
$.ReStable('table.kn-table');
});
CSS (copy and paste to your API & Code CSS box)
/**
* jquery-restable - jQuery plugin that make tables responsive
* @version v0.1.2
* @link http://codeb.it/restable/
* @license MIT
*/
ul.tabletolist{border-bottom:2px solid #eee;font-size:14px;margin:0 0 20px}ul.tabletolist img{max-width:100%}ul.tabletolist.nrh{border-bottom:2px solid #ddd}ul.tabletolist.nrh>li{border-top:2px solid #ddd}ul.tabletolist,ul.tabletolist>li>ul{padding:0!important;list-style:none!important}ul.tabletolist>li>ul{margin:0!important}ul.tabletolist>li .titles{background-color:#bbb;display:block;color:#fff;padding:10px;font-weight:800}ul.tabletolist>li>ul>li{font-weight:200;border-bottom:1px solid #eee;padding:10px}ul.tabletolist>li>ul>li:hover{background-color:#efefef}ul.tabletolist>li>ul>li:last-child{border-bottom:none}ul.tabletolist ul>li .row_headers{font-size:12px;max-width:40%;float:left;margin-right:3%}ul.tabletolist ul>li .row_data{float:right;font-weight:800;max-width:57%}ul.tabletolist>li>ul>li{*zoom:1}ul.tabletolist>li>ul>li:before{content:" ";display:table}ul.tabletolist>li>ul>li:after{content:" ";display:table;clear:both}ul.tabletolist ul>li .row_data.html{font-weight:400}ul.tabletolist ul>li .row_data.html ul{list-style-type:disc};