frozen column and scrollable column data is getting misaligned with primeng table

Question

am trying to show the data using p-table of primeng with frozen columns. If the Frozen column data does not fit in one line then the frozen column and scrollable column data is getting misaligned (show below):-

Code:-

 <p-table #dt dataKey="question" [columns]="scrollableColsForQuestionsStats" [frozenColumns]="frozenColsForQuestionStats"
               [paginator]="true" [rows]="3" [value]="questionStats" [scrollable]="true">
        <ng-template pTemplate="caption">
          <div class="ui-helper-clearfix" style="text-align: left">
            <button type="button" pButton icon="fa fa-file" iconPos="left" label="CSV" (click)="dt.exportCSV()" style="margin-right: 0.5em;"></button>
          </div>
        </ng-template>
        <ng-template pTemplate="colgroup" let-columns>
          <colgroup>
            <col *ngFor="let col of columns" style="width:300px" [pSortableColumn]="col.field">
          </colgroup>
        </ng-template>
        <ng-template pTemplate="header" let-columns>
          <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field">
              {{col.header}}
              <p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
            </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>

Can anyone please help me in fixing this problem?

This happened clearly because of the content of your first column is too long when it compares to the **frozen width** (frozenWidth ) of the table. You want to show whole content in the first column? or we can override style class to use ellipsis (some content ...). ```body .ui-table .ui-table-tbody > tr > td { background-color: inherit; border: 1px solid #c8c8c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }``` — Binara Thambugala, Jan 15 '20 at 06:51

score 0 · Answer 1 · answered Jan 26 '20 at 07:14

I think this will help you.

Override your PrimeNG styles as below.

body .ui-table .ui-table-tbody > tr > td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 50px;
}

body .ui-table .ui-table-tbody > tr>td:hover {
    overflow: auto;
    text-overflow: initial;
}

As initial load it will show the cell content with an ellipsis. Then hover on the cell appears a horizontal scrolling bar to view the whole content while scrolling.

StackBlitz Demo

frozen column and scrollable column data is getting misaligned with primeng table

1 Answers1