Apply pipe to datatable data

[theunreal]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior No documentation or way to apply pipe to a column values

Expected behavior An option to apply pipe to column values. For example: Datatable shows 1497629491 which is a timestamp - which can be converted to actual date using pipe

Reproduction of the problem Irreleavnt

What is the motivation / use case for changing the behavior? Essential feature

Please tell us about your environment: Irreleavnt

• Table version: 0.8.x 9.3.0

• Angular version: 2.0.x 4.4.2

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] All

• Language: TS

[devitpurohit]

I am using ng-template and binding the numeric value <ngx-datatable-column prop="balance" name="Balance" [width]="50" > <ng-template let-value="value" ngx-datatable-cell-ng-template> {{value | currencyformat}} </ng-template> </ngx-datatable-column>

The pipe transform function never gets called. I have also tried by setting pipe attribute: <ng-template let-value="value" ngx-datatable-cell-ng-template pipe="currencyformat">

But I am getting error i.e. userPipe.transform is not a function.

Please let me know what I am missing here.

[devitpurohit]

I see my mistake. I replaced ngx-datatable-cell-ng-template with ng-datatable-cell-template. It is working for me now.

[theunreal]

@devitpurohit Can you share your code? There is no example about how to assign the template to the column

[adammedford]

https://github.com/swimlane/ngx-datatable/blob/master/demo/templates/template-dom.component.ts https://github.com/swimlane/ngx-datatable/blob/master/demo/templates/template-obj.component.ts

Examples for both supported methods of adding templates.

[devitpurohit]

Sorry I missed out to check email:

Here is the code:

<ngx-datatable #mydatatable class="material fullscreen mytbltab" [headerHeight]="30" [columnMode]="'force'" [footerHeight]="30" [rowHeight]="'auto'" [rows]="accounts"> <ngx-datatable-column prop="accountName" [width]="250" name="Account Name" [sortable]="false" [draggable]="false"> <ngx-datatable-column prop="accountTypeName" name="Category" [width]="30" [sortable]="false" [draggable]="false"> <ngx-datatable-column prop="balance" name="Balance" [width]="50" [sortable]="false" [draggable]="false">

{{value | currencyformat}}

<ngx-datatable-column name="Bank Balance" prop="bankBalance" [width]="50" [sortable]="false" [draggable]="false">

{{bankBalance | currencyformat}}

----------------------------------------------pipe code---------------used accounting-js------- @Pipe({ name: 'currencyformat' }) export class CurrencyFormatterPipe implements PipeTransform { transform(value: string, optionalParam: any) { accounting.formatMoney(value || 0, currencyFormatOptions); } }

On 30 June 2017 at 22:10, Adam Medford notifications@github.com wrote:

https://github.com/swimlane/ngx-datatable/blob/master/ demo/templates/template-dom.component.ts https://github.com/swimlane/ngx-datatable/blob/master/ demo/templates/template-obj.component.ts

Examples for both supported methods of adding templates.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/swimlane/ngx-datatable/issues/844#issuecomment-312316009, or mute the thread https://github.com/notifications/unsubscribe-auth/AcaMRpyz8NHv10Q0iaMxWih6dY4ifF41ks5sJSUHgaJpZM4OJi1m .

[iremkaya]

we tried all way that explained above. but ourp problem is still continue. we need to call two pipe for example. prop prop="{{item.prop}} {{row.item.prop | asmartdate }} row.prop or row.item is running correctly. row.prop or row.item is running correctly. even name="{{item.name | translate}}" it works correctly but when the subject comes to prop there is something wrong and we didnt get any data

<ngx-datatable [ngStyle]="getTableStyle()" [rows]="rowsInput" #table class="material striped fullscreen" [columnMode]="'force'" [headerHeight]="headerHeight" [rowHeight]="rowHeight" [loadingIndicator]="isLoading" [scrollbarV]="true"> <ngx-datatable-column *ngFor="let item of columnsInput" minWidth="{{item.width}}" prop="{{item.prop|date}}" name="{{item.name | translate}}">

[ashecret]

I prefer to pass json to columns in data-table. You could use a custom Pipe as below -

