({}, {
12 | dataset: demoData
13 | });
14 | }
15 |
16 | interface Person {
17 | name: string;
18 | age: number;
19 | }
--------------------------------------------------------------------------------
/demo-apps/ts-webpack/src/shared/demo-data.ts:
--------------------------------------------------------------------------------
1 | export const demoData = [{"name":"Karen","age":45,"money":798,"country":"Czech Republic"},{"name":"Cat","age":49,"money":749,"country":"Czech Republic"},{"name":"Bismark","age":48,"money":672,"country":"Denmark"},{"name":"Markus","age":41,"money":695,"country":"Costa Rica"},{"name":"Anthony","age":45,"money":559,"country":"Japan"},{"name":"Alex","age":55,"money":645,"country":"Czech Republic"},{"name":"Stephane","age":57,"money":662,"country":"Japan"},{"name":"Alex","age":59,"money":523,"country":"American Samoa"},{"name":"Tony","age":56,"money":540,"country":"Canada"},{"name":"Cat","age":57,"money":746,"country":"China"},{"name":"Christian","age":59,"money":572,"country":"Canada"},{"name":"Tony","age":60,"money":649,"country":"Japan"},{"name":"Cat","age":47,"money":675,"country":"Denmark"},{"name":"Stephane","age":50,"money":674,"country":"China"},{"name":"Markus","age":40,"money":549,"country":"Portugal"},{"name":"Anthony","age":53,"money":660,"country":"Bahamas"},{"name":"Stephane","age":54,"money":549,"country":"China"},{"name":"Karen","age":50,"money":611,"country":"American Samoa"},{"name":"Therese","age":53,"money":754,"country":"China"},{"name":"Bismark","age":49,"money":791,"country":"Canada"},{"name":"Daraek","age":56,"money":640,"country":"Costa Rica"},{"name":"Tony","age":43,"money":674,"country":"Canada"},{"name":"Karen","age":47,"money":700,"country":"Portugal"},{"name":"Therese","age":47,"money":718,"country":"Czech Republic"},{"name":"Karen","age":50,"money":655,"country":"Japan"},{"name":"Daraek","age":59,"money":581,"country":"American Samoa"},{"name":"Daraek","age":60,"money":595,"country":"Portugal"},{"name":"Markus","age":44,"money":607,"country":"China"},{"name":"Simon","age":58,"money":728,"country":"Japan"},{"name":"Simon","age":49,"money":655,"country":"Bahamas"}];
--------------------------------------------------------------------------------
/demo-apps/ts-webpack/src/shared/images/webpack-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/esvit/ng-table/b6d5d0bfeef923c617081ffe80a0266d7fb4aa33/demo-apps/ts-webpack/src/shared/images/webpack-logo.png
--------------------------------------------------------------------------------
/demo-apps/ts-webpack/src/shared/index.ts:
--------------------------------------------------------------------------------
1 | export { demoData } from './demo-data';
2 | export { Person } from './person';
--------------------------------------------------------------------------------
/demo-apps/ts-webpack/src/shared/person.ts:
--------------------------------------------------------------------------------
1 | export interface Person {
2 | name: string;
3 | age: number;
4 | }
--------------------------------------------------------------------------------
/demo-apps/ts-webpack/src/shared/site.scss:
--------------------------------------------------------------------------------
1 | body {
2 | background: url("images/webpack-logo.png") no-repeat bottom right;
3 | }
--------------------------------------------------------------------------------
/demo-apps/ts-webpack/src/shared/vendor-styles.scss:
--------------------------------------------------------------------------------
1 | @import '~bootstrap-css-only/css/bootstrap.css';
2 | @import '~ng-table/src/styles/ng-table.scss'
--------------------------------------------------------------------------------
/demo-apps/ts-webpack/src/type-declarations/angular-route.d.ts:
--------------------------------------------------------------------------------
1 | declare module '@types/angular-route' {
2 | import mod = angular.route;
3 | export = mod;
4 | }
--------------------------------------------------------------------------------
/demo-apps/ts-webpack/src/type-declarations/global.d.ts:
--------------------------------------------------------------------------------
1 | // fake the nodejs require function so that we can add 'require' calls for html files;
2 | // these calls to 'require' will then be converted by webpack ngtemplate-loader
3 | // note that I would have prefered to use standard es2015 import for these
4 | // html files but that would have meant using typescript 2 feature of implicit
5 | // ambient modules which in turn would have meant turning off noImplicitAny checks
6 | // which is a VERY bad idea
7 | declare function require(path: string): any;
--------------------------------------------------------------------------------
/demo-apps/ts-webpack/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "module": "commonjs",
5 | "moduleResolution": "node",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "emitDecoratorMetadata": true,
9 | "experimentalDecorators": true,
10 | "removeComments": false,
11 | "noEmitOnError": true, // WARNING: NOT WORKING in webpack ie a compiler error still results in bundled JS
12 | "noImplicitAny": true,
13 | "noImplicitReturns": true,
14 | "suppressImplicitAnyIndexErrors": true
15 | },
16 | "exclude": ["node_modules"],
17 | "awesomeTypescriptLoaderOptions": {
18 | "forkChecker": true,
19 | "useWebpackText": true //Allows loaders to be chained to awesome-typescript-loader.
20 | }
21 | }
--------------------------------------------------------------------------------
/demo-apps/ts-webpack/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const merge = require('webpack-merge');
3 |
4 | module.exports = (env = { prod: false, debug: false, port: 8080, host: 'localhost' }) => {
5 |
6 | const parts = require('../../scripts/webpack/appParts')(__dirname, env);
7 |
8 | const extactedStyles = {
9 | entry: {
10 | 'vendor-styles': path.join(__dirname, 'src', 'shared', 'vendor-styles.scss'),
11 | 'site-styles': path.join(__dirname, 'src', 'shared', 'site.scss')
12 | }
13 | };
14 |
15 | return merge(
16 | {
17 | entry: {
18 | main: path.join(__dirname, 'src', 'main.ts')
19 | }
20 | },
21 | parts.asAppBundle(),
22 | parts.extractBundle({
23 | vendorSelector: parts.isNotAppModuleSelector
24 | }),
25 | parts.asAppBundle(),
26 | extactedStyles,
27 | parts.isDevServer ? parts.sass() : parts.extractSassChunks(extactedStyles.entry),
28 | parts.typescript(),
29 | parts.inlineImages(),
30 | parts.inlineHtmlTemplates(),
31 | parts.inlineNgTableHtmlTemplates(),
32 | parts.useHtmlPlugin(),
33 | parts.forEnvironment()
34 | );
35 | }
--------------------------------------------------------------------------------
/demo-site/CNAME:
--------------------------------------------------------------------------------
1 | ng-table.com
2 |
--------------------------------------------------------------------------------
/demo-site/css/docs.css:
--------------------------------------------------------------------------------
1 | body > .row {
2 | width: 100%;
3 | }
4 |
5 | [ng-view] {
6 | padding: 20px 0;
7 | }
8 |
9 | .row .page-header {
10 | margin-top: 0;
11 | padding: 0;
12 | }
13 | .page-header h1 {
14 | margin: 0;
15 | padding: 5px 0px;
16 | }
17 |
18 | .bs-docs-sidebar.affix {
19 | position: static;
20 | }
21 | @media (min-width: 768px) {
22 | .bs-docs-sidebar {
23 | padding-left: 20px;
24 | }
25 | }
26 | /* First level of nav */
27 | .bs-docs-sidenav {
28 | margin-top: 20px;
29 | margin-bottom: 20px;
30 | border-left: 2px solid #b94a48;
31 | }
32 |
33 | .bs-docs-sidenav h1 {
34 | margin: 0;
35 | padding: 10px 18px;
36 | font-size: 24px;
37 | }
38 | .bs-docs-sidenav h1 a {
39 | color: #b94a48;
40 | text-decoration: none;
41 | }
42 |
43 | /* All levels of nav */
44 | .bs-docs-sidebar .nav > li > a {
45 | display: block;
46 | font-size: 13px;
47 | font-weight: 500;
48 | color: #999;
49 | padding: 4px 20px;
50 | }
51 | .bs-docs-sidebar .nav > li > a:hover,
52 | .bs-docs-sidebar .nav > li > a:focus {
53 | padding-left: 19px;
54 | color: #b94a48;
55 | text-decoration: none;
56 | background-color: transparent;
57 | }
58 | .bs-docs-sidebar .nav > .active > a,
59 | .bs-docs-sidebar .nav > .active:hover > a,
60 | .bs-docs-sidebar .nav > .active:focus > a {
61 | padding-left: 18px;
62 | font-weight: bold;
63 | color: #b94a48;
64 | background-color: transparent;
65 | }
66 |
67 | /* Nav: second level (shown on .active) */
68 | .bs-docs-sidebar .nav .nav {
69 | display: none; /* Hide by default, but at >768px, show it */
70 | padding-bottom: 10px;
71 | }
72 | .bs-docs-sidebar .nav .nav > li > a {
73 | padding-top: 1px;
74 | padding-bottom: 1px;
75 | padding-left: 30px;
76 | font-size: 12px;
77 | font-weight: normal;
78 | }
79 | .bs-docs-sidebar .nav .nav > li > a:hover,
80 | .bs-docs-sidebar .nav .nav > li > a:focus {
81 | padding-left: 29px;
82 | }
83 | .bs-docs-sidebar .nav .nav > .active > a,
84 | .bs-docs-sidebar .nav .nav > .active:hover > a,
85 | .bs-docs-sidebar .nav .nav > .active:focus > a {
86 | font-weight: 500;
87 | padding-left: 28px;
88 | }
89 |
90 | /* Back to top (hidden on mobile) */
91 | .back-to-top {
92 | display: none;
93 | margin-top: 10px;
94 | margin-left: 10px;
95 | padding: 4px 10px;
96 | font-size: 12px;
97 | font-weight: 500;
98 | color: #999;
99 | }
100 | .back-to-top:hover {
101 | text-decoration: none;
102 | color: #b94a48;
103 | }
104 |
105 | @media (min-width: 768px) {
106 | .back-to-top {
107 | display: block;
108 | }
109 | }
110 |
111 | /* Show and affix the side nav when space allows it */
112 | @media (min-width: 992px) {
113 | .bs-docs-sidebar .nav > .active > ul {
114 | display: block;
115 | }
116 | /* Widen the fixed sidebar */
117 | .bs-docs-sidebar.affix,
118 | .bs-docs-sidebar.affix-bottom {
119 | width: 213px;
120 | }
121 | .bs-docs-sidebar.affix {
122 | position: fixed; /* Undo the static from mobile first approach */
123 | top: 20px;
124 | }
125 | .bs-docs-sidebar.affix-bottom {
126 | position: absolute; /* Undo the static from mobile first approach */
127 | }
128 | .bs-docs-sidebar.affix-bottom .bs-docs-sidenav,
129 | .bs-docs-sidebar.affix .bs-docs-sidenav {
130 | margin-top: 0;
131 | margin-bottom: 0;
132 | }
133 | }
134 | @media (min-width: 1200px) {
135 | /* Widen the fixed sidebar again */
136 | .bs-docs-sidebar.affix-bottom,
137 | .bs-docs-sidebar.affix {
138 | width: 263px;
139 | }
140 | }
141 |
142 |
143 | /* Footer
144 | -------------------------------------------------- */
145 |
146 | .bs-footer {
147 | padding: 20px 0;
148 | margin-top: 10px;
149 | text-align: center;
150 | border-top: 1px solid #e5e5e5;
151 | }
152 | .bs-footer p {
153 | margin-bottom: 0;
154 | color: #777;
155 | }
156 | .footer-links {
157 | margin: 10px 0;
158 | }
159 | .footer-links li {
160 | display: inline;
161 | padding: 0 2px;
162 | }
163 | .footer-links li:first-child {
164 | padding-left: 0;
165 | }
166 |
167 |
168 | /* Table */
169 | .variables-matrix {
170 | border:1px solid #ddd;
171 | width:100%;
172 | margin:10px 0;
173 | }
174 |
175 | .variables-matrix td,
176 | .variables-matrix th {
177 | padding:10px;
178 | }
179 |
180 | .variables-matrix td {
181 | border-top:1px solid #eee;
182 | }
183 |
184 | .variables-matrix td + td,
185 | .variables-matrix th + th {
186 | border-left:1px solid #eee;
187 | }
188 |
189 | .variables-matrix tr:nth-child(even) td {
190 | background:#f5f5f5;
191 | }
192 |
193 | .variables-matrix th {
194 | background:#f1f1f1;
195 | }
196 |
197 | /* bootstrap callouts
198 | -------------------------------------------------- */
199 | .bs-callout {
200 | padding: 20px;
201 | margin: 20px 0;
202 | border: 1px solid #eee;
203 | border-left-width: 5px;
204 | border-radius: 3px;
205 | }
206 | .bs-callout h4 {
207 | margin-top: 0;
208 | margin-bottom: 5px;
209 | }
210 | .bs-callout p:last-child {
211 | margin-bottom: 0;
212 | }
213 | .bs-callout code {
214 | border-radius: 3px;
215 | }
216 | .bs-callout+.bs-callout {
217 | margin-top: -5px;
218 | }
219 | .bs-callout-default {
220 | border-left-color: #777;
221 | }
222 | .bs-callout-default h4 {
223 | color: #777;
224 | }
225 | .bs-callout-success {
226 | border-left-color: #5cb85c;
227 | }
228 | .bs-callout-success h4 {
229 | color: #5cb85c;
230 | }
231 | .bs-callout-danger {
232 | border-left-color: #d9534f;
233 | }
234 | .bs-callout-danger h4 {
235 | color: #d9534f;
236 | }
237 | .bs-callout-warning {
238 | border-left-color: #f0ad4e;
239 | }
240 | .bs-callout-warning h4 {
241 | color: #f0ad4e;
242 | }
243 | .bs-callout-info {
244 | border-left-color: #1b809e;
245 | }
246 | .bs-callout-info h4 {
247 | color: #1b809e;
248 | }
249 |
250 | /* extra callout styles */
251 | .bs-callout dl {
252 | margin-top: 10px
253 | }
254 |
--------------------------------------------------------------------------------
/demo-site/fonts/glyphicons-halflings-regular.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/esvit/ng-table/b6d5d0bfeef923c617081ffe80a0266d7fb4aa33/demo-site/fonts/glyphicons-halflings-regular.eot
--------------------------------------------------------------------------------
/demo-site/fonts/glyphicons-halflings-regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/esvit/ng-table/b6d5d0bfeef923c617081ffe80a0266d7fb4aa33/demo-site/fonts/glyphicons-halflings-regular.ttf
--------------------------------------------------------------------------------
/demo-site/fonts/glyphicons-halflings-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/esvit/ng-table/b6d5d0bfeef923c617081ffe80a0266d7fb4aa33/demo-site/fonts/glyphicons-halflings-regular.woff
--------------------------------------------------------------------------------
/demo-site/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | ngTable Examples
6 |
7 |
8 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | 
28 |
29 |
30 |
35 |
36 |
37 |
71 |
72 |
73 |
See the Pen Reordering columns by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/columns/demo-visibility.html:
--------------------------------------------------------------------------------
1 | See the Pen Showing and hiding columns by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/editing/demo-batch.html:
--------------------------------------------------------------------------------
1 | See the Pen Batch editable table by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/editing/demo-inline.html:
--------------------------------------------------------------------------------
1 | See the Pen Inline row editing by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/events/demo-subscribe.html:
--------------------------------------------------------------------------------
1 | See the Pen Subscribing to NgTableParams events by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/events/demo-unsubscribe.html:
--------------------------------------------------------------------------------
1 | See the Pen Unsubscribing to NgTableParams events by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/filtering/demo-api.html:
--------------------------------------------------------------------------------
1 | See the Pen Change filter values programmatically by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/filtering/demo-custom-template.html:
--------------------------------------------------------------------------------
1 | See the Pen Custom filter template by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/filtering/demo-customize-algorithm.html:
--------------------------------------------------------------------------------
1 | See the Pen Customize filter algorithm by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/filtering/demo-enabling.html:
--------------------------------------------------------------------------------
1 | See the Pen Enable filters programmatically by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/filtering/demo-filtering-basic.html:
--------------------------------------------------------------------------------
1 | See the Pen Filtering - basic example by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/filtering/demo-multi-template.html:
--------------------------------------------------------------------------------
1 | See the Pen Multi-template filter by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/filtering/demo-nested-property.html:
--------------------------------------------------------------------------------
1 | See the Pen Nested properties filters by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/filtering/demo-select.html:
--------------------------------------------------------------------------------
1 | See the Pen Select Filter by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/formatting/demo-cell-values.html:
--------------------------------------------------------------------------------
1 | See the Pen Data cell template by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/formatting/demo-custom-header.html:
--------------------------------------------------------------------------------
1 | See the Pen Custom header by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/formatting/demo-dynamic-html-values.html:
--------------------------------------------------------------------------------
1 | See the Pen Advanced cell value display in ngTableDynamic (via HTML) by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/formatting/demo-dynamic-js-values.html:
--------------------------------------------------------------------------------
1 | See the Pen Display cell values within ngTableDynamic by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/formatting/demo-header-cell-basic.html:
--------------------------------------------------------------------------------
1 | See the Pen Header cell template - simple by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/formatting/demo-header-cell-full.html:
--------------------------------------------------------------------------------
1 | See the Pen Header cell template - full by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/formatting/demo-row.html:
--------------------------------------------------------------------------------
1 | See the Pen Row template by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/global-customization/demo-defaults.html:
--------------------------------------------------------------------------------
1 | See the Pen Change default settings and paramater values by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/global-customization/demo-response-interceptors.html:
--------------------------------------------------------------------------------
1 | See the Pen getData response interceptors by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/grouping/demo-api.html:
--------------------------------------------------------------------------------
1 | See the Pen Change grouping column programmatically by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/grouping/demo-enabling.html:
--------------------------------------------------------------------------------
1 | See the Pen Enable grouping programmatically by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/grouping/demo-grouping-basic.html:
--------------------------------------------------------------------------------
1 | See the Pen Grouping - basic example by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/grouping/demo-grouping-fn.html:
--------------------------------------------------------------------------------
1 | See the Pen Custom grouping function by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/grouping/demo-summary.html:
--------------------------------------------------------------------------------
1 | See the Pen Groups with summary row by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/intro/demo-real-world.html:
--------------------------------------------------------------------------------
1 | See the Pen ngTable - Real world example by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/intro/overview.html:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 |
Steps for getting started (example on right)
13 |
14 | - Add references to AngularJS. EG:
15 |
16 | <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
17 |
18 |
19 | - Add references to ngTable's javascript and css files. EG:
20 |
21 | <link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
22 | <script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
23 |
24 |
25 | Note: ng-table npm package distributes individual ES2015 modules. Use these instead, if your app uses webpack to bundle vendor dependencies
26 |
27 |
28 | - Where you declare your app module, add
ngTable:
29 |
30 | angular.module("myApp", ["ngTable"]);
31 |
32 |
33 | - In your html file within the controller where you plan to use
ng-table, add:
34 |
35 | <table ng-table="vm.tableParams" class="table" show-filter="true">
36 | <tr ng-repeat="user in $data">
37 | <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
38 | {{user.name}}</td>
39 | <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
40 | {{user.age}}</td>
41 | </tr>
42 | </table>
43 |
44 |
45 | - In your javascript file within the controller where you plan to use
ng-table, declare:
46 |
47 | var self = this;
48 | var data = [{name: "Moroni", age: 50} /*,*/];
49 | self.tableParams = new NgTableParams({}, { dataset: data});
50 |
51 |
52 |
53 |
54 |
55 |
56 |
Example
57 |
58 |
59 |
60 |
61 | |
62 | {{user.name}}
63 | |
64 |
65 | {{user.age}}
66 | |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
See the Pen Loading data - External array by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/loading/demo-lazy-loaded.html:
--------------------------------------------------------------------------------
1 | See the Pen Loading data - lazy loading managed array by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/loading/demo-managed-array.html:
--------------------------------------------------------------------------------
1 | See the Pen Loading data - managed array by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/loading/overview.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
There are broadly two options for getting data loaded into a table. These are discussed below
9 |
10 |
11 | - 1. Managed array
12 | -
13 | Hand
NgTableParams an in-memory array and let it do the filtering, sorting and paging
14 | on that array. Eg:
15 |
16 | var dataset = [{ name: 'christian', age: 21 }, { name: 'anthony', age: 88 }];
17 | var tp = new NgTableParams({}, { dataset: dataset });
18 |
19 |
20 | - 2. External array
21 | -
22 | Hand
NgTableParams a custom getData function that it will call to load
23 | data. Eg:
24 |
25 | var tp = new NgTableParams({}, { getData: function(params){
26 | /* code to fetch data that matches the params values EG: */
27 | return executeQuery(params).then(function(data){
28 | params.total(data.inlineCount);
29 | return data.results;
30 | });
31 | }});
32 |
33 |
34 | - Typically you will use this option to load server-side data
35 |
36 |
37 |
See the Pen Change page / page controls programmatically by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/pagination/demo-pager-basic.html:
--------------------------------------------------------------------------------
1 | See the Pen Pagination - basic example by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/sorting/demo-api.html:
--------------------------------------------------------------------------------
1 | See the Pen Change sorting programmatically by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/sorting/demo-enabling.html:
--------------------------------------------------------------------------------
1 | See the Pen Enable sorting programmatically by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/sorting/demo-sorting-basic.html:
--------------------------------------------------------------------------------
1 | See the Pen Sorting - basic example by christianacca (@christianacca) on CodePen.
2 |
--------------------------------------------------------------------------------
/demo-site/views/todo.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
Feel free to contribute a codepen for this missing demo
7 |
Fork this codepen as the base template
8 |
To contribute: create an github issue with a link to your codepen
9 |
Export to CSV
23 |
24 |
25 |
26 |
Export to CSV
27 |
28 |
29 |
32 |
33 |
34 |
35 |
36 | |
37 | {{user.name}}
38 | |
39 |
40 | {{user.age}}
41 | |
42 |
43 |
44 |
45 |
73 |
74 |
Table with Resizable Columns
26 |
27 |
28 |
29 |
30 |
31 | |
32 | {{user.name}}
33 | |
34 |
35 | {{user.age}}
36 | |
37 |
38 |
39 |
40 |
84 |
85 |
101 |
102 |
2 | |
4 |
6 |
7 | |
8 |
9 |
--------------------------------------------------------------------------------
/src/browser/filters/number.html:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------
/src/browser/filters/select-multiple.html:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/src/browser/filters/select.html:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/src/browser/filters/text.html:
--------------------------------------------------------------------------------
1 |
3 |
--------------------------------------------------------------------------------
/src/browser/groupRow.html:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/src/browser/header.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/browser/index.ts:
--------------------------------------------------------------------------------
1 | import * as angular from 'angular';
2 | import { ngTable } from './ngTable.directive';
3 | import { NgTableColumn } from './ngTableColumn';
4 | import { ngTableColumnsBinding } from './ngTableColumnsBinding.directive';
5 | import { NgTableController } from './ngTableController';
6 | import { ngTableDynamic } from './ngTableDynamic.directive';
7 | import { NgTableFilterConfigProvider, NgTableFilterConfig } from './ngTableFilterConfig';
8 | import { ngTableFilterRow } from './ngTableFilterRow.directive';
9 | import { NgTableFilterRowController } from './ngTableFilterRowController';
10 | import { ngTableGroupRow } from './ngTableGroupRow.directive';
11 | import { NgTableGroupRowController } from './ngTableGroupRowController';
12 | import { ngTablePagination } from './ngTablePagination.directive';
13 | import { ngTableSelectFilterDs } from './ngTableSelectFilterDs.directive';
14 | import { ngTableSorterRow } from './ngTableSorterRow.directive';
15 | import { NgTableSorterRowController } from './ngTableSorterRowController';
16 | import './filters/number.html';
17 | import './filters/select.html';
18 | import './filters/select-multiple.html';
19 | import './filters/text.html';
20 | import './pager.html';
21 | import './header.html';
22 |
23 | const ngTableBrowserModule = angular.module('ngTable-browser', [])
24 | .directive('ngTable', ngTable)
25 | .service('ngTableColumn', NgTableColumn)
26 | .directive('ngTableColumnsBinding', ngTableColumnsBinding)
27 | .controller('ngTableController', NgTableController)
28 | .directive('ngTableDynamic', ngTableDynamic)
29 | .provider('ngTableFilterConfig', NgTableFilterConfigProvider)
30 | .directive('ngTableFilterRow', ngTableFilterRow)
31 | .controller('ngTableFilterRowController', NgTableFilterRowController)
32 | .directive('ngTableGroupRow', ngTableGroupRow)
33 | .controller('ngTableGroupRowController', NgTableGroupRowController)
34 | .directive('ngTablePagination', ngTablePagination)
35 | .directive('ngTableSelectFilterDs', ngTableSelectFilterDs)
36 | .directive('ngTableSorterRow', ngTableSorterRow)
37 | .controller('ngTableSorterRowController', NgTableSorterRowController);
38 |
39 | export * from './public-interfaces';
40 | export { NgTableController, ngTableBrowserModule };
41 | export * from './ngTableFilterConfig';
--------------------------------------------------------------------------------
/src/browser/ngTableColumn.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * ngTable: Table + Angular JS
3 | *
4 | * @author Vitalii Savchuk
5 | * @url https://github.com/esvit/ng-table/
6 | * @license New BSD License
7 | */
8 |
9 | import { IScope } from 'angular';
10 | import * as ng1 from 'angular';
11 | import { ColumnDef, ColumnDefPartial, DynamicTableColDef } from './public-interfaces';
12 |
13 | /**
14 | * @private
15 | */
16 | function isScopeLike(object: any) {
17 | return object != null && ng1.isFunction(object.$new);
18 | }
19 |
20 | /**
21 | * @private
22 | * Service to construct a $column definition used by {@link ngTable ngTable} directive
23 | */
24 | export class NgTableColumn {
25 | static $inject: string[] = [];
26 |
27 | /**
28 | * Creates a $column for use within a header template
29 | *
30 | * @param column the initial definition for $column to build
31 | * @param defaultScope the $scope to supply to the $column getter methods when not supplied by caller
32 | * @param columns a reference to the $columns array to make available on the context supplied to the
33 | * $column getter methods
34 | */
35 | buildColumn(column: TCol, defaultScope: IScope, columns: ColumnDef[]): ColumnDef {
36 | // note: we're not modifying the original column object. This helps to avoid unintended side affects
37 | const extendedCol = Object.create(column);
38 | const defaults = this.createDefaults();
39 | for (const prop in defaults) {
40 | if (extendedCol[prop] === undefined) {
41 | extendedCol[prop] = defaults[prop];
42 | }
43 | if (!ng1.isFunction(extendedCol[prop])) {
44 | // wrap raw field values with "getter" functions
45 | // - this is to ensure consistency with how ngTable.compile builds columns
46 | // - note that the original column object is being "proxied"; this is important
47 | // as it ensure that any changes to the original object will be returned by the "getter"
48 | const getterSetter = function getterSetter(/*[value] || [$scope, locals]*/) {
49 | if (arguments.length === 1 && !isScopeLike(arguments[0])) {
50 | (getterSetter as any).assign(null, arguments[0]);
51 | } else {
52 | return column[prop];
53 | }
54 | };
55 | (getterSetter as any).assign = function ($scope: IScope, value: any) {
56 | column[prop] = value;
57 | };
58 | extendedCol[prop] = getterSetter;
59 | }
60 | // satisfy the arguments expected by the function returned by parsedAttribute in the ngTable directive
61 | const getterFn = extendedCol[prop];
62 | extendedCol[prop] = function () {
63 | if (arguments.length === 1 && !isScopeLike(arguments[0])) {
64 | getterFn.assign(defaultScope, arguments[0]);
65 | } else {
66 | const scope = arguments[0] || defaultScope;
67 | const context = Object.create(scope);
68 | ng1.extend(context, {
69 | $column: extendedCol,
70 | $columns: columns
71 | });
72 | return getterFn.call(column, context);
73 | }
74 | };
75 | if (getterFn.assign) {
76 | extendedCol[prop].assign = getterFn.assign;
77 | } else {
78 | const wrappedGetterFn = extendedCol[prop];
79 | let localValue: any;
80 | const getterSetter = function getterSetter(/*[value] || [$scope, locals]*/) {
81 | if (arguments.length === 1 && !isScopeLike(arguments[0])) {
82 | (getterSetter as any).assign(null, arguments[0]);
83 | } else {
84 | return localValue != undefined ? localValue : wrappedGetterFn.apply(extendedCol, arguments);
85 | }
86 | };
87 | (getterSetter as any).assign = function ($scope: IScope, value: any) {
88 | localValue = value;
89 | };
90 | extendedCol[prop] = getterSetter;
91 | }
92 | }
93 | return extendedCol as ColumnDef;
94 | }
95 |
96 | private createDefaults() {
97 | return {
98 | 'class': this.createGetterSetter(''),
99 | filter: this.createGetterSetter(false),
100 | groupable: this.createGetterSetter(false),
101 | filterData: ng1.noop,
102 | headerTemplateURL: this.createGetterSetter(false),
103 | headerTitle: this.createGetterSetter(''),
104 | sortable: this.createGetterSetter(false),
105 | show: this.createGetterSetter(true),
106 | title: this.createGetterSetter(''),
107 | titleAlt: this.createGetterSetter('')
108 | };
109 | }
110 |
111 | private createGetterSetter(initialValue: any) {
112 | let value = initialValue;
113 | const getterSetter = function getterSetter(/*[value] || [$scope, locals]*/) {
114 | if (arguments.length === 1 && !isScopeLike(arguments[0])) {
115 | (getterSetter as any).assign(null, arguments[0]);
116 | } else {
117 | return value;
118 | }
119 | };
120 | (getterSetter as any).assign = function ($scope: IScope, newValue: any) {
121 | value = newValue;
122 | };
123 | return getterSetter;
124 | }
125 | }
--------------------------------------------------------------------------------
/src/browser/ngTableColumnsBinding.directive.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * ngTable: Table + Angular JS
3 | *
4 | * @author Vitalii Savchuk
5 | * @url https://github.com/esvit/ng-table/
6 | * @license New BSD License
7 | */
8 |
9 | import { IAugmentedJQuery, IAttributes, IDirective, IParseService } from 'angular';
10 | import { TableScope } from './ngTableController';
11 | import { ColumnDef } from './public-interfaces';
12 |
13 | /**
14 | * @private
15 | */
16 | interface InputAttributes extends IAttributes {
17 | ngTableColumnsBinding: string;
18 | }
19 |
20 | ngTableColumnsBinding.$inject = ["$parse"];
21 |
22 | /**
23 | * One-way data binds the $columns array generated by ngTable/ngTableDynamic to the specified
24 | * expression.
25 | * This allows the $columns array created for the table to be accessed outside of the html table
26 | * markup.
27 | *
28 | * @ngdoc directive
29 | *
30 | * @example
31 | * ```html
32 | *
33 | * ```
34 | */
35 | export function ngTableColumnsBinding($parse: IParseService) : IDirective {
36 | const directive = {
37 | restrict: 'A',
38 | link: linkFn
39 | };
40 | return directive;
41 |
42 | function linkFn($scope: TableScope, $element: IAugmentedJQuery, $attrs: InputAttributes){
43 | const setter = $parse($attrs.ngTableColumnsBinding).assign;
44 | if (setter){
45 | $scope.$watch('$columns', newColumns => {
46 | const shallowClone = (newColumns || []).slice(0);
47 | setter($scope, shallowClone);
48 | });
49 | }
50 | }
51 | }
--------------------------------------------------------------------------------
/src/browser/ngTableDynamic.directive.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * ngTable: Table + Angular JS
3 | *
4 | * @author Vitalii Savchuk
5 | * @url https://github.com/esvit/ng-table/
6 | * @license New BSD License
7 | */
8 |
9 | import { IAugmentedJQuery, IDirective, IScope } from 'angular';
10 | import * as ng1 from 'angular';
11 | import { ColumnDef, DynamicTableColDef, DynamicTableHtmlAttributes } from './public-interfaces';
12 | import { NgTableController } from './ngTableController';
13 |
14 | interface ScopeExtensions {
15 | $columns: ColumnDef[]
16 | }
17 |
18 | function toArray(arr: ArrayLike) {
19 | return Array.prototype.slice.call(arr) as T[];
20 | }
21 |
22 | ngTableDynamic.$inject = [];
23 |
24 | /**
25 | * A dynamic version of the {@link ngTable ngTable} directive that accepts a dynamic list of columns
26 | * definitions to render
27 | * @ngdoc directive
28 | *
29 | * @example
30 | * ```html
31 | *
32 | *
33 | * | {{row[col.field]}} |
34 | *
35 | *
36 | * ```
37 | */
38 | export function ngTableDynamic(): IDirective {
39 |
40 | return {
41 | restrict: 'A',
42 | priority: 1001,
43 | scope: true,
44 | controller: 'ngTableController',
45 | compile: function (tElement: IAugmentedJQuery) {
46 |
47 | const tRows = toArray(tElement[0].getElementsByTagName('tr'));
48 | const tRow = tRows.filter(tr => !ng1.element(tr).hasClass('ng-table-group'))[0];
49 |
50 | if (!tRow) {
51 | return undefined;
52 | }
53 |
54 | toArray(tRow.getElementsByTagName('td')).forEach(tCell => {
55 | const el = ng1.element(tCell);
56 | const getAttrValue = (attr: string) => {
57 | return el.attr('x-data-' + attr) || el.attr('data-' + attr) || el.attr(attr);
58 | };
59 |
60 | // this used in responsive table
61 | const titleExpr = getAttrValue('title');
62 | if (!titleExpr) {
63 | el.attr('data-title-text', '{{$columns[$index].titleAlt(this) || $columns[$index].title(this)}}');
64 | }
65 | const showExpr = el.attr('ng-if');
66 | if (!showExpr) {
67 | el.attr('ng-if', '$columns[$index].show(this)');
68 | }
69 | });
70 | return function (scope: IScope & ScopeExtensions, element: IAugmentedJQuery, attrs: DynamicTableHtmlAttributes, controller: NgTableController) {
71 | const expr = controller.parseNgTableDynamicExpr(attrs.ngTableDynamic);
72 |
73 | controller.setupBindingsToInternalScope(expr.tableParams);
74 | controller.compileDirectiveTemplates();
75 |
76 | scope.$watchCollection(expr.columns, (newCols/*, oldCols*/) => {
77 | scope.$columns = controller.buildColumns(newCols);
78 | controller.loadFilterData(scope.$columns);
79 | });
80 | };
81 | }
82 | };
83 | }
--------------------------------------------------------------------------------
/src/browser/ngTableFilterConfig.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * ngTable: Table + Angular JS
3 | *
4 | * @author Vitalii Savchuk
5 | * @url https://github.com/esvit/ng-table/
6 | * @license New BSD License
7 | */
8 |
9 | import * as ng1 from 'angular';
10 | import { IServiceProvider, auto } from 'angular';
11 | import { assignPartialDeep } from '../shared';
12 | import { FilterTemplateDef } from './public-interfaces';
13 |
14 | /**
15 | * Configuration values that determine the behaviour of the `ngTableFilterConfig` service
16 | */
17 | export class FilterConfigValues {
18 | /**
19 | * The default base url to use when deriving the url for a filter template given just an alias name
20 | */
21 | defaultBaseUrl = 'ng-table/filters/';
22 | /**
23 | * The extension to use when deriving the url of a filter template when given just an alias name
24 | */
25 | defaultExt = '.html';
26 | /**
27 | * A map of alias names and their corrosponding urls. A lookup against this map will be used
28 | * to find the url matching an alias name.
29 | * If no match is found then a url will be derived using the following pattern `${defaultBaseUrl}${aliasName}.${defaultExt}`
30 | */
31 | aliasUrls: { [name: string]: string } = {};
32 | }
33 |
34 | export type FilterConfigValuesPartial = Partial
35 |
36 | /**
37 | * The angular provider used to configure the behaviour of the `NgTableFilterConfig` service.
38 | */
39 | export class NgTableFilterConfigProvider implements IServiceProvider {
40 | static $inject = ['$injector'];
41 | $get: () => NgTableFilterConfig;
42 | private config: FilterConfigValues;
43 | constructor($injector: auto.IInjectorService) {
44 | this.$get = () => {
45 | return $injector.instantiate(NgTableFilterConfig, { config: ng1.copy(this.config) });
46 | }
47 | this.$get.$inject = [];
48 | this.resetConfigs();
49 | }
50 |
51 | /**
52 | * Reset back to factory defaults the config values that `NgTableFilterConfig` service will use
53 | */
54 | resetConfigs() {
55 | this.config = new FilterConfigValues();
56 | }
57 |
58 | /**
59 | * Set the config values used by `NgTableFilterConfig` service
60 | */
61 | setConfig(customConfig: FilterConfigValuesPartial) {
62 | this.config = assignPartialDeep(ng1.copy(this.config), customConfig);
63 | }
64 | }
65 |
66 | /**
67 | * Exposes configuration values and methods used to return the location of the html
68 | * templates used to render the filter row of an ng-table directive
69 | */
70 | export class NgTableFilterConfig {
71 | static $inject = ['config'];
72 | constructor(
73 | /**
74 | * Readonly copy of the final values used to configure the service.
75 | */
76 | public readonly config: FilterConfigValues
77 | ) { }
78 |
79 | /**
80 | * Return the url of the html filter template registered with the alias supplied
81 | */
82 | getUrlForAlias(aliasName: string, filterKey?: string) {
83 | return this.config.aliasUrls[aliasName] || this.config.defaultBaseUrl + aliasName + this.config.defaultExt;
84 | }
85 |
86 | /**
87 | * Return the url of the html filter template for the supplied definition and key.
88 | * For more information see the documentation for {@link FilterTemplateMap}
89 | */
90 | getTemplateUrl(filterDef: string | FilterTemplateDef, filterKey?: string) {
91 | let filterName: string;
92 | if (typeof filterDef !== 'string') {
93 | filterName = filterDef.id;
94 | } else {
95 | filterName = filterDef;
96 | }
97 | if (filterName.indexOf('/') !== -1) {
98 | return filterName;
99 | }
100 |
101 | return this.getUrlForAlias(filterName, filterKey);
102 | }
103 | }
--------------------------------------------------------------------------------
/src/browser/ngTableFilterRow.directive.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * ngTable: Table + Angular JS
3 | *
4 | * @author Vitalii Savchuk
5 | * @url https://github.com/esvit/ng-table/
6 | * @license New BSD License
7 | */
8 |
9 | const templateUrl = require('./filterRow.html');
10 |
11 | ngTableFilterRow.$inject = [];
12 |
13 | /**
14 | * directive that renders the filter header row for a table
15 | * @ngdoc directive
16 | * @example
17 | * ```html
18 | *
19 | * ```
20 | */
21 | export function ngTableFilterRow(){
22 | const directive = {
23 | restrict: 'E',
24 | replace: true,
25 | templateUrl: templateUrl,
26 | scope: true,
27 | controller: 'ngTableFilterRowController',
28 | controllerAs: '$ctrl'
29 | };
30 | return directive;
31 | }
--------------------------------------------------------------------------------
/src/browser/ngTableFilterRowController.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * ngTable: Table + Angular JS
3 | *
4 | * @author Vitalii Savchuk
5 | * @url https://github.com/esvit/ng-table/
6 | * @license New BSD License
7 | */
8 |
9 | import { IScope } from 'angular';
10 | import { FilterTemplateDef, FilterTemplateDefMap } from './public-interfaces';
11 | import { NgTableFilterConfig } from './ngTableFilterConfig';
12 |
13 | /**
14 | * @private
15 | */
16 | export interface ScopeExtensions {
17 | getFilterPlaceholderValue(filterDef: string | FilterTemplateDef, filterKey?: string): string;
18 | }
19 |
20 | /**
21 | * Controller for the {@link ngTableFilterRow ngTableFilterRow} directive
22 | */
23 | export class NgTableFilterRowController {
24 | static $inject = ['$scope', 'ngTableFilterConfig'];
25 | config: NgTableFilterConfig;
26 | constructor($scope: IScope & ScopeExtensions, ngTableFilterConfig: NgTableFilterConfig) {
27 | this.config = ngTableFilterConfig;
28 |
29 | // todo: stop doing this. Why?
30 | // * scope inheritance makes it hard to know how supplies functions
31 | // * scope is not a concept in angular 2
32 | // make function available to filter templates
33 | $scope.getFilterPlaceholderValue = this.getFilterPlaceholderValue.bind(this);
34 | }
35 |
36 | getFilterCellCss(filter: FilterTemplateDefMap, layout: string) {
37 | if (layout !== 'horizontal') {
38 | return 's12';
39 | }
40 |
41 | const size = Object.keys(filter).length;
42 | const width = parseInt((12 / size).toString(), 10);
43 | return 's' + width;
44 | }
45 |
46 | getFilterPlaceholderValue(filterDef: string | FilterTemplateDef, filterKey?: string) {
47 | if (typeof filterDef === 'string') {
48 | return '';
49 | } else {
50 | return filterDef.placeholder;
51 | }
52 | }
53 | }
--------------------------------------------------------------------------------
/src/browser/ngTableGroupRow.directive.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * ngTable: Table + Angular JS
3 | *
4 | * @author Vitalii Savchuk
5 | * @url https://github.com/esvit/ng-table/
6 | * @license New BSD License
7 | */
8 |
9 | const templateUrl = require('./groupRow.html');
10 |
11 | ngTableGroupRow.$inject = [];
12 |
13 | /**
14 | * directive that renders the group header row for a table
15 | * @ngdoc directive
16 | * @example
17 | * ```html
18 | *
19 | * ```
20 | */
21 | export function ngTableGroupRow(){
22 | const directive = {
23 | restrict: 'E',
24 | replace: true,
25 | templateUrl: templateUrl,
26 | scope: true,
27 | controller: 'ngTableGroupRowController',
28 | controllerAs: '$ctrl'
29 | };
30 | return directive;
31 | }
--------------------------------------------------------------------------------
/src/browser/ngTableGroupRowController.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * ngTable: Table + Angular JS
3 | *
4 | * @author Vitalii Savchuk
5 | * @url https://github.com/esvit/ng-table/
6 | * @license New BSD License
7 | */
8 |
9 | import { IPromise } from 'angular';
10 | import { DataResult, GroupingFunc, Grouping, GroupSort } from '../core';
11 | import { ColumnDef } from './public-interfaces';
12 | import { TableScope } from './ngTableController';
13 |
14 | /**
15 | * @private
16 | */
17 | export interface ScopeExtensions {
18 | $selGroup: GroupingFunc | string;
19 | $selGroupTitle: string;
20 | }
21 |
22 |
23 | /**
24 | * Controller for the {@link ngTableGroupRow ngTableGroupRow} directive
25 | */
26 | export class NgTableGroupRowController {
27 | static $inject = ['$scope'];
28 | private groupFns: Array | ColumnDef> = [];
29 | constructor(private $scope: TableScope & ScopeExtensions) {
30 | $scope.$watch>('params.group()', (newGrouping) => {
31 | this.setGroup(newGrouping);
32 | }, true);
33 | }
34 |
35 | getGroupables() {
36 | const groupableCols = this.$scope.$columns.filter($column => !!$column.groupable(this.$scope));
37 | return this.groupFns.concat(groupableCols);
38 | }
39 |
40 | getGroupTitle(group: GroupingFunc | ColumnDef) {
41 | return this.isGroupingFunc(group) ? group.title : group.title(this.$scope);
42 | }
43 |
44 |
45 | getVisibleColumns() {
46 | return this.$scope.$columns.filter($column => $column.show(this.$scope))
47 | }
48 |
49 | groupBy(group: GroupingFunc | ColumnDef) {
50 | if (this.isSelectedGroup(group)) {
51 | this.changeSortDirection();
52 | } else {
53 | if (this.isGroupingFunc(group)) {
54 | this.$scope.params.group(group);
55 | } else {
56 | // it's OK, we know that groupable will return a string
57 | // this is guaranteed by getGroupables returning only
58 | // columns that return (truthy) strings
59 | this.$scope.params.group(group.groupable(this.$scope) as string);
60 | }
61 | }
62 | }
63 |
64 | isSelectedGroup(group: GroupingFunc | ColumnDef) {
65 | if (this.isGroupingFunc(group)) {
66 | return group === this.$scope.$selGroup;
67 | } else {
68 | return group.groupable(this.$scope) === this.$scope.$selGroup;
69 | }
70 | }
71 |
72 | toggleDetail() {
73 | this.$scope.params.settings().groupOptions.isExpanded = !this.$scope.params.settings().groupOptions.isExpanded;
74 | return this.$scope.params.reload();
75 | }
76 |
77 | private changeSortDirection() {
78 | let newDirection: GroupSort;
79 | if (this.$scope.params.hasGroup(this.$scope.$selGroup, 'asc')) {
80 | newDirection = 'desc';
81 | } else if (this.$scope.params.hasGroup(this.$scope.$selGroup, 'desc')) {
82 | newDirection = '';
83 | } else {
84 | newDirection = 'asc';
85 | }
86 | this.$scope.params.group(this.$scope.$selGroup, newDirection);
87 | }
88 |
89 | private findGroupColumn(groupKey: GroupingFunc | string) {
90 | return this.$scope.$columns.filter($column => $column.groupable(this.$scope) === groupKey)[0];
91 | }
92 |
93 | private isGroupingFunc(val: ColumnDef | Grouping): val is GroupingFunc {
94 | return typeof val === 'function';
95 | }
96 |
97 | private setGroup(grouping: Grouping) {
98 | const existingGroupCol = this.findGroupColumn(this.$scope.$selGroup);
99 | if (existingGroupCol && existingGroupCol.show.assign) {
100 | existingGroupCol.show.assign(this.$scope, true);
101 | }
102 | if (this.isGroupingFunc(grouping)) {
103 | this.groupFns = [grouping];
104 | this.$scope.$selGroup = grouping;
105 | this.$scope.$selGroupTitle = grouping.title || '';
106 | } else {
107 | // note: currently only one group is implemented
108 | const groupKey = Object.keys(grouping || {})[0];
109 | const groupedColumn = this.findGroupColumn(groupKey);
110 | if (groupedColumn) {
111 | this.$scope.$selGroupTitle = groupedColumn.title(this.$scope);
112 | this.$scope.$selGroup = groupKey;
113 | if (groupedColumn.show.assign) {
114 | groupedColumn.show.assign(this.$scope, false);
115 | }
116 | }
117 | }
118 | }
119 | }
--------------------------------------------------------------------------------
/src/browser/ngTablePagination.directive.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * ngTable: Table + Angular JS
3 | *
4 | * @author Vitalii Savchuk
5 | * @url https://github.com/esvit/ng-table/
6 | * @license New BSD License
7 | */
8 |
9 | import * as ng1 from 'angular';
10 | import { NgTableEventsChannel, PageButton } from '../core'
11 | import { TableScope } from './ngTableController';
12 |
13 | interface ScopeExtensions {
14 | pages: PageButton[]
15 | }
16 |
17 | ngTablePagination.$inject = ['$compile', '$document', 'ngTableEventsChannel'];
18 |
19 | /**
20 | * Directive that renders the table pagination controls
21 | * @ngdoc directive
22 | */
23 | export function ngTablePagination($compile: ng1.ICompileService, $document: ng1.IDocumentService, ngTableEventsChannel: NgTableEventsChannel): ng1.IDirective {
24 |
25 | return {
26 | restrict: 'A',
27 | scope: {
28 | 'params': '=ngTablePagination',
29 | 'templateUrl': '='
30 | },
31 | replace: false,
32 | link: function(scope: TableScope & ScopeExtensions, element: ng1.IAugmentedJQuery/*, attrs*/) {
33 |
34 | ngTableEventsChannel.onAfterReloadData(function(pubParams) {
35 | scope.pages = pubParams.generatePagesArray();
36 | }, scope, function(pubParams){
37 | return pubParams === scope.params;
38 | });
39 |
40 | scope.$watch('templateUrl', function(templateUrl) {
41 | if (templateUrl === undefined) {
42 | return;
43 | }
44 | const template = ng1.element('', $document);
45 | element.append(template);
46 | $compile(template)(scope);
47 | });
48 | }
49 | };
50 | }
--------------------------------------------------------------------------------
/src/browser/ngTableSelectFilterDs.directive.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * ngTable: Table + Angular JS
3 | *
4 | * @author Vitalii Savchuk
5 | * @url https://github.com/esvit/ng-table/
6 | * @license New BSD License
7 | */
8 |
9 | import { IAttributes, IDirective, IParseService, IQService, IPromise, IScope } from 'angular';
10 | import { ColumnDef, SelectData, SelectDataFunc, SelectOption } from './public-interfaces';
11 |
12 | /**
13 | * @private
14 | */
15 | export interface InputAttributes extends IAttributes {
16 | ngTableSelectFilterDs: string;
17 | }
18 |
19 | /**
20 | * @private
21 | */
22 | export interface ScopeExtensions {
23 | $selectData: SelectOption[]
24 | }
25 |
26 | ngTableSelectFilterDs.$inject = [];
27 |
28 | /**
29 | * Takes the array returned by $column.filterData and makes it available as `$selectData` on the `$scope`.
30 | *
31 | * The resulting `$selectData` array will contain an extra item that is suitable to represent the user
32 | * "deselecting" an item from a `
28 |
29 |