данные замороженного столбца и прокручиваемого столбца смещены в таблицу primeng - PullRequest
Новая
       60

данные замороженного столбца и прокручиваемого столбца смещены в таблицу primeng

1 голос
/ 14 января 2020

пытаюсь показать данные, используя p-таблицу primeng с замороженными столбцами. Если данные замороженного столбца не помещаются в одну строку, тогда данные замороженного столбца и прокручиваемого столбца смещаются (см. Ниже): -

enter image description here

Код: - 

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

Может кто-нибудь помочь мне решить эту проблему?

1 Ответ

0 голосов
/ 26 января 2020

Я думаю, что это поможет вам.

Переопределите ваши стили PrimeNG, как показано ниже. 

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

При начальной загрузке он покажет содержимое ячейки с многоточием. Затем при наведении курсора на ячейку появляется горизонтальная полоса прокрутки для просмотра всего содержимого при прокрутке.

StackBlitz Demo

...