CODEWITHSUNDEEP
angulardatatableangular2-routingangular4-formsprimeng-datatable
Sachin from Pune
Sachin from Pune

Reputation: 736

resize row length proper using PrimeNG Datatable?

How can i solve this problem I want to resize row length proper using PrimeNG Datatable? Now My Data Display Like These [Now My Data Display Like These

And I want to change Like These And I want to change Like These

Upvotes: 0

Views: 2495

Answers (1)

MapLion
MapLion

Reputation: 1131

Without a more elaborate setup, I would recommend utilizing the resizableColumns, expandableRows and expandedRows options on the p-dataTable and set your widths as percentages as well as make your columns manually adjustable (https://www.primefaces.org/primeng/#/datatable); for example, something like:

<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>

For more detail, see this StackOverflow: How to expand row from datatable programmatically

Upvotes: 1

Related Questions