In bound mode all table cells are rendered as AngularJS components and therefore bound to the underlying data source.
Each column can have it's own cell template. If you do not set a template it will use the default one.
Type something in the input field and see that the grid cell updates automagically. Also notice that if you keep on typing, that the rows height automagically adjusts to the content.
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 800px;
height: 400px;
}
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With uiTable Example</title>
<link rel="stylesheet" type="text/css" href="ui-table.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="hamster.js"></script>
<script type="text/javascript" src="mousewheel.js"></script>
<script type="text/javascript" src="ui-table.js"></script>
</head>
<body ng-controller="MyCtrl">
<div style="margin-left: auto; margin-right: auto; position: relative;">
<input type="text" ng-model="tableOptions.data[2].lastName"/>
</div>
<div class="gridStyle" ui-table="tableOptions">
</div>
</body>
</html>
// main.js
var app = angular.module('myApp', ['uiTable']);
app.controller('MyCtrl', function($scope) {
$scope.tableOptions = {
// Use this on IE8 or very slow hardware.
// Your cells will not be data bound
// but use simple string replacement.
//noCellBinding: true,
// Use this to disable the dynamic row height feature
// (improves rendering performance).
//rowsHeight:24,
// use this to set the available with for all columns
// (useful for star-based layouts).
//columnsWidth:1600,
// Use headTemplate to define the column header cell template.
// Use dataTemplate to define the data cell template for this column.
columns:[
{
title:'First Name', field:'firstName',
sort:'', sortOrder:0,
width:'1*', fixed:'',
headTemplate:'', dataTemplate:''
},
{
title:'Last Name', field:'lastName',
sort:'', sortOrder:0,
width:'2*', fixed:'',
headTemplate:'', dataTemplate:''
},
{
title:'First Name', field:'firstName',
sort:'', sortOrder:0,
width:'50px', fixed:'',
headTemplate:'', dataTemplate:''
}
],
// can be an array of row data or a function
// that receives the row index and
// returns the data for the requested row.
data:[
{firstName:"Walter", lastName:"Wurst", age:20},
{firstName:"Peter", lastName:"Pan", age:21},
{firstName:"Erwin", lastName:"Erster", age:22},
{firstName:"Paula", lastName:"Pummel", age:23}
],
// in case data is a function,
// total has to indicate the total number of rows available.
//total:100,
// the selected rows data.
selection: [],
// allow the selection of multiple rows with the
// SHIFT and CTRL keys.
allowMultiSelection: true
};
});