Skip to content
This repository was archived by the owner on Feb 2, 2025. It is now read-only.

Commit 46d6485

Browse files
l-linl-lin
authored
Merge pull request #1494 from shanmukhateja/feat-angular-pipes
Add support for using Angular pipes to transform data #1466
2 parents 159b3cc + 0d28c6a commit 46d6485

8 files changed

+207
-3
lines changed

‎demo/src/app/advanced/using-ng-pipe-snippet.component.ts

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-using-ng-pipe-snippet',
5+
template: `
6+
<div id="html" class="col s12 m9 l12">
7+
<h4 class="header">HTML</h4>
8+
<section [innerHTML]="htmlSnippet" hljsContent=".xml"></section>
9+
</div>
10+
<div id="ts" class="col s12 m9 l12">
11+
<h4 class="header">Typescript</h4>
12+
<section [innerHTML]="tsSnippet" hljsContent=".typescript"></section>
13+
</div>
14+
`
15+
})
16+
export class UsingNgPipeSnippetComponent implements OnInit {
17+
18+
constructor() { }
19+
20+
htmlSnippet = `
21+
<pre>
22+
<code class="xml highlight">
23+
&lt;table datatable [dtOptions]="dtOptions" class="row-border hover"&gt;&lt;/table&gt;</code>
24+
</pre>
25+
`;
26+
27+
tsSnippet = `
28+
<pre>
29+
<code class="typescript highlight">
30+
import { UpperCasePipe } from '@angular/common';
31+
import { Component, OnInit } from '@angular/core';
32+
import { ADTSettings } from 'angular-datatables/src/models/settings';
33+
34+
@Component({
35+
selector: 'app-using-ng-pipe',
36+
templateUrl: './using-ng-pipe.component.html'
37+
})
38+
export class UsingNgPipeComponent implements OnInit {
39+
40+
constructor(
41+
private pipeInstance: UpperCasePipe // inject your Angular Pipe
42+
) { }
43+
44+
// Use ADTSettings instead of DataTables.Settings
45+
dtOptions: ADTSettings = {};
46+
47+
ngOnInit(): void {
48+
49+
this.dtOptions = {
50+
ajax: 'data/data.json',
51+
columns: [
52+
{
53+
title: 'ID',
54+
data: 'id'
55+
},
56+
{
57+
title: 'First name',
58+
data: 'firstName',
59+
ngPipeInstance: this.pipeInstance // <-- Pipe is used here
60+
},
61+
{
62+
title: 'Last name',
63+
data: 'lastName',
64+
ngPipeInstance: this.pipeInstance // <-- Pipe is used here
65+
}
66+
]
67+
};
68+
}
69+
70+
}
71+
</code>
72+
</pre>
73+
`;
74+
75+
ngOnInit(): void {
76+
}
77+
78+
}

‎demo/src/app/advanced/using-ng-pipe.component.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<div class="section banner">
2+
<div class="container">
3+
<div class="row">
4+
<div class="col s12 m9">
5+
<h1 class="header center-on-small-only">Using Angular Pipes</h1>
6+
</div>
7+
</div>
8+
</div>
9+
</div>
10+
<div class="container">
11+
<div class="row">
12+
<div class="col s12 m9 l12">
13+
<div class="section">
14+
<p class="caption">
15+
You can use Angular Pipe to transform data on the table.
16+
</p>
17+
<div class="col s12 m9 l12 showcase-tabs">
18+
<ul class="anchor-links">
19+
<li class="col s4"><a class="waves-effect btn" href="#preview">Preview</a></li>
20+
<li class="col s4"><a class="waves-effect btn" href="#html">HTML</a></li>
21+
<li class="col s3"><a class="waves-effect btn" href="#ts">Typescript</a></li>
22+
</ul>
23+
</div>
24+
<div id="preview" class="col s12 m9 l12">
25+
<h4 class="header">Preview</h4>
26+
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
27+
</div>
28+
</div>
29+
<app-using-ng-pipe-snippet></app-using-ng-pipe-snippet>
30+
</div>
31+
</div>
32+
</div>

‎demo/src/app/advanced/using-ng-pipe.component.ts

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { UpperCasePipe } from '@angular/common';
2+
import { Component, OnInit } from '@angular/core';
3+
import { ADTSettings } from 'angular-datatables/src/models/settings';
4+
5+
@Component({
6+
selector: 'app-using-ng-pipe',
7+
templateUrl: './using-ng-pipe.component.html'
8+
})
9+
export class UsingNgPipeComponent implements OnInit {
10+
11+
constructor(
12+
private pipeInstance: UpperCasePipe
13+
) { }
14+
15+
dtOptions: ADTSettings = {};
16+
17+
ngOnInit(): void {
18+
19+
this.dtOptions = {
20+
ajax: 'data/data.json',
21+
columns: [
22+
{
23+
title: 'ID',
24+
data: 'id'
25+
},
26+
{
27+
title: 'First name',
28+
data: 'firstName',
29+
ngPipeInstance: this.pipeInstance
30+
},
31+
{
32+
title: 'Last name',
33+
data: 'lastName',
34+
ngPipeInstance: this.pipeInstance
35+
}
36+
]
37+
};
38+
}
39+
40+
}

‎demo/src/app/app.component.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,9 @@ <h3>
8989
<li>
9090
<a routerLink="/advanced/router-link">Router link</a>
9191
</li>
92+
<li>
93+
<a routerLink="/advanced/using-pipe">Using Angular Pipes</a>
94+
</li>
9295
</ul>
9396
</div>
9497
</li>

