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

Question

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!

Answer 1

所以这很简单，我不知道我是怎么错过它的，您只需将数据作为布尔值传递，然后在列定义中添加 isBoolean:true 并且 p 表将自动在值所在的位置打勾如果为假，则为真和空白。