-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
76 lines (72 loc) · 3.54 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
<script src="https://rawgit.com/kollavarsham/ng-table-to-csv/11845eaef61652672c68e0c7c45b145f72623cef/dist/ng-table-to-csv.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl" class="box">
<div class="rrow header">
<h1>smart-table with flexbox and CSV export</h1>
<p>Demo showing a smart-table table with sorting, filtering, paging and the table contents container is the element that absorbs
viewport size changes. You can also export the currently display table as a CSV file. You'll probably want to disable paging
before doing the export so you get all the rows.
<a class="btn" title="Export Table" ng-click="csv.generate()" ng-href="{{ csv.link() }}" download="myTable.csv">
<i class="glyphicon glyphicon-new-window"></i>  Export current view as CSV
</a>
</p>
<p>View source code <a href="https://github.com/tomsaleeba/smart-table-flexbox">https://github.com/tomsaleeba/smart-table-flexbox</a></p>
</div>
<table st-table="displayed" class="table table-striped rrow content" export-csv="csv" export-csv-ignore="export-ignore">
<thead>
<tr>
<th st-ratio="20" st-sort="firstName">first name</th>
<th st-ratio="20" st-sort="lastName">last name</th>
<th st-ratio="10" st-sort="age">age</th>
<th st-ratio="30" st-sort="email">email</th>
<th st-ratio="20" st-sort="balance">balance</th>
</tr>
<tr class="export-ignore">
<th st-ratio="20"><input st-search="firstName" placeholder="search for firstname" class="input-sm form-control" type="search" /></th>
<th st-ratio="20"><input st-search="lastName" placeholder="search for lastname" class="input-sm form-control" type="search" /></th>
<th st-ratio="10"><input st-search="age" placeholder="search for age" class="input-sm form-control" type="search" /></th>
<th st-ratio="30"><input st-search="email" placeholder="search for email" class="input-sm form-control" type="search" /></th>
<th st-ratio="20"><input st-search="balance" placeholder="search for balance" class="input-sm form-control" type="search" /></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayed">
<td st-ratio="20">{{row.firstName}}</td>
<td st-ratio="20">{{row.lastName | uppercase}}</td>
<td st-ratio="10">{{row.age}}</td>
<td st-ratio="30">{{row.email}}</td>
<td st-ratio="20">{{row.balance | currency}}</td>
</tr>
</tbody>
<tfoot>
<tr class="export-ignore">
<td>
<div class="form-inline">
<div class="form-group">
<label for="globalsearch">Global search</label>
<input st-search placeholder="global search" class="input-sm form-control" type="search" id="globalsearch" />
</div>
</div>
</td>
<td>Displayed row count: {{displayed.length}}</td>
</tr>
<tr class="export-ignore">
<td colspan="5" class="text-center">
<button ng-click="pagingOff = true; itemsPerPage = 99999">paging off</button>
<button ng-click="pagingOff = false; itemsPerPage = defaultPageSize">paging on</button>
<div ng-hide="pagingOff" st-items-by-page="itemsPerPage" st-pagination=""></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>