‎demo/src/app/app.module.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,15 @@ import { ResponsiveExtensionConfigurationComponent } from './extensions/responsi
5757
import { SelectExtensionComponent } from './extensions/select-extension.component';
5858
import { SelectExtensionSnippetComponent } from './extensions/select-extension-snippet.component';
5959
import { SelectExtensionConfigurationComponent } from './extensions/select-extension-configuration.component';
60+
import { UsingNgPipeComponent } from './advanced/using-ng-pipe.component';
61+
import { UsingNgPipeSnippetComponent } from './advanced/using-ng-pipe-snippet.component';
6062

6163
// HightlightJS
6264
import hljs from 'highlight.js/lib/highlight';
6365
import javascript from 'highlight.js/lib/languages/javascript';
6466
import typescript from 'highlight.js/lib/languages/typescript';
6567
import xml from 'highlight.js/lib/languages/xml';
68+
import { UpperCasePipe } from '@angular/common';
6669

6770
hljs.registerLanguage('typescript', typescript);
6871
hljs.registerLanguage('javascript', javascript);
@@ -114,7 +117,9 @@ hljs.registerLanguage('xml', xml);
114117
ResponsiveExtensionConfigurationComponent,
115118
SelectExtensionComponent,
116119
SelectExtensionSnippetComponent,
117-
SelectExtensionConfigurationComponent
120+
SelectExtensionConfigurationComponent,
121+
UsingNgPipeComponent,
122+
UsingNgPipeSnippetComponent
118123
],
119124
imports: [
120125
BrowserModule,
@@ -125,6 +130,7 @@ hljs.registerLanguage('xml', xml);
125130
AppRoutingModule
126131
],
127132
providers: [
133+
UpperCasePipe
128134
],
129135
bootstrap: [AppComponent]
130136
})

‎demo/src/app/app.routing.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { ButtonsExtensionComponent } from './extensions/buttons-extension.compon
2424
import { ColreorderExtensionComponent } from './extensions/colreorder-extension.component';
2525
import { ResponsiveExtensionComponent } from './extensions/responsive-extension.component';
2626
import { SelectExtensionComponent } from './extensions/select-extension.component';
27+
import { UsingNgPipeComponent } from './advanced/using-ng-pipe.component';
2728

2829
const routes: Routes = [
2930
{
@@ -95,6 +96,10 @@ const routes: Routes = [
9596
path: 'advanced/router-link',
9697
component: RouterLinkComponent
9798
},
99+
{
100+
path: 'advanced/using-pipe',
101+
component: UsingNgPipeComponent
102+
},
98103
{
99104
path: 'extensions/buttons',
100105
component: ButtonsExtensionComponent

‎src/angular-datatables.directive.ts

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
99
import { Subject } from 'rxjs';
10+
import { ADTSettings } from './models/settings';
1011

1112
@Directive({
1213
selector: '[datatable]'
@@ -16,7 +17,7 @@ export class DataTableDirective implements OnDestroy, OnInit {
1617
* The DataTable option you pass to configure your table.
1718
*/
1819
@Input()
19-
dtOptions: DataTables.Settings = {};
20+
dtOptions: ADTSettings = {};
2021

2122
/**
2223
* This trigger is used if one wants to trigger manually the DT rendering
@@ -62,7 +63,37 @@ export class DataTableDirective implements OnDestroy, OnInit {
6263
Promise.resolve(this.dtOptions).then(dtOptions => {
6364
// Using setTimeout as a "hack" to be "part" of NgZone
6465
setTimeout(() => {
65-
this.dt = $(this.el.nativeElement).DataTable(dtOptions);
66+
// Assign DT properties here
67+
let options: ADTSettings = {
68+
rowCallback: (row, data, index) => {
69+
if (dtOptions.columns) {
70+
const columns = dtOptions.columns;
71+
// Filter columns with pipe declared
72+
const colsWithPipe = columns.filter(x => x.ngPipeInstance);
73+
// Iterate
74+
colsWithPipe.forEach(el => {
75+
const pipe = el.ngPipeInstance;
76+
// find index of column using `data` attr
77+
const i = columns.findIndex(e => e.data == el.data);
78+
// get <td> element which holds data using index
79+
const rowFromCol = row.childNodes.item(i);
80+
// Transform data with Pipe
81+
const rowVal = $(rowFromCol).text();
82+
const rowValAfter = pipe.transform(rowVal);
83+
// Apply transformed string to <td>
84+
$(rowFromCol).text(rowValAfter);
85+
});
86+
}
87+
88+
// run user specified row callback if provided.
89+
if (this.dtOptions.rowCallback) {
90+
this.dtOptions.rowCallback(row, data, index);
91+
}
92+
}
93+
};
94+
// merge user's config with ours
95+
options = Object.assign({}, dtOptions, options);
96+
this.dt = $(this.el.nativeElement).DataTable(options);
6697
resolve(this.dt);
6798
});
6899
});

‎src/models/settings.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { PipeTransform } from '@angular/core';
2+
3+
export interface ADTSettings extends DataTables.Settings {
4+
columns?: ADTColumns[];
5+
}
6+
export interface ADTColumns extends DataTables.ColumnSettings {
7+
/** Set instance of Angular pipe to transform the data of particular column */
8+
ngPipeInstance?: PipeTransform;
9+
}

0 commit comments

Comments
 (0)