uiTable
A faster and better AngularJS data grid.
Trust me (Bernd Wessels). It's epic.

Features

  1. Column Templates
  2. Cell Templates
  3. Fixed Left AND Right Columns
  4. Fixed AND Dynamic Row Height
  5. Column Reordering
  6. Column Resizing
  7. Multiple Column Sorting with Order Indication
  8. Bound AND Unbound Cell Rendering
  9. Easy Extensible through Indexed Row Request Callback

Getting Started

  1. Add references to jQuery and AngularJS.
  2. Add references to uiTable's javascript and css files.
  3. Add uiTable to your application module's dependencies:
    angular.module('myApp',['uiTable']);
  4. 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
            };
        });