resize row length proper using PrimeNG Datatable?

Question

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

And I want to change Like These

Answer 1

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