diff --git a/demo/src/app/advanced/using-ng-pipe-snippet.component.ts b/demo/src/app/advanced/using-ng-pipe-snippet.component.ts
new file mode 100644
index 000000000..563c56501
--- /dev/null
+++ b/demo/src/app/advanced/using-ng-pipe-snippet.component.ts
@@ -0,0 +1,78 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-using-ng-pipe-snippet',
+ template: `
+
+
+
+
+
+
+
+
+ `
+})
+export class UsingNgPipeSnippetComponent implements OnInit {
+
+ constructor() { }
+
+ htmlSnippet = `
+
+
+<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>
+
+ `;
+
+ tsSnippet = `
+
+
+import { UpperCasePipe } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { ADTSettings } from 'angular-datatables/src/models/settings';
+
+@Component({
+ selector: 'app-using-ng-pipe',
+ templateUrl: './using-ng-pipe.component.html'
+})
+export class UsingNgPipeComponent implements OnInit {
+
+ constructor(
+ private pipeInstance: UpperCasePipe // inject your Angular Pipe
+ ) { }
+
+ // Use ADTSettings instead of DataTables.Settings
+ dtOptions: ADTSettings = {};
+
+ ngOnInit(): void {
+
+ this.dtOptions = {
+ ajax: 'data/data.json',
+ columns: [
+ {
+ title: 'ID',
+ data: 'id'
+ },
+ {
+ title: 'First name',
+ data: 'firstName',
+ ngPipeInstance: this.pipeInstance // <-- Pipe is used here
+ },
+ {
+ title: 'Last name',
+ data: 'lastName',
+ ngPipeInstance: this.pipeInstance // <-- Pipe is used here
+ }
+ ]
+ };
+ }
+
+}
+
+
+ `;
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/demo/src/app/advanced/using-ng-pipe.component.html b/demo/src/app/advanced/using-ng-pipe.component.html
new file mode 100644
index 000000000..70e70ddc4
--- /dev/null
+++ b/demo/src/app/advanced/using-ng-pipe.component.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+ You can use Angular Pipe to transform data on the table.
+
+
+
+
+
+
+
+
Router link
+
+ Using Angular Pipes
+
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
index 68ae94f54..ad9bcec7a 100644
--- a/demo/src/app/app.module.ts
+++ b/demo/src/app/app.module.ts
@@ -57,12 +57,15 @@ import { ResponsiveExtensionConfigurationComponent } from './extensions/responsi
import { SelectExtensionComponent } from './extensions/select-extension.component';
import { SelectExtensionSnippetComponent } from './extensions/select-extension-snippet.component';
import { SelectExtensionConfigurationComponent } from './extensions/select-extension-configuration.component';
+import { UsingNgPipeComponent } from './advanced/using-ng-pipe.component';
+import { UsingNgPipeSnippetComponent } from './advanced/using-ng-pipe-snippet.component';
// HightlightJS
import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
import typescript from 'highlight.js/lib/languages/typescript';
import xml from 'highlight.js/lib/languages/xml';
+import { UpperCasePipe } from '@angular/common';
hljs.registerLanguage('typescript', typescript);
hljs.registerLanguage('javascript', javascript);
@@ -114,7 +117,9 @@ hljs.registerLanguage('xml', xml);
ResponsiveExtensionConfigurationComponent,
SelectExtensionComponent,
SelectExtensionSnippetComponent,
- SelectExtensionConfigurationComponent
+ SelectExtensionConfigurationComponent,
+ UsingNgPipeComponent,
+ UsingNgPipeSnippetComponent
],
imports: [
BrowserModule,
@@ -125,6 +130,7 @@ hljs.registerLanguage('xml', xml);
AppRoutingModule
],
providers: [
+ UpperCasePipe
],
bootstrap: [AppComponent]
})
diff --git a/demo/src/app/app.routing.ts b/demo/src/app/app.routing.ts
index bfbac56d4..09fc3dd13 100644
--- a/demo/src/app/app.routing.ts
+++ b/demo/src/app/app.routing.ts
@@ -24,6 +24,7 @@ import { ButtonsExtensionComponent } from './extensions/buttons-extension.compon
import { ColreorderExtensionComponent } from './extensions/colreorder-extension.component';
import { ResponsiveExtensionComponent } from './extensions/responsive-extension.component';
import { SelectExtensionComponent } from './extensions/select-extension.component';
+import { UsingNgPipeComponent } from './advanced/using-ng-pipe.component';
const routes: Routes = [
{
@@ -95,6 +96,10 @@ const routes: Routes = [
path: 'advanced/router-link',
component: RouterLinkComponent
},
+ {
+ path: 'advanced/using-pipe',
+ component: UsingNgPipeComponent
+ },
{
path: 'extensions/buttons',
component: ButtonsExtensionComponent
diff --git a/src/angular-datatables.directive.ts b/src/angular-datatables.directive.ts
index b75adfc94..8eb4c34bf 100644
--- a/src/angular-datatables.directive.ts
+++ b/src/angular-datatables.directive.ts
@@ -7,6 +7,7 @@
import { Directive, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
+import { ADTSettings } from './models/settings';
@Directive({
selector: '[datatable]'
@@ -16,7 +17,7 @@ export class DataTableDirective implements OnDestroy, OnInit {
* The DataTable option you pass to configure your table.
*/
@Input()
- dtOptions: DataTables.Settings = {};
+ dtOptions: ADTSettings = {};
/**
* This trigger is used if one wants to trigger manually the DT rendering
@@ -62,7 +63,37 @@ export class DataTableDirective implements OnDestroy, OnInit {
Promise.resolve(this.dtOptions).then(dtOptions => {
// Using setTimeout as a "hack" to be "part" of NgZone
setTimeout(() => {
- this.dt = $(this.el.nativeElement).DataTable(dtOptions);
+ // Assign DT properties here
+ let options: ADTSettings = {
+ rowCallback: (row, data, index) => {
+ if (dtOptions.columns) {
+ const columns = dtOptions.columns;
+ // Filter columns with pipe declared
+ const colsWithPipe = columns.filter(x => x.ngPipeInstance);
+ // Iterate
+ colsWithPipe.forEach(el => {
+ const pipe = el.ngPipeInstance;
+ // find index of column using `data` attr
+ const i = columns.findIndex(e => e.data == el.data);
+ // get element which holds data using index
+ const rowFromCol = row.childNodes.item(i);
+ // Transform data with Pipe
+ const rowVal = $(rowFromCol).text();
+ const rowValAfter = pipe.transform(rowVal);
+ // Apply transformed string to |
+ $(rowFromCol).text(rowValAfter);
+ });
+ }
+
+ // run user specified row callback if provided.
+ if (this.dtOptions.rowCallback) {
+ this.dtOptions.rowCallback(row, data, index);
+ }
+ }
+ };
+ // merge user's config with ours
+ options = Object.assign({}, dtOptions, options);
+ this.dt = $(this.el.nativeElement).DataTable(options);
resolve(this.dt);
});
});
diff --git a/src/models/settings.ts b/src/models/settings.ts
new file mode 100644
index 000000000..68561c1f1
--- /dev/null
+++ b/src/models/settings.ts
@@ -0,0 +1,9 @@
+import { PipeTransform } from '@angular/core';
+
+export interface ADTSettings extends DataTables.Settings {
+ columns?: ADTColumns[];
+}
+export interface ADTColumns extends DataTables.ColumnSettings {
+ /** Set instance of Angular pipe to transform the data of particular column */
+ ngPipeInstance?: PipeTransform;
+}
|