header non scrollable

by Venkatesh Manohar

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>
<div class="dataGridHeader">
  <div class="dataGridContent">
<table border="1" style="width=100%;">
    <thead id ="headersTbl"  style="width=100%;" >
					<tr style="width=100%;">
						<th ng-repeat="config in headers"
						ng-show="config.visibility"	>{{config.header}}
						</th>
					</tr>
				</thead>
    <tbody ng-repeat="group in $groups" class="ng-cloak" ng-init="flag = !$first">
        <tr>
            <td class="ng-cloak" colspan="5"> <a href="#" ng-click="flag = !flag">
                    <span ng-show="flag"><i class="icon-fixed-width">&#xf067;</i></span>
                    <span ng-hide="flag"><i class="icon-fixed-width">&#xf068;</i></span>
                </a>
{{group.value}}</td>
        </tr>
        <tr ng-hide="flag">
            <td>data: {{group.value}}</td>
            <td>data: {{group.name}}</td>
            <td>data: {{group.age}}</td>
            <td>data: {{group.allergies}}</td>
            <td ng-show="visibility1">data: {{group.notifications}}</td>
        </tr>
    </tbody>
</table>
    </div>
</div>
<input type="button" name="test" value="test" ng-click="test()"/>

CSS

.dataGridHeader {
	position: relative;
	padding-top: 30px;
	_padding-top: 30px;
	width: 100%;
		
}

.dataGridContent {
	overflow: auto;
	width: 300px;
	height: 150px;
}

.dataGridHeader thead tr {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

JavaScript

var app = angular.module('my-app', [], function () {

})

app.controller('AppController', function ($scope) {
    $scope.headers = [{header:'one',visibility:true},{header:'two',visibility:true},{header:'thr',visibility:true},{header:'four',visibility:true},
                     {header:'five',visibility:false}];

   $scope.$groups = [{
	 name: 'John Smith',
        age: '30',
        allergies: 'latex',
        notifications: 'notifications',
        value: 'One'
    }, {
	 name: 'John Smith',
        age: '30',
        allergies: 'latex',
        notifications: 'notifications',
        value: 'Two'
    }, {
	 name: 'John Smith',
        age: '30',
        allergies: 'latex',
        notifications: 'notifications',
        value: 'Three'
    }, {
	 name: 'John Smith',
        age: '30',
        allergies: 'latex',
        notifications: 'notifications',
        value: 'Four'
    }];
    $scope.visibility1=false;
    $scope.test=function(){
        if ($scope.headers[4].visibility){
        $scope.headers[4].visibility=false;
             $scope.visibility1=false;
        }else{
         $scope.headers[4].visibility=true;
             $scope.visibility1=true;
        }
           // alert($scope.headers[4].visibility);
    }
})