JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.8.min.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20132.8.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.8.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/themes/metro/jquery-wijmo.css">
<body ng-app="app" ng-controller="myCtrl">

<h3>Wijmo Grid</h3>

<p>这是可编辑的表格:</p>

<!-- NOTE: cellEdited attribute must include list of parameters! -->
<wij-grid data="data" allow-editing="true" after-cell-edit="cellEdited(e, args)" >
    <wij-grid-column binding="country" width="100" group="true"></wij-grid-column>
    <wij-grid-column binding="product" width="140" ></wij-grid-column>
    <wij-grid-column binding="amount" width="100" format="c2" aggregate="sum" ></wij-grid-column>
</wij-grid>

<p />    
<p>这是用HTML表单展示的同样数据:</p>

<table class="table table-condensed table-hover">
    <thead>
        <th>Country</th>
        <th>Product</th>
        <th>Amount</th>
    </thead>
    <tr ng-repeat="item in data | orderBy:'country'">
        <td>{{item.country}}</td>
        <td>{{item.product}}</td>
        <td>{{item.amount | currency}}</td>
    </tr>
</table>    

<button ng-click="changeAmount()">Change Amount</button>    
    
</body>

CSS

/* change Wijmo widgets font to match bootstrap */
 .ui-widget {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* use auto-width for Wijmo menu items */
 .wijmo-wijmenu .wijmo-wijmenu-parent .wijmo-wijmenu-child {
    width: auto;
    min-width: 150px;
}
/* custom back color for Wijmo tooltips*/
 .wijmo-wijtooltip {
    background-color: #fff9d1;
}

JavaScript

// the module
var app = angular.module("app", []);

// the controller
app.controller("myCtrl", function ($scope) {

    // generate some data
    $scope.data = [];
    var countries = ["US", "Germany", "UK", "Japan", "Italy"];
    var products = ["Widget", "Gadget", "Doohickey" ];
    for (var c = 0; c < countries.length; c++) {
        for (var p = 0; p < products.length; p++) {
            var item = { 
                country: countries[c],
                product: products[p],
                amount: 1000 + Math.random() * 10000
            };
            $scope.data.push(item);
        }
    }
    
    // handle cell edits
    $scope.cellEdited = function(e, args) {
        alert("Cell (" + args.cell.rowIndex() + ", " + args.cell.cellIndex() +") has been edited.");
    };
    
    // change all amounts to show that the binding works
    $scope.changeAmount = function() {
        for (var i = 0; i < $scope.data.length; i++) {
            $scope.data[i].amount += Math.random() * 100;
        }
    };
});
    
// wijmo grid directive
app.directive("wijGrid", [ "$rootScope", "wijUtil", function ($rootScope, wijUtil) {
    return {
        restrict: "E",
        replace: true,
        transclude: true,
        template: "<table ng-transclude/>",
        scope: {
            data: "=",          // List of items to bind to.
            allowEditing: "@",  // Whether user can edit the grid.
            afterCellEdit: "&", // Event that fires after cell edits.
            allowWrapping: "@", // Whether text in grid cells should be allowed to wrap within cells.
            frozenColumns: "@"  // Number of non-scrollable columns
        },
        controller: ["$scope", function ($scope) {
            $scope.columns = [];
            this.addColumn = function (column) {
                $scope.columns.push(column);
            };
        }],
        link: function (scope, element, attrs) {

            // listen to changes in attributes and update the control
          ...