Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

223
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda