primeng data table columns width autofit based on contents

Question

I am using prime ng data table in my angular application, I want to adjust width based on the content without giving fixed width it should adjust automatically. Can anyone help me with this?

<p-table #dataGrid [columns]="columns" [value]="data" [paginator]="columns.length > 0 ? paginator : false"
  [rowsPerPageOptions]="rowsPerPageOptions" [totalRecords]="totalRecords" [first]="first"
  [reorderableColumns]="true" [resizableColumns]="true" [(rows)]="rows" [lazy]="lazy" [lazyLoadOnInit]="false"
  (onLazyLoad)="loadData($event)" [loading]="loading" selectionMode="single" (onRowSelect)="rowSelect($event)"
  (onColReorder)="saveStateToSession()" (onPage)="paginationEvent();" [sortOrder]="sortOrder" [ngClass]="{'disabledrow':disabledRow}"
  (onRowReorder)="updatePriority($event)">
<!---Some data---->
</p-table>

Answer 1

This will help you.

<p-table [resizableColumns]="true" [autoLayout]="true">

Answer 2

in case anyone is still struggling with this:

do use: [autoLayout]="true"

but remove: [resizeableColumns]="true" and [scrollable]="true"

the scrollable and resizable properties are not compatible with the autoLayout property, for technical reasons. per: AutoLayout not working in PrimeNG TurboTable

this will get you columns that are as wide as the content determines them to be.

Answer 3

The scrollable and resizable properties are not compatible with the autoLayout property, for technical reason.

 <p-table #dt [value]="records" [columns]="cols" responsiveLayout="scroll" dataKey="userid" styleClass="p-datatable-sm" [loading]=":loadingSpinner" [columns]="cols" [exportFilename]="exportName" [rows]="100" [(contextMenuSelection)]="selectedItem" scrollHeight="450px" [tableStyle]="{ width, 'max-content'}" [autoLayout]="true" columnResizeMode="expand" [contextMenu]="cm" (onEditComplete)="editGrid($event)" [rowsPerPageOptions]="[100, 200, 500]" >