When I use font-awesome icons in a turbo table, the size of the cell is off.
I am doing something like this:
{{tenant.name}}
I am using primeng 5.2 and font-awesome 4.2.
Has anyone successfully added an icon to a turbo table?
If so, which icons did you use and how did you do it?
Thanks
Have you succeeded in displaying a font awesome icon outside your TurboTable ? If yes, it should work inside the table.
I created this Plunker where you can see Font Awesome icons inside a TurboTable.
You can then compare with your code to see what's wrong for you.
<p-table [value]="cars">
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<th>Color</th>
<th>Actions</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td>{{car.vin}}</td>
<td>{{car.year}}</td>
<td>{{car.brand}}</td>
<td>{{car.color}}</td>
<td><i class="fa fa-edit"></i><i class="fa fa-close"></i></td>
</tr>
</ng-template>
</p-table>
Related
I am trying to add an icon inside one of the headers of my html table. This is my code:
<div id="dialog_box">
<table id="req_header" border="2">
<tr>
<th><i class="fa-solid fa-list-check"></i></th>
<th>Table</th>
<th>QtrID</th>
<th>Requested by</th>
<th>Reason</th>
</tr>
</table><br>
<button id="delete_qtrid">Delete</button>
</div>
Strangely the icon isn't showing after executing the code. I have also included my kit code:
<script src="https://kit.fontawesome.com/03d58ba9c7.js" crossorigin="anonymous"></script>
inside my <head></head> section in my html file. Where am I going wrong? Please help me.
EDIT: Screenshot:
So basically I want to have child components be in control of generating some content and put each one of them as td element, but it's not working in angular because of the extra div angular generates.
How could I make this work?
Parent-component.html
<table>
<tr>
<td>something1</td>
<td>something2</td>
<app-child-component></app-child-component>
</tr>
<table>
Child-component.html
<ng-container *ngTemplateOutlet="content"></ng-container>
<ng-template #content>
<td>something</td>
<td>something else</td>
<td><app-another-component></td>
</ng-template>
Add this to your CSS to get the child component's container out of the way:
:host{display: contents; }
I have an angular component which shows a map or a primeNG table depending on a variable. This component is prepared to act as a child component and be used inside other components. The map fits on the container it is set, but the table exceeds the height of the container if it has too many rows.
I want to force the table fitting the container, It would be nice if it auto-selects the number of rows per page in the paginator depending on the space in the container, but I would also be fine with some kind of scrollbar.
I have tried the classic scrollable='true', scrollheight and that stuff, but they do not work for me.
Edit: Adding the table code:
<div><p-table #dt
[value]="listaMapa()"
[columns]="mostrarColumnas"
(sortFunction)="customSort($event)"
[customSort]="true"
[paginator]="true"
[showCurrentPageReport]="true" [rows]="10"
[scrollable]="true"
[scrollHeight]="'100%'"
currentPageReportTemplate="{first} - {last} de {totalRecords}" [rowsPerPageOptions]="[10,25,50]">
<ng-template pTemplate="header" let-columns>
<tr>
<th [pSortableColumn]="'matricula'">MatrÃcula
<p-sortIcon [field]="'matricula'"></p-sortIcon>
</th>
<th>Latitud
</th>
<th >Longitud
</th>
<th>Ubicación</th>
<th [pSortableColumn]="'zona'">Zona
<p-sortIcon [field]="'zona'" ></p-sortIcon>
</th>
<th [pSortableColumn]="'fecha'">Fecha de registro
<p-sortIcon [field]="'fecha'" ></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-posiciones>
<tr>
<td>{{posiciones.matricula}}</td>
<td>{{posiciones.latitud}}</td>
<td>{{posiciones.longitud}}</td>
<td>{{posiciones.descripcion}}</td>
<td>{{posiciones.zona}}</td>
<td>{{posiciones.fecha}}</td>
</tr>
</ng-template>
</p-table>
</div>
The point is that I want to be able to use this table as a child component and make sure that it will not get bigger than the container component. I have added [scrollable]="true" but it does not work for [scrollHeight]="'100%'" or [scrollHeight]="'100hv'" so I have to fix the height of the table in order to make the scroll work. I have also tried style="height: 100%;"but nothing changes.
I'm setting up a simple table at work using Angular and have come across a problem. After I froze a couple of the columns. Whenever I scroll all the way to the bottom, the frozen columns' rows are misaligned with the scrolling columns' rows. This problem only shows up when using Edge and Firefox but it's necessary to use them. However, in Chrome the rows are aligned.
I've tried applying padding and margins to the columns' elements but it doesn't seem to work. I should also mention that I'm using the primeNg data table components to set up the tables. Here's the HTML code. Colgroup is the group of columns that scroll and frozenName is the group of columns that are frozen.
<p-table [columns]="scrollableCols" [value]="data"
[scrollable]="true" [frozenColumns] = "frozenName" [frozenValue] =
"frozendata" scrollHeight="300px" frozenWidth='400px'
[style] = "{width:'1000px'}" >
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width:200px" >
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns >
<tr>
<th *ngFor= "let col of columns" >
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="frozenrows" let-rowData let-columns="columns">
<tr>
<td *ngFor= "let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns" >
<tr>
<td *ngFor= "let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
No errors occur when applying padding and margins but they separate the rows from the header which is not what I want.
I don't think this is a problem with your code it's just that some css doesn't work in Microsoft Edge, because there is still a lot of work to do on it.
I also have the same problem with my website.
But you could try something like this:
https://www.w3schools.com/howto/howto_css_four_columns.asp
I am using primeNG p-table in my Angular application. I need to put this p-table in div. However Visual Studio gives a warning that I can't have td in div. But I have the whole table in it. Is it a good practice to put table into a div?
<div>
<p-table [value]="someData">
<ng-template pTemplate="header">
<tr>
<th>some header</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td>some value</td>
</tr>
</ng-template>
</p-table>
</div>