JSFiddle - React, Tailwind, and code Playground

by luisvsilva

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<div data-bind="component: {
    name: 'page-main',
    params: { heading: 'KO Nested Component Example' }
}"></div>


<template id="wrapper">
    <h1 data-bind="text: title"></h1>
    <kvlist params="items: variants, keyHeading: 'Variant Name', valueHeading: 'Variant % Enabled'"></kvlist>
</template>

<template id="kv-list">
    <input type="text" placeholder="key" data-bind="textInput: k">
    <input type="text" placeholder="value" data-bind="textInput: v">
    <button data-bind="click: add">Add</button><br>
        
    <table>
        <thead>
            <tr>
                <th data-bind="text: keyHeading"></th>
                <th data-bind="text: valueHeading"></th>
                <th></th>
            </tr>
        </thead>
        <tbody  data-bind="foreach: items">
            <tr>
                <td data-bind="text: k"></td>
                <td data-bind="text: v"></td>
                <td><a href="#" data-bind="click: $component.delete">delete</a></td>
            </tr>
        </tbody>
    </table>
</template>

CSS

table, tbody, thead, th, tr, td {
    border: 1px solid black;
    border-collapse: collapse;
    margin-top: 20px;
    width: 50%;
}

input: {
    /* margin-right: 20px;   */
}

JavaScript

function KV(k, v) {
    self = this;
    self.k = k;
    self.v = v;
}

function KVPairList(params) {
    var self = this;
    
    self.add = function(){
         self.items.push(new KV(this.k(), this.v()));   
    };
    
    self.delete = function(item){
        self.items.remove(item);  
    }
    self.items = params.items;
    self.keyHeading = params.keyHeading || 'Key';
    self.valueHeading = params.valueHeading || 'Value';
    self.k = ko.observable();
    self.v = ko.observable();   
}



function VM(params) {
    this.title = params && params.heading ? params.heading : 'KO Component Example';
    this.variants = ko.observableArray();
}


ko.components.register('kvlist', {
    viewModel: KVPairList,
    template: {
        element: 'kv-list'
    }
});

ko.components.register('page-main', {
    viewModel: VM,
    template: { element: 'wrapper' }
});

ko.applyBindings();