Столбец p-таблицы таблицы primeng и проблема перекрытия данных при изменении размера окна браузера

Question

Я использую p-таблицу primeng в своем приложении angular. При запуске приложения моя таблица выглядит следующим образом:

При изменении размера окна браузера (скажем, при уменьшении ширины окна) заголовки таблицы и данные перекрываются. См. Снимок экрана ниже :

Вы можете сослаться на код, указанный ниже, по ссылке stackblitz, чтобы воспроизвести проблему:

ссылка на код stackblitz

Я попробовал описанный ниже обходной путь, используя css:

.ui-table-scrollable-header{  min-width: 300px !important;}
 .ui-table-scrollable-body{ min-width: 300px !important;}
 th{  word-break: break-all;}

Что вы думаете об описанном выше обходном пути. Реализована ссылка с вышеупомянутым обходным решением:

Я пробовал это, обходное решение с использованием CSS

Answer 1

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

шаблон

<p-table [columns]="columnDefinitions" [value]="dataSet" [resizableColumns]="true" [responsive]="true">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pResizableColumn>
                {{col.name}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns" class="ui-resizable-column">
                              <span class="ui-column-title">{{col.name}}</span>

                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

Изменение размера столбца , реагирование

проверка в реальном времени демо ?

Обновление ?

мы можем установить размеры столбцов с изменяемым размером и установить тинитальное состояние столбца с этими опциями [resizableColumns]="true" columnResizeMode="expand", основная проблема заключается в изменении размера во время выполнения, поэтому мы установим начальное состояние размера столбцов с помощью функции состояния таблицы, как это

localStorage.setItem(
 'statedemo-local',
 '{"columnWidths":"250,200,400,250"}'
);

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

<p-table [columns]="columnDefinitions" [value]="dataSet" [resizableColumns]="true" columnResizeMode="expand" stateStorage="local" stateKey="statedemo-local">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pResizableColumn>
                {{col.name}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns" class="ui-resizable-column">
                              <span class="ui-column-title">{{col.name}}</span>

                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

demo ??

Answer 2

Что вы хотите, чтобы произошло при изменении размера? Вы можете установить размер шрифта с помощью vw (ширина области просмотра), чтобы шрифт увеличивался / уменьшался при изменении размера, или вы можете установить свойство переполнения, чтобы скрывать или прокручивать, или как вам удобнее, например, добавьте это к вашему css -file:

th, td{
    overflow: hidden;
}

Или вы можете использовать разрыв слова, если хотите разбить слово на любой символ для предотвращения переполнения.

td, th{
    word-break: break-all;
}

Для горизонтальной прокрутки добавьте:

th, td {
    overflow-x: auto;
}