Features
- Column Templates
- Cell Templates
- Fixed Left AND Right Columns
- Fixed AND Dynamic Row Height
- Column Reordering
- Column Resizing
- Multiple Column Sorting with Order Indication
- Bound AND Unbound Cell Rendering
- Easy Extensible through Indexed Row Request Callback
Getting Started
- Add references to jQuery and AngularJS.
- Add references to uiTable's javascript and css files.
- Add uiTable to your application module's dependencies:
angular.module('myApp',['uiTable']);
- In your html file within the controller where you plan to use ui-table, add:
<div
class="gridStyle" ui-table="tableOptions"></div>
tableOptions is the variable we are
going to bind to where we will initialize our grid options.
CSS
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 800px;
height: 400px;
}
HTML
<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 class="gridStyle" ui-table="tableOptions">
</div>
</body>
</html>
JavaScript
// 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
};
});