Можно ли изменить ширину столбца в сортируемой основной таблице? - PullRequest
Новая
       66

Можно ли изменить ширину столбца в сортируемой основной таблице?

0 голосов
/ 25 июня 2018

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

Фрагменты кода PFA ниже: HTML: 

 <th *ngFor="let col of columns" [pSortableColumn]="col.field"colspan="col.colspan" style="text-align: 
center;">
                {{col.header}}
                <p-sortIcon [field]="col.field"></p-sortIcon>
      </th>

И TS: 

this.cols = [
                { field: 'first', header:'FIRST'},
                { field: 'second', header: 'SECOND'},
                { field: 'third', header: 'THIRD'},
                { field: 'fourth', header: 'FOURTH'},
                { field: 'fifth', header: 'FIFTH'},
                { field: 'sixth', header: 'SIXTH'}
            ];

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

Ответы [ 3 ]

0 голосов
/ 26 июня 2018

обновлен файл TS как. Передайте требуемое значение ширины, аналогичное значению имени заголовка для динамических столбцов: 

this.cols = [
{field: 'first', header: 'FIRST', width: '20%'},
{field: 'second', header: 'SECOND', width: '30%'},
{field: 'third', header: 'SECOND', width: '50%'}]

Используйте атрибут ngStyle, чтобы связать значение ширины:

, например: 

<th *ngFor="let col of columns" [pSortableColumn]="col.field" colspan="col.colspan" 
       [ngStyle]="{'width': col.width}">
                {{col.header}}
       <p-sortIcon [field]="col.field"></p-sortIcon>
</th>
0 голосов
/ 03 мая 2019 
provide style like this 

[ngStyle]="{'width': '100%'}"

for eg
 <th *ngFor="let col of columns" [ngSwitch]="col.name">
        <div *ngIf="col.filterable">
          <div *ngIf="col.datatype == 'string'  || col.datatype == 'float'">
            <input pInputText *ngSwitchCase="col.name" type="text" [ngStyle]="{'width': '100%'}" (keyup.enter)="onFilter($event.target.value, col.dataIndex)" />
          </div>
        </div>
      </th>
0 голосов
/ 25 июня 2018

Вы можете сделать это, добавив width = "100%" в ваш тег <p-table>.И тогда вы можете определить ширину в процентах для каждого динамического столбца.

...