JSFiddle - React, Tailwind, and code Playground

by Zholen

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<input type="radio" name="q" value="amt" data-bind="checked:toggle" /> <label>Amount</label>
<input type="radio" name="q" value="val" data-bind="checked:toggle"/>
<label>Value</label>


<div data-bind="text:toggle"></div>

<table>
    <tbody data-bind="foreach: vert">
        <tr>
            <td>
                <span data-bind="text:$parent.display($data)"></span>
            </td>
        </tr>
    </tbody>
</table>

JavaScript

var vm = function() {
    var self = this;
    this.vert = [{amount:1, value:12},{amount:2, value:14},{amount:10, value:14},{amount:3, value:15},{amount:4, value:16},{amount:5, value:18},{amount:6, value:123},{amount:7, value:543},{amount:8, value:11}]
        
        this.toggle = ko.observable('amt');
    this.display = function(data) {
        return self.toggle() == 'amt' ? data.amount :data.value;
        };
    };

ko.applyBindings(new vm());