auto fit with column toggle and scroll width is not working in turbotable

[noagr1]

I'm submitting a ... (check one with "x")

[X ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)

http://plnkr.co/edit/kyxWdwyG2heyRLnaiNA9?p=preview

Current behavior
though in the css it says auto fit to content i.e
table-layout: auto !important;
overflow:auto !important;
column of column toggle are in the same size and not fit to content

Expected behavior
column of column toggle are fit to content

Minimal reproduction of the problem with instructions
create a table with column toggle and width scroll, put in the css auto fit to content and see your columns in table are in the same size and cells are overflow.

http://plnkr.co/edit/kyxWdwyG2heyRLnaiNA9?p=preview

What is the motivation / use case for changing the behavior?
have a big nice table.

Please tell us about your environment:
NA

• Angular version: 5.

• PrimeNG version: 5.2

• Browser: all

• Language: all

• Node (for AoT issues): node --version =

[cagataycivici]

Scrollable tables do not support auto table layout, they must have fixed table-layout for the alignment of the headers and body.

[d101p]

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

I have worked around the limitation by hooking into p-table's state feature. On my p-table I set

<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.

[Dgs-asohail4]

I used your example but now my data is not rendering when i added stateStorage and tableKey props.. any idea?

[otkrivashkin]

Did anyone solve this issue?

[psarno]

Is there any way to set percentage column widths on a p-table when using [scrollable]="true"?

This setting changes the table to display: flex from display: table-cell which causes [autoLayout]="true" to be ignored.

I have attempted to do this via [ngStyle]="{'width': col.width}" on the th tags, where col.width is a percentage, but this is also ignored.

I need the scrollable tables with fixed headers, but I can't have it setting all of the widths equally.

[nisun88]

Add this to your .scss:

`.p-datatable-thead {
display: table-header-group !important;

tr {
display: table-row !important;

> th {
  display: table-cell !important;
}

}
}

.p-datatable-tbody {
display: table-row-group !important;

tr {
display: table-row !important;

> td {
  display: table-cell !important;
}

}
}`

Above css enables [scrolleable]="true" to work with [width]="col.width". My problem now is getting this to work with [resizableColumns]="true". They all worked together in version 12.0.1.