Как установить другой стиль и ширину столбца в таблице замороженных и незамерзших столбцов в основном

Question

В настоящее время я использую элемент управления таблицей PrimeNG с функцией замороженных столбцов.

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

Код:

<p-table [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="cars" [scrollable]="true" scrollHeight="300px" frozenWidth="250px">
  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col style="width:200px"> 
      <col style="width:50px">
      <col style="width:100px">
      <col style="width:100px"> 
      <col style="width:100px">
      <col style="width:100px">
    </colgroup>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{col.header}}
      </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>

Выход:

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

Можно ли добавить разные размеры для столбцов "заморожено" и "заморожено"?

Answer 1

Все, что вам нужно, это pTemplate="frozencolgroup"

<ng-template pTemplate="frozencolgroup" let-columns>
        <colgroup>
            <col style="width:200px">
            <col style="width:50px">
        </colgroup>
    </ng-template>
    <ng-template pTemplate="colgroup" let-columns>
        <colgroup>
            <col style="width:100px">
            <col style="width:100px">
            <col style="width:100px">
            <col style="width:100px">
        </colgroup>
    </ng-template>

Демо здесь

ОБНОВЛЕНИЕ: С таблицей прокрутки может быть разбита высота строки. Функция подсказки ниже, чтобы исправить это

makeRowsSameHeight() {
    setTimeout(() => {
      if ($('.ui-table-scrollable-wrapper').length) {
        let wrapper = $('.ui-table-scrollable-wrapper');
        wrapper.each(function () {
          let w = $(this);
          let frozen_rows: any = w.find('.ui-table-frozen-view tr');
          let unfrozen_rows = w.find('.ui-table-unfrozen-view tr');
          for (let i = 0; i < frozen_rows.length; i++) {
            if (frozen_rows.eq(i).height() > unfrozen_rows.eq(i).height()) {
              unfrozen_rows.eq(i).height(frozen_rows.eq(i).height());
            } else if (frozen_rows.eq(i).height() < unfrozen_rows.eq(i).height()) {
              frozen_rows.eq(i).height(unfrozen_rows.eq(i).height());
            }
          }
        });
      }
    });
  }

ОБНОВЛЕНИЕ ДЕМО: https://stackblitz.com/edit/angular-primeng-table-frozen-columns-dpsm8l