Угловой PrimeNG ||Невозможно автоматически установить ширину столбца для таблицы по горизонтали и вертикали - PullRequest
0 голосов
/ 18 декабря 2018

Я создал p-таблицу с горизонтальной и вертикальной прокручиваемой таблицей, используя PrimeNG.Он содержит больше строк и столбцов.

Здесь я сталкиваюсь с проблемами, которые не позволяют автоматически настроить ширину столбца вместо жесткой настройки.

<ng-template pTemplate="colgroup" let-columns>
  <colgroup>
    <col *ngFor="let col of columns" style="width: 200px">
  </colgroup>
</ng-template>

Ниже приведен код.

<p-table [columns]="th" [value]="tbody" [rows]="100" [paginator]="true" 
[totalRecords]="resultCount" 
  [lazy]="true" (onLazyLoad)="pagination($event)"
[pageLinks]="3" [rowsPerPageOptions]="[100]" scrollable="true" scrollHeight="500px">
<ng-template pTemplate="colgroup" let-columns>
  <colgroup>
    <col *ngFor="let col of columns" style="width: 200px">
  </colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
  <tr>
    <th *ngFor="let col of columns">
      <div class="table-header">
          {{col.field}}
      </div>
    </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>

Здесь все столбцы являются динамическими и в большинстве случаев используют более 100 различных типов имен столбцов.Например, имена столбцов, такие как

. Кроме того, нам нужно обернуть столбцы, содержащие меньше текста, например: столбец идентификатора enter image description here

Мне нужно добиться этого с вертикальным и горизонтальнымпрокрутки.Можете ли вы помочь мне в этом?

Ценю вашу помощь !!!

1 Ответ

0 голосов
/ 18 декабря 2018

Это создаст столбцы таблицы с шириной 200px.

<colgroup>
    <col *ngFor="let col of columns" style="width: 200px">
</colgroup>

Это создаст столбцы таблицы с одинаково распределенной шириной.

<colgroup>
    <col *ngFor="let col of columns">
</colgroup>

Полный код доступен в stackblitz .

...