I am using turbo table and want the following:
from the turbotable example I got:
<p-table [columns]="cols" [value]="cars" [scrollable]="true" scrollHeight="200px"
[style]="{'width':'100%'}">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width:250px">
</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="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
but I don't want to use the
<col *ngFor="let col of columns" style="width:250px">
here is a plnkr
Use this code in your file .html
<p-table [style]="{'overflow':'auto!important'}"
[columns]="cols" [value]="Dataset"
[resizableColumns]="true" columnResizeMode="expand"
[responsive]="true" [rows]="20"
[immutable]=false
[paginator]="true" [rowsPerPageOptions]="[10,15,20,25]">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field" pResizableColumn >
{{col.header}}
<p-sortIcon [field]="col.field"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns" class="ui-resizable-column">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
and add this css code bor auto fit and resalable the columns .scss
//table ui
::ng-deep .ui-table table, .ui-table table
{ table-layout:auto !important;
}
::ng-deep .ui-table-tablewrapper {
width: auto!important;
}
::ng-deep .ui-table-resizable {
padding-bottom: 1px;
/* overflow: auto; */
width: auto !important;
}
.ui-table .ui-table-tbody > tr, .ui-table .ui-table-thead > tr > th, .ui-table .ui-table-tfoot > tr > td{
max-width: 300px !important;
font-size: 12px;
padding: 0px !important;
padding-left: 4px !important;
color: black;
text-transform: capitalize;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis !important;
border-width: 1px;
}
For performance reasons, default table-layout is fixed meaning the cell widths do not depend on their content. If you require cells to scale based on their contents set autoLayout property to true.
<p-table [columns]="cols" [value]="cars" [scrollable]="true"
scrollHeight="200px" [autoLayout]="true">
</p-table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With