search

primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.35k stars 4.58k forks source link

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

Closed waratah closed 2 years ago

waratah commented 2 years ago

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)"> <ng-template pTemplate="caption" let-columns>

{{table.totalRecords}}
{{filterValue}},

<ng-template pTemplate="colgroup" let-columns>

<ng-template pTemplate="header" let-columns>

{{col.header}} {{col?.header}} 
<tr *ngIf="!hideColumnFilter">
  <th *ngFor="let col of columns;trackBy:trackBy"
    style='min-width:70px'
    pReorderableColumn
    [ngSwitch]="col?.dataType"
    [ngClass]='{filtered: table.filters[col?.field]}'>
    <app-date-filter-dialog *ngSwitchCase="1"
      [field]='col.field'
      [table]='table'></app-date-filter-dialog>
    <app-table-number-filter *ngSwitchCase="2"
      [field]='col.field'
      [table]="table"></app-table-number-filter>
    <app-table-number-filter *ngSwitchCase="4"
      [field]='col.field'
      [table]="table"></app-table-number-filter>
    <app-table-number-filter *ngSwitchCase="22"
      [field]='col.field'
      [table]="table"></app-table-number-filter>
    <app-table-number-filter *ngSwitchCase="13"
      [field]='col.field'
      [table]="table"></app-table-number-filter>
    <app-date-filter-dialog *ngSwitchCase="5"
      [field]='col.field'
      [table]='table'></app-date-filter-dialog>
    <app-table-multi-filter *ngSwitchCase="7"
      [field]='col.field'
      [table]="table"
      [emptyName]='col.emptyValue'
      [multiShowOnly]='col.multiShowOnly'
      [tableData]="tableData"></app-table-multi-filter>
    <span *ngSwitchCase="8"></span>
    <span *ngSwitchCase="9"></span>
    <p-tableHeaderCheckbox *ngSwitchCase="10"></p-tableHeaderCheckbox>
    <p-multiSelect *ngSwitchCase="11"
      class="pMultiSelectColumn"
      [options]="trueFalseList"
      [style]="{'width':'100%'}"
      [resetFilterOnHide]="true"
      defaultLabel="{{'Invoicing.YesNo' | translate}}"
      [selectionLimit]="1"
      [ngModel]="$any(table.filters[col?.field])?.value"
      (onChange)="table.filter($event.value, col.field, 'contains')"
      appendTo="body"></p-multiSelect>
    <div *ngSwitchDefault
      class="flex-row no-wrap">
      <ng-container [ngSwitch]='$any(table.filters[col?.field])?.matchMode'>
        <label class="middle"
          *ngSwitchCase="'customEmpty'">Blank</label>
        <label class="middle"
          *ngSwitchCase="'customNotEmpty'">Non Blank</label>
      </ng-container>
      <input pInputText
        #inp
        class="middle"
        [ngClass]="{hidden: $any(table.filters[col?.field])?.matchMode?.substr(0,2) === 'cu'}"
        type="text"
        [ngModel]="$any(table.filters[col?.field])?.value"
        (input)="table.filter(inp.value.trim(), col?.field, 'contains')">
      <i class="end"
        (click)="filterD.toggle($event); filter(col, inp.value)"
        class="pi pi-filter"></i>
      <p-menu #filterD
        [popup]="true"
        [model]="filterMenu"
        appendTo="body"></p-menu>
    </div>
  </th>
</tr>

<ng-template pTemplate="body" let-rowData let-columns='columns' let-index="rowIndex"> <tr (dblclick)="viewDetail($any($event), rowData)" [pSelectableRow]="rowData" [ngClass]='highlightRow(rowData)'> <td ngFor="let col of columns;trackBy:trackBy" [ngClass]="{'more': col?.dataType === 9}" [ngSwitch]='col?.dataType'> <app-date ngSwitchCase='1' [date]='rowData[col.field]'> <span ngSwitchCase='5'> <span ngIf='col.format; else dt'> {{rowData[col.field] ? (rowData[col.field]|date:col.format) : '-'}} <ng-template #dt> <app-date-time [date]='rowData[col.field]'>

      </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 commented 2 years ago

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 commented 2 years ago

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

waratah commented 2 years ago

image

Image without expand

waratah commented 2 years ago

After adding columnResizeMode="expand" - still fine

image

waratah commented 2 years ago

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

image

Note the missing buttons on the right.

waratah commented 2 years ago

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:

image

waratah commented 2 years ago

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.

image

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

waratah commented 2 years ago

@yigitfindikli Please review additional information and reopen.

waratah commented 2 years ago

https://github.com/primefaces/primeng/issues/10919

waratah commented 2 years ago

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.

  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.