Ways to populate missing cells with a default hyphen symbol

Question

Ways to populate missing cells with a default hyphen symbol

Looking for a way to default empty cells in my primeng datatable to '-'.

Consider the following data:

[
{
 'column': null
},
{
 'column': {
  'name': 'A'
 }
},
{
 'column': {
  'name': 'B'
 }
},
{
 'column': null
}
]

The configuration of my primeng column is as follows:

{  
 field: 'column.name',
 header: 'Name',
 sortable: true
}

However, the current setup does not work when "column" may or may not have the property "name". It sets all fields in this column to '-', regardless of the presence of "name".

 <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>

If you have any ideas on how to solve this issue, please share!

angular typescript primeng

Answer 1

Answer №1

I utilized a custom pipe in Angular2 for this solution.

Here's how you can implement it:

Begin by creating a custom pipe, learn more about the process 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 : '-');
  }
}

Ensure your custom pipe is declared in your app so it can be used:

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 { }

Implement your custom pipe within your templates as shown below:

<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>

A fully functional snippet was not provided due to Angular2 not being recognized as a valid dependency in the snippet provider.

Answer 2

I utilized a custom pipe in Angular2 for this solution.

Here's how you can implement it:

Begin by creating a custom pipe, learn more about the process 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 : '-');
  }
}

Ensure your custom pipe is declared in your app so it can be used:

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 { }

Implement your custom pipe within your templates as shown below:

<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>

A fully functional snippet was not provided due to Angular2 not being recognized as a valid dependency in the snippet provider.

Ways to populate missing cells with a default hyphen symbol

Answer №1

Similar questions

I seem to be failing at properly executing Promises... What crucial element am I overlooking in this process?

Switch between classes when hovering over / exiting ngFor elements

Angular 2, 4, or 5 - the powerful choices for web

I am currently attempting to deploy my React application using Vercel. I followed all the necessary steps in my terminal, but unfortunately encountered an error at the end: "Error: Command 'npm install' exited with 1"

The data type 'Observable<any>' cannot be assigned to the type 'StoresSummaryResults'. The property 'Data' is not present in the 'Observable<any>' type

How to easily upload zip files in Angular 8

Encountered an error while attempting to upgrade to the latest @angular/cli version 1.0.0: Unexpected symbol "<" found in JSON at the beginning of the file

Using the ternary operator will always result in a TRUE outcome

Issue with the Material UI theme module enhancement feature not functioning as expected

The in-memory-web-api is failing to respond to queries when using Chrome

Troubles in transitioning a local project from Angular 2 to Angular 4 using Angular-cli

Issue with updating BehaviorSubject not being reflected when called from my service component has been identified

What is the best way to access data from a local JSON file in Gatsby when using TypeScript and GraphQL?

Importing Json in Angular 8: A detailed guide

Error Message: ES5 mandates the use of 'new' with Constructor Map

Nativescript Image-picker is encountering difficulties locating files in external storage

Angular issue: Readonly or disabled input fields not submitting data

Troubles with Conditional Application of CSS Styles to a Twitter-Bootstrap Table

Error: The function User.findOne is not recognized

Having trouble customizing the toolbar on ngx-quill? Quill seems to be having trouble importing modules