JSFiddle - React, Tailwind, and code Playground

by billmcknight

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery-1.7.1.js"></script>
    <script src="source/kendo.all.js"></script>
    <link href="styles/kendo.common.css" rel="stylesheet" />
    <link href="styles/kendo.default.css" rel="stylesheet" />
</head>
<body>
    
<div id="example" class="k-content">

        <table id="products1" class="metrotable">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Units</th>
                    <th>
                        <button class="k-button" data-bind="click: doSomething">Button</button>
                    </th>
                </tr>
            </thead>
            <tbody data-template="row-template" data-bind="source: products">
            </tbody>
        </table>
        <br />
        <table id="products2" data-role="grid" class="metrotable">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Units</th>
                    <th><button class="k-button" data-bind="click: doSomething">Button</button></th>
                </tr>
            </thead>
            <tbody data-template="row-template" data-bind="source: products">
            </tbody>
        </table>      
</div>

<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: name">
        </td>
        <td>
            #: kendo.toString(get("price"), "C") #
        </td>
        <td data-bind="text: unitsInStock"></td>
        <td></td>
    </tr>
</script>

JavaScript

var viewModel = kendo.observable({
    productName: "Product name",
    productPrice: 10,
    productUnitsInStock: 10,
    doSomething: function(e) {
        alert("Something is being done!");            
    },
    products: [
        { name: "Hampton Sofa", price: 989.99, unitsInStock: 39 },
        { name: "Perry Sofa", price: 559.99, unitsInStock: 17 },
        { name: "Donovan Sofa", price: 719.99, unitsInStock: 29 },
        { name: "Markus Sofa", price: 839.99, unitsInStock: 3 }
    ]
});

kendo.bind($("#example"), viewModel);