primeng turbotable column auto-sizing with scrolling

Question

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

Have you tried to use `autoLayout` property ? From the doc : *If you require cells to scale based on their contents set autoLayout property to true.* — Antikhippe, Apr 05 '18 at 12:34

score 6 · Answer 1 · answered Jul 25 '18 at 11:38

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

I tried this out, the body content fits well. but the table header cell and table body cell width doesn't match. — Ashish Patel, Oct 18 '19 at 09:24

score 4 · Answer 2 · answered Jun 20 '18 at 06:01

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>

score 2 · Answer 3 · answered Jan 04 '19 at 15:45

PrimeNG p-table does not support auto-fit with scrolling (see here)

I have managed to get scrolling, column reordering, column resizing AND mock-autofit to work together by hooking into p-table's state feature.

<p-table
    *ngIf="!loading"
    [columns]="selectedColumns"
    [value]="listRows"
    [(selection)]="selectedRows"
    [rows]="pageSize"
    [totalRecords]="rowCount"
    (sortFunction)="sort($event)"
    [customSort]="true"
    [responsive]="true"
    [scrollable]="true"
    scrollHeight="550px"
    [columnResizeMode]="'expand'"
    [reorderableColumns]="true"
    [resizableColumns]="true"
    stateStorage="local"
    [stateKey]="tableStateKey"
>

Then before my table is initialized the first time, I check whether the state exists or not. If it doesn't exist I calculate the longest text width across all my columns and rows and save this in the table state store using this function

@ViewChild("myCanvas") myCanvas: ElementRef;
.
.
.
getTextLength(text: string) {
const ctx = this.myCanvas.nativeElement.getContext("2d");
ctx.font =
'14px "Univers Next W01 Light", Helvetica, Arial, sans-serif';
return Math.round(ctx.measureText(text).width);
}

Here is the function that iterates over all the data

setInitialColumnWidths(columns: any[], rows: any[]) {
    // Attempt to guess initial column width if we don't have any stored yet
    let tableState = JSON.parse(localStorage.getItem(this.tableStateKey));
    if (!tableState) {
        tableState = {};
        // Add some width for the selection checkbox column
        const colWidths = [47];
        const colOrder = [];
        this.cols.forEach(col => {
            let maxStringLength = this.getTextLength(col.header);
            maxStringLength = maxStringLength < 100 ? 100 : maxStringLength;
            rows.forEach(row => {
                if (
                    col.field &&
                    row[col.field] &&
                    this.getTextLength(row[col.field]) > maxStringLength
                ) {
                    maxStringLength = this.getTextLength(row[col.field]);
                }
            });
            // Add some extra pixels for padding etc.
            colWidths.push(maxStringLength + 50);
            colOrder.push(col.field);
        });
        // The PrimeNG table component state requires the column order to be specified as well
        tableState["columnOrder"] = colOrder;
        tableState["columnWidths"] = colWidths.join(",");
        localStorage.setItem(
            this.tableStateKey,
            JSON.stringify(tableState)
        );
    }
}

This works better than I though it would. Obviously it doesn't cater for longer strings in the rest of the data in other pages, but it does at least set a minimum of 100px and once the user adjusts a column width, the new widths are stored in local storage.

score -1 · Answer 4 · answered Nov 05 '20 at 15:06

-1

Use colgroup as mentioned in https://www.primefaces.org/primeng/showcase/#/table/scroll

for table with horizontal and vertical scroll

answered Nov 05 '20 at 15:06

Vijay Mishra

39
2

primeng turbotable column auto-sizing with scrolling

4 Answers4