CODEWITHSUNDEEP
htmlcssangularprimeng
Adabala Rama Krishna
Adabala Rama Krishna

Reputation: 46

primeng data table columns width autofit based on contents

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? in this image I want to reduce width of the mobile number column to fit the content without spaces

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

Upvotes: 1

Views: 4468

Answers (3)

ramaeon2
ramaeon2

Reputation: 51

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

Upvotes: 0

dhoffens
dhoffens

Reputation: 167

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.

Upvotes: 2

Binara Thambugala
Binara Thambugala

Reputation: 776

This will help you.

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

Upvotes: 1

Related Questions