primeng turbotable column auto-sizing with scrolling

Noa picture Noa · Apr 5, 2018 · Viewed 16.8k times · Source

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

Answer

Nitin Wahale picture Nitin Wahale · Jul 25, 2018

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;
}