Skip to content

Commit

Permalink
add remote-table
Browse files Browse the repository at this point in the history
  • Loading branch information
@olton
olton committed Dec 18, 2024
1 parent 47c8cf8 commit b2c30f2
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 23 deletions.
20 changes: 19 additions & 1 deletion __html__/remote-table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,17 @@
<link href="../lib/metro.css" rel="stylesheet">

<title>Test Remote Table - Metro UI :: Popular HTML, CSS and JS library</title>
<style>
.data-cell-id {
text-align: center;
}
.data-cell-price {
text-align: right;
}
.data-cell-discountPercentage {
text-align: right;
}
</style>
</head>
<body class="cloak">

Expand All @@ -18,20 +29,27 @@ <h1>Remote Table Test</h1>
data-data-key="products"
data-fields="id, title, price, discountPercentage"
data-sortable-fields="id, title, price, discountPercentage"
data-col-size="30,,150,150"
data-cls-table="table-border striped row-hover responsive-sm"
data-cls-pagination="mt-4 d-flex flex-justify-center"
data-captions="ID, Title, Price, Discount"
data-url='https://dummyjson.com/products'
data-search-url='https://dummyjson.com/products/search'
data-search-key="q"
data-on-draw-cell="drawCell"
></div>

</div>
</div>

