1 files changed, 15 insertions, 66 deletions

diff --git a/modules/luci-base/htdocs/luci-static/resources/cbi.js b/modules/luci-base/htdocs/luci-static/resources/cbi.js
index 9200954d1e..3fc6edf29f 100644
--- a/modules/luci-base/htdocs/luci-static/resources/cbi.js
+++ b/modules/luci-base/htdocs/luci-static/resources/cbi.js
@@ -521,9 +521,14 @@ String.prototype.format = function()
 	var quot_esc = [/"/g, '"', /'/g, '''];
 
 	function esc(s, r) {
-		if (typeof(s) !== 'string' && !(s instanceof String))
+		var t = typeof(s);
+
+		if (s == null || t === 'object' || t === 'function')
 			return '';
 
+		if (t !== 'string')
+			s = String(s);
+
 		for (var i = 0; i < r.length; i += 2)
 			s = s.replace(r[i], r[i+1]);
 
@@ -759,72 +764,14 @@ function cbi_update_table(table, data, placeholder) {
 	if (!isElem(target))
 		return;
 
-	target.querySelectorAll('tr.table-titles, .tr.table-titles, .cbi-section-table-titles').forEach(function(thead) {
-		var titles = [];
-
-		thead.querySelectorAll('th, .th').forEach(function(th) {
-			titles.push(th);
-		});
-
-		if (Array.isArray(data)) {
-			var n = 0, rows = target.querySelectorAll('tr, .tr'), trows = [];
-
-			data.forEach(function(row) {
-				var trow = E('tr', { 'class': 'tr' });
-
-				for (var i = 0; i < titles.length; i++) {
-					var text = (titles[i].innerText || '').trim();
-					var td = trow.appendChild(E('td', {
-						'class': titles[i].className,
-						'data-title': (text !== '') ? text : null
-					}, (row[i] != null) ? row[i] : ''));
+	var t = L.dom.findClassInstance(target);
 
-					td.classList.remove('th');
-					td.classList.add('td');
-				}
-
-				trow.classList.add('cbi-rowstyle-%d'.format((n++ % 2) ? 2 : 1));
-
-				trows[n] = trow;
-			});
-
-			for (var i = 1; i <= n; i++) {
-				if (rows[i])
-					target.replaceChild(trows[i], rows[i]);
-				else
-					target.appendChild(trows[i]);
-			}
-
-			while (rows[++n])
-				target.removeChild(rows[n]);
-
-			if (placeholder && target.firstElementChild === target.lastElementChild) {
-				var trow = target.appendChild(E('tr', { 'class': 'tr placeholder' }));
-				var td = trow.appendChild(E('td', { 'class': titles[0].className }, placeholder));
-
-				td.classList.remove('th');
-				td.classList.add('td');
-			}
-		}
-		else {
-			thead.parentNode.style.display = 'none';
-
-			thead.parentNode.querySelectorAll('tr, .tr, .cbi-section-table-row').forEach(function(trow) {
-				if (trow !== thead) {
-					var n = 0;
-					trow.querySelectorAll('th, td, .th, .td').forEach(function(td) {
-						if (n < titles.length) {
-							var text = (titles[n++].innerText || '').trim();
-							if (text !== '')
-								td.setAttribute('data-title', text);
-						}
-					});
-				}
-			});
+	if (!(t instanceof L.ui.Table)) {
+		t = new L.ui.Table(target);
+		L.dom.bindClassInstance(target, t);
+	}
 
-			thead.parentNode.style.display = '';
-		}
-	});
+	t.update(data, placeholder);
 }
 
 function showModal(title, children)
@@ -849,5 +796,7 @@ document.addEventListener('DOMContentLoaded', function() {
 			L.hideTooltip(ev);
 	});
 
-	document.querySelectorAll('.table').forEach(cbi_update_table);
+	L.require('ui').then(function(ui) {
+		document.querySelectorAll('.table').forEach(cbi_update_table);
+	});
 });