Skip to content

Commit cfbd314

Browse files
AndreyChaykoAndreyChayko
committed
Fix Issue #29: Added documentation for fixed header to bootstrap sample
1 parent d15c948 commit cfbd314

File tree

8 files changed

+76
-10
lines changed

8 files changed

+76
-10
lines changed

‎demo/fixed-header/bootstrap-grid.html‎

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link rel="stylesheet" href="css/fixed-header.bootstrap.css">
1212
</head>
1313
<body ng-app="myApp" ng-controller="myAppController" ng-cloak>
14-
<nav class="navbar navbar-inverse">
14+
<nav class="navbar navbar-inverse fixed-nav">
1515
<div class="container">
1616
<a href="#" class="navbar-brand">Angular Data Grid - Bootstrap Design</a>
1717
<div class="navbar-form navbar-right" uib-dropdown>
@@ -30,12 +30,59 @@
3030
</div>
3131
</nav>
3232
<div class="container">
33-
<div class="margin-bottom-basic">
34-
<h3>Angular Data Grid sample using out-of-box Bootstrap styling</h3>
33+
<div class="margin-bottom-basic padding-top-50">
34+
<h2>Angular Data Grid sample using out-of-box Bootstrap styling</h2>
3535
Features enabled: sorting, filtering (using both in-grid and external controls), sync with browser URLs, pagination and items-per-page functionality.
3636
Angular UI Datepicker used for date controls, although you can use any other framework, plugin or styling.
3737
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io" target="_blank">Project GitHub</a>
3838
</div>
39+
<hr>
40+
<h3>How To Freeze Table Header</h3>
41+
<h4>Using HTML Layout</h4>
42+
<div>
43+
<p>The first option is to split table header and table body between two tables
44+
And apply some css styles to these parts to sync table column's widths like in the steps below:</p>
45+
<ul>
46+
<li>Use the next styles applied to table body container to make it scrollable: <br>
47+
<code>.div-table-body { height: 600px; overflow-x: auto; overflow-y: scroll; } </code>
48+
</li>
49+
<li>Make sure that <code>th</code> elements have the same padding as <code>td</code> elements have.</li>
50+
<li>Use <code>padding-right</code> with the value of scroll bar width to make an offset for the table</li>
51+
<li>Use <code>width</code> attribute for columns to sync widths.</li>
52+
</ul>
53+
</div>
54+
<h4>Using Stand-alone Directive</h4>
55+
<div>
56+
<p>Another option is to use the built-in directive <code>fixed-header</code> that is included to the Data Grid like a separate module <code>dataGridUtils</code>.</p>
57+
<p>To make it work it is needed to perform next steps:</p>
58+
<ul>
59+
<li>Include script to your application: <br>
60+
<code>&lt;script src="bower_components/angular-data-grid/dist/dataGridUtils.min.js"&gt;&lt;/script&gt;</code>
61+
</li>
62+
<li>Include css stylesheets to your application: <br>
63+
<code>&lt;link rel="stylesheet" href="bower_components/angular-data-grid/css/fixedHeader/fixed-header.css"&gt;</code>
64+
</li>
65+
<li>Inject dataGridUtils dependency in your module: <br>
66+
<code>angular.module('myApp', ['dataGrid', ‘dataGridUtils.fixedHeader’])</code>
67+
</li>
68+
<li>Apply the directive <code>fixed-header</code> to the grid table: <br>
69+
<code>&lt;table class="table" fixed-header&gt;</code>
70+
</li>
71+
</ul>
72+
<p>The directive also has additional attribute called offset-from-element.
73+
It is needed if you already have some other elements that have fixed position above the table.
74+
In this case you need to pass a class or id of the very last element (if you have several) to this attribute
75+
to make the directive take
76+
into consideration that header needs to be fixed with offset from above elements.</p>
77+
<p>Example: <br>
78+
<code>&lt;table class="table" fixed-header offset-from-element
79+
=”.the-class-on-above-fixed-element”&gt;</code> <br>
80+
or <br>
81+
<code>&lt;table class="table" fixed-header offset-from-element
82+
=”=”#the-id-on-above-fixed-element”&gt;</code>
83+
</p>
84+
</div>
85+
<hr>
3986
<h4>Additional Demos</h4>
4087
<ul>
4188
<li>
@@ -160,7 +207,7 @@ <h4>Additional Demos</h4>
160207
</form>
161208
</div>
162209
</div>
163-
<table class="table table-bordered table-striped" fixed-header>
210+
<table class="table table-bordered table-striped" fixed-header offset-from-element=".fixed-nav">
164211
<thead>
165212
<tr>
166213
<th sortable="code" class="sortable">

‎demo/fixed-header/css/fixed-header.bootstrap.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,11 @@
66
.tbody-offset:before {
77
color: white;
88
height: 60px; }
9+
10+
.fixed-nav {
11+
position: fixed;
12+
width: 100%;
13+
z-index: 5; }
14+
15+
.padding-top-50 {
16+
padding-top: 50px; }

‎demo/fixed-header/js/bootstrap/demoApp.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'dataGridUtils'])
1+
angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'dataGridUtils.fixedHeader'])
22
.controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
33

44
$scope.gridOptions = {

‎demo/fixed-header/js/material-design/demoApp.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
angular.module('myApp', ['dataGrid', 'pagination', 'ngMaterial', 'dataGridUtils'])
1+
angular.module('myApp', ['dataGrid', 'pagination', 'ngMaterial', 'dataGridUtils.fixedHeader'])
22
.controller('myAppController', ['$scope', 'myAppFactory', function ($scope, myAppFactory) {
33

44
$scope.gridOptions = {

‎demo/fixed-header/scss/fixed-header.bootstrap.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,15 @@
1111
color: white;
1212
height: 60px;
1313
}
14-
}
14+
}
15+
16+
.fixed-nav {
17+
position: fixed;
18+
width: 100%;
19+
z-index: 5;
20+
}
21+
22+
.padding-top-50 {
23+
padding-top: 50px;
24+
}
25+

‎dist/dataGridUtils.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
})();
55
(function () {
66
'use strict';
7-
angular.module('dataGridUtils')
7+
angular.module('dataGridUtils.fixedHeader', [])
88
.directive('fixedHeader', FixedHeader);
99

1010
FixedHeader.$inject = ['$window', '$timeout'];

‎dist/dataGridUtils.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/directives/fixedHeader/fixedHeader.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
(function () {
22
'use strict';
3-
angular.module('dataGridUtils')
3+
angular.module('dataGridUtils.fixedHeader', [])
44
.directive('fixedHeader', FixedHeader);
55

66
FixedHeader.$inject = ['$window', '$timeout'];

0 commit comments

Comments
 (0)