Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

218
Views
Display Icon in <p-table> component in angular (primeng-table)

I have a functionality to implement in which I am getting data from an API and I am using that to display it in a , now my requirement is to display a tick value in one of the columns for which the corresponding row holds a Boolean value for ex. a row has 6 columns and one of them is a Boolean value so I have to display tick in the column if the value is true and nothing if otherwise. I hope you understand the question.

I have a shared component called standardTable.component.ts to which I pass data such as colDef , rowData and other configurable data. the component I am currently making changes is called job-list-view.component.ts and the column definition is given below

this.cols = [
      { field: 'jobSegment', header: 'Service No', isBoolean: false, callback: this.navigateToJobDetails },
      { field: 'serviceName', header: 'Service' },
      { field: 'status', header: 'Status', isBoolean: false },
      { field: 'jobDateSpecial', header: 'Service Date', isBoolean: false, dateOnly: true },
      { field: 'orderDate', header: 'Order Date', isBoolean: false , dateOnly: true },
      { field: 'dueDate', header: 'Due Date', isBoolean: false, dateOnly: true},
      { field: 'witnessNames', header: 'Witness(es)', isBoolean: false, isArray: true  },
      { field: 'jobPriority', header: 'Priority', isHtml: true },
      { field: 'lastInvoiceDate', header: 'Last Invoice Date', callback: this.navigateToPayTab, dateOnly: true },
      { field: 'workOrderOrderedByClient', header: 'Hiring Company', isBoolean: false },
      { field: 'workOrderOrderedByContact', header: 'Hiring Contact', isBoolean: false },
      { field: 'witnessStartTimeWithTimeZone', header: 'Time', isBoolean: false },
      { field: 'caseName', header: 'Case Name', isBoolean: false},
      { field: 'isBackOrder', header:'Back Order'}
    ];

I have added the last col definition for Back Order as I want to display a tick mark for those values o rows that have isBackOrder as true. Is there a way I can achieve this ? and since the standardtable is a shared component I cant make much changes in that. any help would be appreciated!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

So It was pretty simple I dont know how I missed it, you just have to pass the data as a boolean value and then in the column definition just add isBoolean:true and the p-table will automatically put a tick where ever the value is true and blank if false.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!