Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

primeng turbotable column auto-sizing with scrolling

I am using turbo table and want the following:

  • Have all columns auto-size based on content.
  • Have the table itself fill the screen horizontally eg not manually specify the width
  • Have the table horizontally scroll when the auto-sized columns require more space than the table width can provide and without having to specify any column widths manually and also when adding new columns with columns toggle.

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

like image 535
Noa Avatar asked Dec 18 '22 00:12

Noa


2 Answers

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;
}
like image 126
Nitin Wahale Avatar answered Dec 28 '22 09:12

Nitin Wahale


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>
like image 38
Abhijit Muke Avatar answered Dec 28 '22 11:12

Abhijit Muke