JSFiddle - React, Tailwind, and code Playground

by enyojs

CSS

.selected {
    background:lightblue;
}

JavaScript

// Dummy device list - should be enyo.Ajax'ed in from novocom-devices.json
var novacom_devices = [
	{
		"name": "webos3-qemux86",
		"type": "webos3",
		"description": "webOS 3 emulator",
		"host": "127.0.0.1",
		"port": 5522,
		"username": "root",
		"privateKey": {
			"openSsh": "webos"
		}
	},
	{
		"name": "webospro-qemux86",
		"type": "webospro",
		"description": "webOS Pro emulator",
		"host": "127.0.0.1",
		"port": 6622,
		"username": "root",
		"privateKey": {
			"openSsh": "webos"
		}
	},
	{
		"name": "tv",
		"type": "starfish",
		"description": "LG Smart TV",
		"host": "127.0.0.1",
		"port": 22,
		"username": "root",
		"privateKey": {
			"openSsh": "webos"
		}
	}
];

enyo.kind({
    name: "DeviceSetup",
    kind: "FittableColumns",
    bindings: [
        {from: ".model.name", to: ".$.selectedHeader.content"},
        {from: ".model.name", to: ".$.nameInput.value", twoWay:true},
        {from: ".model.description", to: ".$.descInput.value", twoWay:true},
        {from: ".model.host", to: ".$.ipInput.value", twoWay:true},
        {from: ".model.port", to: ".$.portInput.value", twoWay:true},
        {from: ".model.uid", to: ".$.uidInput.value", twoWay:true},
        {from: ".model.privateKey", to: ".$.keyCheckbox.checked"},
        {from: ".model.privateKey", to: ".$.registerButton.content", transform: function(val) {return val ? "Re-register" : "Register";}},
        {from: ".model", to: ".$.removeButton.showing"},
        {from: ".model", to: ".$.selectedTable.showing"},
        {from: ".model.modified", to: ".$.registerButton.disabled", transform: function(val) {return !val}}
    ],
    components: [
        {kind: "FittableRows", components: [
            {kind: "onyx.Toolbar", content: "webOS Devices"},
            {kind: "enyo.DataList", fit:true, ontap:"select", name:"list", style:"width:200px;", components: [
                {kind:"onyx.Item", components: [
                    {tag:"span", content:"* ", bindings: [
                        {...