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>
Related
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 need to display a table with a vertical header instead of the traditional horizontal header. Since the table has to be under another table that is using Vuetify, I want to make the vertical table using the same layout using Vuetify as well.
In plain html/css I know that you can optain this using TH as rows:
<table>
<tbody>
<tr>
<th scope="row">A</th>
<td>b</td>
</tr>
<tr>
<th scope="row">C</th>
<td>d</td>
</tr>
</tbody>
</table>
However, Vuetify doesn't allow that much of modification of its framework and I can't find any other way using their documentation: https://vuetifyjs.com/en/components/data-tables/
Is there any other way to make a vertical table with Vuetify?
You can specify body inside v-data-table with slots.
<v-data-table
:items="desserts">
<template v-slot:body="{ items }">
<tbody>
<tr v-for="header in headers">
<td>
{{ header.text }}
</td>
<td v-for="item in items">
{{ item[header.value] }}
</td>
</tr>
</tbody>
</template>
</v-data-table>
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
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>