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

The execution of the server.js file in the dist folder does not display any

Are there any @types available for browser extension objects that are interoperable?

Customize styles for a specific React component in a Typescript project using MaterialUI and JSS

What causes the difference in inference for unspecified generics between a simple function call and a null-coalescing operator in TypeScript?

Utilizing Google Analytics 4 in a React TypeScript Environment

Deactivating a form field depending on a selected radio button in Angular 2

CORS policy causing Socket.io communication issues in a Node.js and Angular app

Guide on inserting Angular 2 attributes within a variable in an Angular 2 TypeScript class

What is the correct way to define an abstract method within a class to ensure that an IDE detects and notifies if the abstract method is not implemented

Tips for sorting the mat table dataSource by inputting two columns and selecting the search button

What steps should I take to resolve the ChunkLoadError related to signalr?

Having trouble with window.scrollTo(0, 0) and scrollTop = 0 when navigating routes in Angular 2?

Error encountered while upgrading to Angular 5: splitHash issue

Tips for arranging columns and rows in a mat-dialog box

Retrieve the array from within the string

Experiencing difficulty in retrieving data streams in Angular 5 when using the pptxGenjs library

Where should messages be pushed within the Angular constructor using Observables and Subjects?

Retrieve the value within the finalize pipe from a test execution

Dealing with tag conflicts in Angular with ngx-translate

Issues arise when trying to implement Angular class and it does