p-table width being hard coded onto the table after upgrade to V12

[waratah]

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)

<p-table #table
*ngIf='tableSettings && tableData && !(loading$| async)'
[value]="tableData"
[columns]='tableSettings.selectedColumns'
[frozenColumns]='tableSettings.frozenColumns'
[frozenWidth]='tableSettings.frozenWidth'
[(selection)]='selected'
[paginator]="paginator"
[rows]="50"
[resizableColumns]="true"
[scrollable]="true"
columnResizeMode="expand"
[reorderableColumns]="true"
[rowsPerPageOptions]="[10,20,50,100]"
[exportFilename]="filename"
[exportFunction]="exportFunction"
(onRowSelect)="onRowSelect($event)"
(onRowUnselect)="onRowUnselect($event)"
selectionMode="single"
[globalFilterFields]="tableSettings.globalFilter"
stateStorage="{{stateKey ? 'local' : 'session'}}"
[stateKey]="stateKey"
(onFilter)="onFilterTable($event)"
(onSort)="onSortTable($event)"
(onColReorder)="onColReorderTable($event)"
[dataKey]='dataKey'
(onColResize)="onColResizeTable($event)">

<button class="button-bar p-button-secondary mr-10"
*ngIf='showChevron'
type="button"
pButton
[icon]="chevron ? 'pi pi-arrow-back' : 'pi pi-arrow-forward'"
iconPos="left"
pTooltip='open side panel'
(click)="chevronToggle()">

    <p-multiSelect *ngIf='tableSettings && ! hideColumnSelect'
      dataKey='id'
      [defaultLabel]="'Common.SelectColumn' | translate"
      [displaySelectedLabel]="false"
      [options]="tableSettings.tableColumns"
      [(ngModel)]="tableSettings.selectedColumns"
      optionLabel="header"
      #mSelector
      (onChange)="onColumnSelectChange($event)"></p-multiSelect>
  </div>
  <div class="flex align-items-center justify-content-center mr-10">
    <label class='m-1'
      translate>Common.Records.Table</label> {{table.totalRecords}}
  </div>
  <div class="flex align-items-center justify-content-center mr-10">
    <label class='mr-10'
      *ngIf="filtersApplied?.length"
      translate>Common.FiltersApplied</label>
    <span *ngFor="let filter of filtersApplied; let i = index; let count=count">
      <label>{{filter.Column}}: </label>
      <span class="mr-10 fv">
        <span *ngFor="let filterValue of filter.Value; let x= index"
          (click)='filterDelete(filter, filterValue)'>{{filterValue}}<span
            *ngIf="(x+1) < filter.Value?.length">,</span> <i class="pi pi-times"></i></span></span>
    </span>
  </div>
  <div class="flex align-items-center">
    <ng-container [ngTemplateOutlet]="bar"></ng-container>
  </div>
  <div class="flex align-items-center">
    <div class='global-search'>
      <button *ngIf="filtersApplied?.length > 0"
        class="p-button-warning"
        type="button"
        pButton
        label="{{'Common.ClearState' | translate}}"
        (click)="resetState()"></button>
      <button class="p-button-secondary"
        *ngIf='entityName'
        type="button"
        pButton
        icon="pi pi-save"
        iconPos="left"
        label="CSV"
        (click)="export()"></button>
      <input type="text"
        class="table-search mr-10"
        pInputText
        size="20"
        [value]="$any(table?.filters['global'])?.value"
        placeholder="{{'Common.Search' | translate}}"
        (input)="table.filterGlobal($any($event.target).value, 'contains')"><i class="pi pi-search"></i>
    </div>
  </div>
</div>

{{col.header}} {{col?.header}}

Blank Non Blank