# Component
tableColumns = [
    { name: 'Title', prop: 'title' },
    { name: 'Actual Price', prop: 'actual_price', pipe: { transform: this.currencyPipe } },
    { name: 'Valid till', prop: 'valid_till.iso', pipe: { transform: this.datePipe } },
]

# HTML
<ngx-datatable [columns]="tableColumns"  [rows]='offers'
    ... # truncated for brevity
</ngx-datatable>

[ghost]

I prefer to pass json to columns in data-table. You could use a custom Pipe as below -

# Component
tableColums = [
    { name: 'Title', prop: 'title' },
    { name: 'Actual Price', prop: 'actual_price', pipe: { transform: this.currencyPipe } },
    { name: 'Valid till', prop: 'valid_till.iso', pipe: { transform: this.datePipe } },
]

# HTML
<ngx-datatable [columns]="tableColumns"  [rows]='offers'
    ... # truncated for brevity
</ngx-datatable>

what is this.datePipe? and how do i transform timestamp to 'MM/dd/yyyy' format?

[ashecret]

@sushmit-oodles this.datePipe is a custom pipe built to transform the date. The following should return data to 'MM/dd/yyyy' format.

datePipe(value: any, ...args: any[]) {
    return new Date(value).toLocaleString('en-US').split(',')[0];
}

To learn more about custom pipe, follow this

[HarshitChhipa]

How you pass the value to the pipe via column.

[ashecret]

How you pass the value to the pipe via column.

Object prop value is directly passed to the pipe

[HarshitChhipa]

I have used the pipe explained inside this article .. https://medium.com/@Pierre_anthill/angular-2-4-pretty-phone-number-pipe-2da3fab8fe6e

And it needs to args so how can i do that.

[ashecret]

I have used the pipe explained inside this article .. https://medium.com/@Pierre_anthill/angular-2-4-pretty-phone-number-pipe-2da3fab8fe6e

And it needs to args so how can i do that.

I don't think it's not possible from the code. I would either write custom ngx-datatable-column html template and add pipe there; or hardcode the arguments inside the pipe if possible logically

[Ragasrm]

https://stackoverflow.com/questions/57405789/need-to-apply-pipe-for-specific-property-out-of-many-property

help for this code.

[Rudraprakash92]

Sorry I missed out to check email: Here is the code: <ngx-datatable #mydatatable class="material fullscreen mytbltab" [headerHeight]="30" [columnMode]="'force'" [footerHeight]="30" [rowHeight]="'auto'" [rows]="accounts"> <ngx-datatable-column prop="accountName" [width]="250" name="Account Name" [sortable]="false" [draggable]="false"> <ngx-datatable-column prop="accountTypeName" name="Category" [width]="30" [sortable]="false" [draggable]="false"> <ngx-datatable-column prop="balance" name="Balance" [width]="50" [sortable]="false" [draggable]="false"> {{value | currencyformat}} <ngx-datatable-column name="Bank Balance" prop="bankBalance" [width]="50" [sortable]="false" [draggable]="false"> {{bankBalance | currencyformat}} … ----------------------------------------------pipe code---------------used accounting-js------- @pipe({ name: 'currencyformat' }) export class CurrencyFormatterPipe implements PipeTransform { transform(value: string, optionalParam: any) { accounting.formatMoney(value || 0, currencyFormatOptions); } } On 30 June 2017 at 22:10, Adam Medford @.***> wrote: https://github.com/swimlane/ngx-datatable/blob/master/ demo/templates/template-dom.component.ts https://github.com/swimlane/ngx-datatable/blob/master/ demo/templates/template-obj.component.ts Examples for both supported methods of adding templates. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#844 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AcaMRpyz8NHv10Q0iaMxWih6dY4ifF41ks5sJSUHgaJpZM4OJi1m .

this is working..for me

[emekaelo]

https://github.com/swimlane/ngx-datatable/blob/master/demo/templates/template-dom.component.ts https://github.com/swimlane/ngx-datatable/blob/master/demo/templates/template-obj.component.ts

Examples for both supported methods of adding templates.

updated links https://github.com/swimlane/ngx-datatable/blob/master/src/app/templates/template-obj.component.ts https://github.com/swimlane/ngx-datatable/blob/master/src/app/templates/template-dom.component.ts