Skip to content

Commit 1842d57

Browse files
AndreyChaykoAlexanderZhukCoherent
AndreyChayko
authored and
AlexanderZhukCoherent
committed
Support fixed header columns (#33)
* Fix Issue #29: Added initial structure * Fix #29: Added samples for bootstrap and material-design themes. Added dataGridUtils module and fixed-header directive * Fix #29: Code refactoring * Fix Issue #29: Modifications to css for fixed-header * Fix Issue #29: Removed unused code * Fix Issue #29: Changed file structure * Fix Issue #29: Added documentation for fixed header to bootstrap sample * Fix Issue #29: Added documentation to material sample * Fix Issue #29: Fixed description of the issue with md-content * Fix Issue #29: Applied changes to documentation.
1 parent 219d41d commit 1842d57

20 files changed

+917
-6
lines changed

‎demo/fixed-header/angular-md-grid.html‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>Angular Data Grid - Material Design</title>
6+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
8+
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
9+
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-blue.min.css">
10+
<link rel="stylesheet" href="../../demo/material/css/angular-data-grid.material.css">
11+
<link rel="stylesheet" href="../../dist/css/fixedHeader/fixed-header.css">
12+
<link rel="stylesheet" href="css/fixed-header.material.css">
13+
</head>
14+
<body ng-app="myApp" ng-controller="myAppController" ng-cloak>
15+
<div layout="column" layout-fill>
16+
<md-toolbar layout="row" layout-align="center">
17+
<div class="md-toolbar-tools" flex-gt-md="60" flex-md="80" flex-sm="100">
18+
<span>Angular Data Grid &mdash; Material Design</span>
19+
<span flex></span>
20+
<md-menu md-position-mode="target-right target">
21+
<md-button ng-click="$mdOpenMenu($event)">
22+
<span layout="row" layout-align="center center">
23+
Change theme
24+
<i class="material-icons">arrow_drop_down</i>
25+
</span>
26+
</md-button>
27+
<md-menu-content>
28+
<md-menu-item>
29+
<a href="../bootstrap/">Bootstrap Design</a>
30+
</md-menu-item>
31+
<md-menu-item>
32+
<a href="index.html"><strong>Material Design</strong></a>
33+
</md-menu-item>
34+
</md-menu-content>
35+
</md-menu>
36+
</div>
37+
</md-toolbar>
38+
39+
<div flex-gt-md="60" flex-md="80" flex-xs="100">
40+
<div>
41+
<h4>Angular Data Grid sample using Material Design styling</h4>
42+
43+
<p>Features enabled: sorting, filtering, sync with browser URLs, pagination and item-per-page functionality.
44+
Out-of-box <a href="https://material.angularjs.org/" target="_blank">Angular Material</a> layout and
45+
input controls used,
46+
along with <a href="http://www.getmdl.io/" target="_blank">Material Design Light</a> default CSS for
47+
grid styling.
48+
<a href="https://github.com/angular-data-grid/angular-data-grid.github.io"
49+
target="_blank">Project GitHub</a></p>
50+
51+
<hr>
52+
<h3>How To Freeze Table Header</h3>
53+
<h4>Using HTML Layout</h4>
54+
<div>
55+
<p>The first option is to split table header and table body in two tables.
56+
One way to do this is to follow the next steps:</p>
57+
<ul>
58+
<li>Use the next styles (with any fixed height) applied to table body container to make it scrollable: <br>
59+
<code>.div-table-body { height: 600px; overflow-x: auto; overflow-y: scroll; } </code> <br>
60+
</li>
61+
<li>Make sure that <code>th</code> elements have the same padding as <code>td</code> elements have.</li>
62+
<li>Use <code>padding-right</code> with the value of scroll bar width to make an offset for the table contains header.</li>
63+
<li>Use <code>width</code> attribute for columns to sync widths.</li>
64+
</ul>
65+
<p>Code Sample:
66+
<pre>
67+
&lt;table&gt;
68+
&lt;thead&gt;
69+
...
70+
&lt;/thead&gt;
71+
&lt;/table&gt;
72+
&lt;table&gt;
73+
&lt;tbody class="div-table-body"&gt;
74+
...
75+
&lt;/tbody&gt;
76+
&lt;/table&gt;
77+
</pre>
78+
</p>
79+
</div>
80+
<h4>Using Stand-alone Directive</h4>
81+
<div>
82+
<p>Another option is to use the directive <code>fixed-header</code> that can be injected to the Data Grid like a separate module <code>dataGridUtils</code>.</p>
83+
<p>To make it work it is needed to perform next steps:</p>
84+
<ul>
85+
<li>Include script to your application: <br>
86+
<code>&lt;script src="bower_components/angular-data-grid/dist/dataGridUtils.min.js"&gt;&lt;/script&gt;</code>
87+
</li>
88+
<li>Include css stylesheets to your application: <br>
89+
<code>&lt;link rel="stylesheet" href="bower_components/angular-data-grid/css/fixedHeader/fixed-header.css"&gt;</code>
90+
</li>
91+
<li>Inject dataGridUtils dependency in your module: <br>
92+
<code>angular.module('myApp', ['dataGrid', ‘dataGridUtils.fixedHeader’])</code>
93+
</li>
94+
<li>Apply the directive <code>fixed-header</code> to the grid table: <br>
95+
<code>&lt;table class="table" fixed-header&gt;</code>
96+
</li>
97+
</ul>
98+
<p>The directive uses <code>z-index: 99</code> if your page uses the same value or higher please make appropriate changes to <b>fixed-header.scss</b> file. </p>
99+
<p>The directive also has additional attribute <code>offset-from-element</code>.
100+
It is needed if you already have some other elements with fixed position above the table.
101+
In this case you need to pass a class or id of the very last element (if there are several) to this attribute
102+
to make the directive take
103+
into consideration that header needs to be fixed with offset from above elements.</p>
104+
<p>Example: <br>
105+
<code>&lt;table class="table" fixed-header offset-from-element
106+
=”.the-class-on-above-fixed-element”&gt;</code> <br>
107+
or <br>
108+
<code>&lt;table class="table" fixed-header offset-from-element
109+
=”=”#the-id-on-above-fixed-element”&gt;</code>
110+
</p>
111+
<br>
112+
<p>The directive subscribes on scroll event, but the event is not fired when directive is used inside <code>&lt;md-content&gt;</code>, so to make it work please use the directive outside the <code>&lt;md-content&gt;</code> container.
113+
For more information about this problem please review this <a href="https://github.com/angular/material/issues/6657">issue</a>.
114+
</p>
115+
</div>
116+
<hr>
117+
</div>
118+
<hr>
119+
<div layout-gt-xs="row" layout-xs="column" layout-align="stretch center">
120+
<div layout="row" layout-align="center start">
121+
<md-input-container md-no-float md-is-error="false" class="md-block flex-gt-xs flex-xs">
122+
<input ng-model="code"
123+
class="md-input"
124+
ng-change="gridActions.filter()"
125+
id="order"
126+
placeholder="Search by Order #"
127+
filter-by="code"
128+
filter-type="text"
129+
aria-invalid="false">
130+
</md-input-container>
131+
</div>
132+
<div layout="row" layout-align="start center">
133+
<md-datepicker ng-model="dateFrom"
134+
flex="100"
135+
md-placeholder="From Date"
136+
is-open="dateFromOpened"
137+
ng-click="dateFromOpened = true"
138+
filter-by="placed"
139+
filter-type="dateFrom"
140+
ng-change="gridActions.filter()"></md-datepicker>
141+
</div>
142+
<div layout="row" layout-align="start center">
143+
<md-datepicker ng-model="dateTo"
144+
flex="100"
145+
md-placeholder="To Date"
146+
is-open="dateToOpened"
147+
ng-click="dateToOpened = true"
148+
filter-by="placed"
149+
filter-type="dateTo"
150+
ng-change="gridActions.filter()"></md-datepicker>
151+
</div>
152+
<div layout="row" layout-align="start center">
153+
<md-button ng-show="dateTo || dateFrom" class="md-raised md-primary"
154+
ng-click="dateTo = ''; dateFrom = ''; gridActions.refresh();">Clear Dates
155+
</md-button>
156+
</div>
157+
</div>
158+
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
159+
<div layout-gt-sm="row" layout-sm="column" layout-align="center">
160+
<div flex-gt-sm="25" flex-sm="100" layout="row" layout-align="start center">
161+
<span>{{filtered.length}} items total</span>
162+
</div>
163+
<div flex-gt-sm="75" flex-xs="100">
164+
<div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
165+
<grid-pagination max-size="5"
166+
boundary-links="true"
167+
class="pagination mdl-shadow--2dp"
168+
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
169+
total-items="paginationOptions.totalItems"
170+
ng-model="paginationOptions.currentPage"
171+
ng-change="reloadGrid()"
172+
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
173+
<md-input-container flex-offset-gt-xs="5" class="items-per-page">
174+
<md-select ng-init="paginationOptions.itemsPerPage = '10'"
175+
ng-model="paginationOptions.itemsPerPage" ng-change="reloadGrid()">
176+
<md-option>10</md-option>
177+
<md-option>25</md-option>
178+
<md-option>50</md-option>
179+
<md-option>75</md-option>
180+
</md-select>
181+
</md-input-container>
182+
</div>
183+
</div>
184+
</div>
185+
<div>
186+
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp" fixed-header>
187+
<thead>
188+
<tr>
189+
<th sortable="code" class="sortable mdl-data-table__cell--non-numeric">
190+
<span>Order #</span>
191+
</th>
192+
<th class="st-sort-disable th-dropdown">
193+
<md-select filter-by="statusDisplay"
194+
filter-type="select"
195+
ng-model="status"
196+
placeholder="Status"
197+
ng-change="filter()">
198+
<md-option value="">All Statuses</md-option>
199+
<md-option ng-repeat="option in statusOptions track by option.value"
200+
value="{{option.value}}">
201+
{{option.text}}
202+
</md-option>
203+
</md-select>
204+
</th>
205+
<th sortable="placed" class="sortable">
206+
<span>Date Placed</span>
207+
</th>
208+
<th sortable='total.value' class="sortable">
209+
<span>Total</span>
210+
</th>
211+
</tr>
212+
</thead>
213+
<tbody>
214+
<tr grid-item>
215+
<td class="mdl-data-table__cell--non-numeric">
216+
<span ng-bind="item.code"></span>
217+
</td>
218+
<td ng-bind="item.statusDisplay"></td>
219+
<td ng-bind="item.placed | date:'MM/dd/yyyy'"></td>
220+
<td ng-bind="item.total.formattedValue"></td>
221+
</tr>
222+
</tbody>
223+
</table>
224+
</div>
225+
<div layout-xs="column" layout="row" layout-align-xs="end end" layout-align="end center">
226+
<grid-pagination max-size="5"
227+
boundary-links="true"
228+
class="pagination"
229+
ng-if="paginationOptions.totalItems > paginationOptions.itemsPerPage"
230+
total-items="paginationOptions.totalItems"
231+
ng-model="paginationOptions.currentPage"
232+
ng-change="reloadGrid()"
233+
items-per-page="paginationOptions.itemsPerPage"></grid-pagination>
234+
<md-input-container flex-offset-gt-xs="5" class="items-per-page">
235+
<md-select ng-init="paginationOptions.itemsPerPage = '10'" ng-model="paginationOptions.itemsPerPage"
236+
ng-change="reloadGrid()">
237+
<md-option>10</md-option>
238+
<md-option>25</md-option>
239+
<md-option>50</md-option>
240+
<md-option>75</md-option>
241+
</md-select>
242+
</md-input-container>
243+
</div>
244+
</div>
245+
<hr>
246+
<md-button class="md-raised md-primary" ng-click="showCode = !showCode">CodePen</md-button>
247+
<div ng-show="showCode" class="codepen-wrap">
248+
<p data-height="768" data-theme-id="21603" data-slug-hash="eJWWpM" data-default-tab="html"
249+
data-user="AngularDataGrid" class='codepen'>See the Pen <a
250+
href='http://codepen.io/AngularDataGrid/pen/eJWWpM'>eJWWpM</a> by AngularDataGrid (<a
251+
href='http://codepen.io/AngularDataGrid'>@AngularDataGrid</a>) on <a href='http://codepen.io'>CodePen</a>.
252+
</p>
253+
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
254+
</div>
255+
<hr>
256+
</div>
257+
</div>
258+
</body>
259+
260+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
261+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.min.js"></script>
262+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-aria.min.js"></script>
263+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-messages.min.js"></script>
264+
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
265+
<script src="../../dist/pagination.min.js"></script>
266+
<script src="../../dist/dataGrid.min.js"></script>
267+
<script src="../../dist/dataGridUtils.min.js"></script>
268+
<script src="js/material-design/demoApp.js"></script>
269+
270+
</html>

0 commit comments

Comments
 (0)