<script src="../lib/metro.js"></script>
<script>
console.log(Metro.events)
function drawCell(cell, value, name, record, index){
console.log(arguments)
if (name === 'price') {
cell.innerHTML = ( `<span class="${value > 100 ? "fg-red" : ""}">$${value}</span>` )
}
}
</script>
</body>
</html>
19 changes: 11 additions & 8 deletions lib/metro.all.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9044,7 +9044,7 @@
(function($5) {
"use strict";
globalThis.__version__ = "5.1.0";
globalThis.__build_time__ = "18.12.2024, 12:28:32";
globalThis.__build_time__ = "18.12.2024, 23:49:05";
var meta_init = $5.meta("metro:init").attr("content");
var meta_locale = $5.meta("metro:locale").attr("content");
var meta_week_start = $5.meta("metro:week_start").attr("content");
Expand Down Expand Up @@ -9306,7 +9306,7 @@
};
var Metro2 = {
version: "5.1.0",
build_time: "18.12.2024, 12:28:32",
build_time: "18.12.2024, 23:49:05",
buildNumber: 0,
isTouchable: isTouch3,
fullScreenEnabled: document.fullscreenEnabled,
Expand Down Expand Up @@ -10096,11 +10096,9 @@
// source/extensions/string.js
(function() {
"use strict";
String.prototype.toArray = function(delimiter, type, format, locale) {
String.prototype.toArray = function(delimiter = ",", type = "string", format, locale) {
var str3 = this;
var a2;
type = type || "string";
delimiter = delimiter || ",";
format = format === void 0 || format === null ? false : format;
a2 = ("" + str3).split(delimiter);
return a2.map(function(s2) {
Expand Down Expand Up @@ -26478,6 +26476,7 @@
offset: 0,
fields: "",
sortableFields: "",
colSize: "",
sort: "",
sortOrder: "asc",
captions: null,
Expand Down Expand Up @@ -26519,6 +26518,7 @@
this.fields = o3.fields.toArray(",");
this.captions = o3.captions ? o3.captions.toArray(",") : null;
this.rowSteps = o3.rowsSteps.toArray(",");
this.colSize = o3.colSize.toArray(",");
this.limit = +o3.rows;
this.url = o3.url;
this.search = "";
Expand Down Expand Up @@ -26660,7 +26660,10 @@
cell.addClass(`sort-${this.sortOrder}`);
}
}
cell.appendTo(headerRow);
cell.appendTo(headerRow).addClass(`head-cell-${key}`);
if (this.colSize[hIndex]) {
cell.css("width", this.colSize[hIndex]);
}
hIndex++;
}
this.entries.forEach((entry, index) => {
Expand All @@ -26672,9 +26675,9 @@
if (this.fields.length && !this.fields.includes(key)) {
continue;
}
const cell = $5("<td>").attr("data-label", this.captions ? this.captions[hIndex2] : key).addClass("table-cell").html(entry[key]);
const cell = $5("<td>").attr("data-label", this.captions ? this.captions[hIndex2] : key).addClass(`data-cell-${key}`).html(entry[key]);
row.append(cell);
Metro2.utils.exec(o3.onDrawCell, [cell, entry[key], key, entry, index], this);
Metro2.utils.exec(o3.onDrawCell, [cell[0], entry[key], key, entry, index], this);
hIndex2++;
}
});
Expand Down
19 changes: 11 additions & 8 deletions lib/metro.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9044,7 +9044,7 @@
(function($5) {
"use strict";
globalThis.__version__ = "5.1.0";
globalThis.__build_time__ = "18.12.2024, 12:28:30";
globalThis.__build_time__ = "18.12.2024, 23:49:03";
var meta_init = $5.meta("metro:init").attr("content");
var meta_locale = $5.meta("metro:locale").attr("content");
var meta_week_start = $5.meta("metro:week_start").attr("content");
Expand Down Expand Up @@ -9306,7 +9306,7 @@
};
var Metro2 = {
version: "5.1.0",
build_time: "18.12.2024, 12:28:30",
build_time: "18.12.2024, 23:49:03",
buildNumber: 0,
isTouchable: isTouch3,
fullScreenEnabled: document.fullscreenEnabled,
Expand Down Expand Up @@ -10096,11 +10096,9 @@
// source/extensions/string.js
(function() {
"use strict";
String.prototype.toArray = function(delimiter, type, format, locale) {
String.prototype.toArray = function(delimiter = ",", type = "string", format, locale) {
var str3 = this;
var a2;
type = type || "string";
delimiter = delimiter || ",";
format = format === void 0 || format === null ? false : format;
a2 = ("" + str3).split(delimiter);
return a2.map(function(s2) {
Expand Down Expand Up @@ -26478,6 +26476,7 @@
offset: 0,
fields: "",
sortableFields: "",
colSize: "",
sort: "",
sortOrder: "asc",
captions: null,
Expand Down Expand Up @@ -26519,6 +26518,7 @@
this.fields = o3.fields.toArray(",");
this.captions = o3.captions ? o3.captions.toArray(",") : null;
this.rowSteps = o3.rowsSteps.toArray(",");
this.colSize = o3.colSize.toArray(",");
this.limit = +o3.rows;
this.url = o3.url;
this.search = "";
Expand Down Expand Up @@ -26660,7 +26660,10 @@
cell.addClass(`sort-${this.sortOrder}`);
}
}
cell.appendTo(headerRow);
cell.appendTo(headerRow).addClass(`head-cell-${key}`);
if (this.colSize[hIndex]) {
cell.css("width", this.colSize[hIndex]);
}
hIndex++;
}
this.entries.forEach((entry, index) => {
Expand All @@ -26672,9 +26675,9 @@
if (this.fields.length && !this.fields.includes(key)) {
continue;
}
const cell = $5("<td>").attr("data-label", this.captions ? this.captions[hIndex2] : key).addClass("table-cell").html(entry[key]);
const cell = $5("<td>").attr("data-label", this.captions ? this.captions[hIndex2] : key).addClass(`data-cell-${key}`).html(entry[key]);
row.append(cell);
Metro2.utils.exec(o3.onDrawCell, [cell, entry[key], key, entry, index], this);
Metro2.utils.exec(o3.onDrawCell, [cell[0], entry[key], key, entry, index], this);
hIndex2++;
}
});
Expand Down
14 changes: 11 additions & 3 deletions source/components/remote-table/remote-table.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
offset: 0,
fields: "",
sortableFields: "",
colSize: "",
sort: "",
sortOrder: "asc",
captions: null,
Expand Down Expand Up @@ -58,6 +59,7 @@
this.fields = o.fields.toArray(",")
this.captions = o.captions ? o.captions.toArray(",") : null
this.rowSteps = o.rowsSteps.toArray(",")
this.colSize = o.colSize.toArray(",")
this.limit = +o.rows
this.url = o.url
this.search = ""
Expand Down Expand Up @@ -204,7 +206,10 @@
cell.addClass(`sort-${this.sortOrder}`)
}
}
cell.appendTo(headerRow);
cell.appendTo(headerRow).addClass(`head-cell-${key}`);
if (this.colSize[hIndex]) {
cell.css("width", this.colSize[hIndex])
}
hIndex++
}

Expand All @@ -217,9 +222,12 @@
if (this.fields.length && !this.fields.includes(key)) {
continue;
}
const cell = $("<td>").attr("data-label", this.captions ? this.captions[hIndex] : key).addClass("table-cell").html(entry[key]);
const cell = $("<td>").attr("data-label", this.captions ? this.captions[hIndex] : key)
.addClass(`data-cell-${key}`)
.html(entry[key]);

row.append(cell);
Metro.utils.exec(o.onDrawCell, [cell, entry[key], key, entry, index], this);
Metro.utils.exec(o.onDrawCell, [cell[0], entry[key], key, entry, index], this);
hIndex++
}
});
Expand Down
4 changes: 1 addition & 3 deletions source/extensions/string.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,10 @@
(function() {
'use strict';

String.prototype.toArray = function(delimiter, type, format, locale){
String.prototype.toArray = function(delimiter = ",", type = "string", format, locale){
var str = this;
var a;

type = type || "string";
delimiter = delimiter || ",";
format = format === undefined || format === null ? false : format;

a = (""+str).split(delimiter);
Expand Down

0 comments on commit b2c30f2

Please sign in to comment.