Блог

Главная - Вопросы по программированию - Заголовок PrimeNG — Sticky не работает в p-таблице

Заголовок PrimeNG — Sticky не работает в p-таблице

#html #css #angular #primeng

Вопрос:

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

 [scrollable]="true"
scrollHeight="350px"

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

Другой метод, который я пробовал, — это использование css —

 :host ::ng-deep .ui-table-scrollable-header{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1000;
}

Но этот код никак не влияет на мой пользовательский интерфейс.

Может ли кто-нибудь помочь мне в этом? Ниже приведен мой код p-таблицы, и все мои столбцы имеют переменную длину.

 <p-table #dt [columns]="cols" [value]="data" [paginator]="true" dataKey="id" editMode="row" [rows]="25"
    [rowsPerPageOptions]="[10,25,50,75,100]" [autoLayout]='true' sortMode="multiple"
    selectionMode="multiple" [(selection)]="selected">

Комментарии:

1. не могли бы вы, пожалуйста, включить реализацию стекблитца?

Ответ №1:

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

Пример примера:

     <p-table [value]="customers" [scrollable]="true" [style]="{width:'600px'}" scrollHeight="200px">
        <ng-template pTemplate="colgroup" let-columns>
            <colgroup>
                <col style="width:250px">
                <col style="width:250px">
                <col style="width:250px">
                <col style="width:250px">
                <col style="width:250px">
                <col style="width:250px">
                <col style="width:250px">
                <col style="width:250px">
            </colgroup>
        </ng-template>
        <ng-template pTemplate="header">
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Country</th>
                <th>Date</th>
                <th>Company</th>
                <th>Status</th>
                <th>Activity</th>
                <th>Representative</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-customer>
            <tr>
                <td>{{customer.id}}</td>
                <td>{{customer.name}}</td>
                <td>{{customer.country.name}}</td>
                <td>{{customer.date}}</td>
                <td>{{customer.company}}</td>
                <td>{{customer.status}}</td>
                <td>{{customer.activity}}</td>
                <td>{{customer.representative.name}}</td>
            </tr>
        </ng-template>
    </p-table>

Комментарии:

1. Да, я проверил документацию primeng. И это тоже не помогает. Я постараюсь добавить пример stackbiltz.

Ответ №2:

Я также только что столкнулся с этой проблемой, после некоторого изучения ее причины я в конечном итоге открыл проблему, в которой я высказываю свое мнение о проблеме, возможно, в конечном итоге они внесут некоторые изменения в то, как работает прокрутка https://github.com/primefaces/primeng/issues/11099

Метки: