правильно изменить длину строки с помощью PrimeNG Datatable?

Как я могу решить эту проблему? Я хочу правильно изменить длину строки, используя PrimeNG Datatable? Теперь мои данные отображаются так [Теперь мои данные отображаются так

И я хочу изменить вот так И я хочу изменить вот так


angular datatable primeng-datatable angular2-routing angular4-forms
person Sachin from Pune    schedule 16.11.2017    source источник
comment
Не могли бы вы немного подробнее рассказать о том, что именно требуется? Вы хотите, чтобы он автоматически изменял размер или просто мог изменять размер столбцов? Я предполагаю автоматический, но если вы просто хотите, чтобы они изменялись по размеру, добавьте изменяемый размер в свой p-столбец <p-column field="foo" header="Foo" [изменяемый размер]=true></p-column>.   -  person MapLion    schedule 16.11.2017
comment
хорошо. я хочу, чтобы данные были длинными, тогда данные отображаются в новой строке, например, мое второе изображение @MapLion   -  person Sachin from Pune    schedule 16.11.2017
comment
Возможный дубликат Как расширить строку из datatable программно   -  person MapLion    schedule 16.11.2017

Ответы (1)


arrow_upward
1
arrow_downward

Без более сложной настройки я бы порекомендовал использовать параметры resizableColumns, expandableRows и ExpandedRows в p-dataTable и установить ширину в процентах, а также настроить столбцы вручную (https://www.primefaces.org/primeng/#/datatable); например, что-то вроде:

<p-dataTable [value]="cars" [resizableColumns]="true" [expandableRows]="true" [expandedRows]="expandedItems">
    <p-column field="vin" header="Vin" [resizable]="true" [style]="{'width':'20%'}"></p-column>
    <p-column field="year" header="Year" [resizable]="true" [style]="{'width':'30%'}"></p-column>
    <p-column field="brand" header="Brand" [resizable]="true" [style]="{'width':'15%'}"></p-column>
    <p-column field="color" header="Color" [resizable]="true" [style]="{'width':'35%'}"></p-column>
</p-dataTable>

Подробнее см. в этом StackOverflow: Как расширить строку из таблицы данных программно

person MapLion    schedule 16.11.2017
comment
Спасибо. но не работает, данные моего второго столбца слишком велики и отображаются в одной строке. - person Sachin from Pune; 16.11.2017
comment
‹p-column field=ProgramTag header=Program [изменяемый размер]=true [style]={'width':'20%'}›‹/p-column› ‹p-column field=Заголовок заголовка=Program Name [изменяемый размер] =true [style]={'width':'20%'}›‹/p-column› ‹p-column field=StartDate header=Start Date [изменяемый размер]=true [style]={'width':'20 %'}›‹/p-column› ‹p-column field=EndDate header=End Date [изменяемый размер]=true [style]={'width':'20%'}›‹/p-column› - person Sachin from Pune; 16.11.2017