How to fill in default - (hyphen) for blank cells
I need default empty cells of my primeng datatable to '-'. Can anyone please share how.
Let's assume my data is:
[
{
'column': null
},
{
'column': {
'name': 'A'
}
},
{
'column': {
'name': 'B'
}
},
{
'column': null
}
]
My primench column configuration looks like this:
{
field: 'column.name',
header: 'Name',
sortable: true
}
But the following doesn't work as "column" doesn't always have to have a "name" property. And at the bottom, all the fields of that column turn into "-", whether it has a "name" or not.
<p-column [field]="col.field" [header]="col.header" [sortable]="col.sortable">
<template let-col let-data="rowData" pTemplate="body">
{{data[col.field] ? data[col.field] : "-"}}
</template>
</p-column>
Please, help!
+3
source to share
1 answer
I used Angular2 custom feed for this.
How to do:
- You need to create a custom channel more details like here :
import {
Pipe,
PipeTransform
} from '@angular/core';
/*
* If piped value is falsy, default to given default value or - (hyphen)
* Takes an defaultValue argument that defaults to - (hyphen).
* Usage:
* value | defaultTo:'N/A'
* Example:
* {{ orders.attributes?.first_name | defaultTo}}
* formats to: -
*
* Written by Henrik Peinar 06/04/2017
*/
@Pipe({
name: 'defaultTo'
})
export class DefaultToPipe implements PipeTransform {
public transform(value: string, defaultValue?: string): string {
return (value) ? value : (defaultValue !== undefined ? defaultValue : '-');
}
}
- Add your pipe to your app ads to be available for use:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// ... other imports ...
import { DefaultToPipe } from './default-to.pipe';
@NgModule({
imports: [ BrowserModule, HttpModule],
declarations: [ AppComponent, DefaultToPipe ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
- Use the newly created channel in any of your templates:
<tr *ngFor="let order of orderList">
<td>{{order.order_number}}</td>
<td>{{order.phone | defaultTo:'No phone'}}</td>
<td>{{order.shipping_address?.first_name | defaultTo}}</td>
<td>{{order.shipping_address?.last_name | defaultTo}}</td>
</tr>
I didn't create a fully working snippet because I didn't find Angular2 as a possible dependency on the snippet provider.
0
source to share