JSFiddle - React, Tailwind, and code Playground
CSS
th, td {
padding:0.4em;
border:1px solid #e0e0e0;
}
JavaScript
var __data = {
"usersList": [
{
"instance": "dtz581_ECS_81",
"mandt": "600",
"bname": "qwe9",
"tcode": "",
"term": "10.20.251.35",
"zeit": "224552",
"type": " 32",
"guiversion": ""
},
{
"instance": "dtz581_ECS_81",
"mandt": "600",
"bname": "qwe9",
"tcode": "",
"term": "10.20.251.35",
"zeit": "224552",
"type": "202",
"guiversion": ""
},
{
"instance": "dtz581_ECS_81",
"mandt": "000",
"bname": "SAPSYS",
"tcode": "",
"term": "176.26.1.8",
"zeit": "224552",
"type": "202",
"guiversion": ""
},
{
"instance": "dtz581_ECS_81",
"mandt": "600",
"bname": "X9999A",
"tcode": "DB6PERF",
"term": "N20POYHDTIN",
"zeit": "224544",
"type": " 4",
"guiversion": "730"
}
],
"usersCount": [
{
"instance": "dtz581_ECS_81",
"count": " 4",
"count_gui": " 1",
"count_rfc": " 1",
"count_plugin": " 2"
}
]
};
var kind = require(enyo/kind);
kind({
name:"DataRow",
tag:"tr",
defaultKind:"DataCell",
});
enyo.kind({
name:"DataCell",
tag:"td"
});
enyo.kind({
name:"DataTable",
tag: "table",
kind: "Repeater",
published:{
map:0,
data:0
},
handlers: {
onSetupItem: "setupItem"
},
components:[
{name:"row", kind:"DataRow"}
],
create:function() {
this.inherited(arguments);
this.mapChanged = this.dataChanged = enyo.bind(this, "refresh");
this.refresh();
},
refresh:function() {
if(this.map && this.data) {
...