{{rowData[col.field] ? (rowData[col.field]|date:col.format) : '-'}}

      </ng-template>
    </span>

    <div class="report-number"
      *ngSwitchCase="2">{{isNumber(rowData[col.field]) ? (rowData[col.field] | number) : '-' }}</div>
    <div class="report-number"
      *ngSwitchCase="4">
      {{rowData[col.field]|numberMissing:'1.2-2'}}
    </div>
    <div class="report-number"
      *ngSwitchCase="22">
      {{rowData[col.field] | labourTime}}
    </div>
    <div class="report-number"
      *ngSwitchCase="13">
      {{rowData[col.field]|numberMissing:'1.1-1'}}
    </div>

    <div *ngSwitchCase='9'
      class="more"
      (click)="menu.toggle($event);moreButtonClick($event, rowData)">
      <p-menu #menu
        [popup]="true"
        [model]="moreMenu"
        appendTo="body"></p-menu>
      <i class="pi pi-bars"></i>
    </div>
    <div *ngSwitchCase='10'>
      <p-tableCheckbox *ngIf='!showCheck || showCheck(rowData) '
        [value]="rowData"></p-tableCheckbox>
    </div>

    <span *ngSwitchCase="11">{{ 'Common.' + rowData[col.field] | translate}}</span>
    <pre *ngSwitchCase="8">{{rowData[col.field]}}</pre>
    <div *ngSwitchCase="16">
      <span *ngFor="let item of rowData[col.field]">
        {{ item }}<br>
      </span>
    </div>
    <div *ngSwitchCase="17">
      <ng-container *ngTemplateOutlet="col.template; context: { row: rowData, col:col }">
      </ng-container>
    </div>
    <span *ngSwitchCase='18'>
      {{rowData[col.field] ? (rowData[col.field]|timeFromNow) : '-' }}
    </span>
    <div *ngSwitchCase='19'>
      <span *ngIf='col?.linkField && rowData[col?.linkField]; else noLink'>
        <a *ngIf='col.linkExternal; else linkInternal'
          [routerLink]="rowData[col?.linkField]"
          target="_blank"
          rel="noopener noreferrer"
          routerLinkActive="router-link-active">{{rowData[col?.field]}}</a>
        <ng-template #linkInternal>
          <a [routerLink]="rowData[col?.linkField]"
            routerLinkActive="router-link-active">{{rowData[col?.field]}}</a>
        </ng-template>
      </span>
      <ng-template #noLink>
        <span>{{rowData[col?.field]}}</span>
      </ng-template>
    </div>
    <span *ngSwitchCase="20"
      pTooltip="{{rowData[col.field]}}"
      tooltipPosition="bottom">
      <span *ngFor="let item of rowData[col.field]?.split(', ')">
        {{ item }}<br>
      </span>
    </span>
    <span *ngSwitchCase="21"
      pTooltip="{{rowData[col.field]?.join(', ')}}"
      tooltipPosition="bottom">
      {{rowData[col.field]?.join(', ')}}
    </span>
    <span pTooltip="{{rowData[col?.field]}}"
      tooltipPosition="bottom"
      *ngSwitchDefault>
      {{rowData[col?.field]}}
    </span>
  </td>
</tr>

{{emptyMessage}}

Current behavior

style="width: 3698px;" -- this has broken all my layouts.

Expected behavior

What is the motivation / use case for changing the behavior?

I use the width of the table and lock it to the area required and then use scrollable to scroll the content only.

If I edit the table in chrome removing the width style the table returns to the original layout.

Please tell us about your environment:
Windows, Chrome, angular 12 prime 12

• Angular version: 12.2.13

• PrimeNG version: 1212.2.2

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome

• Language: TypeScript 4.3.5

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

[waratah]

I removed columnResizeMode="expand" and the tables work OK again. It appears the width was added to the wrong spot on the table layout, it should be lower in the heirarchy

the caption and footer width should not be affected by this change.

[yigitfindikli]

Issue is not clear, please feel free to reopen with a stackblitz example or poject.

[waratah]

Image without expand

[waratah]

After adding columnResizeMode="expand" - still fine

[waratah]

After reloading again (simple F5) to reset the table again:

Note the missing buttons on the right.

[waratah]

HTML of the table is as follows:

<div ng-reflect-ng-class="[object Object]" id="pr_id_14" class="p-datatable p-component p-datatable-hoverable-rows p-datatable-resizable p-datatable-scrollable p-datatable-scrollable-vertical p-datatable-responsive-stack" style="width: 3822px;">

Note the style="width: 3822px;" which is related to columnResizeMode="expand" in table.ts

I go into chrome and remove that style width, the screen returns to normal:

[waratah]

This is the section that I believe the style is associated with the actual scrollable data. Quite simply put the width tag is in the wrong place on the table.

temporary solution is to remove the expand option which breaks short layouts.

[waratah]

@yigitfindikli Please review additional information and reopen.

[waratah]

#10919

[waratah]

While the modification above works correctly it may be a better solution to remove that line entirely. It is only in the recover on restore logic.