how to make PrimeNG table columns auto fit?

Question

I want to make my PrimeNG table columns autofit and resizable. How can I achieve that?

Contrarily

What is the question in this? – Noaccount

Saw very first question during lifetime which is being answered at the same time of asking question – Noaccount

i have added this quetion and answer for others help – Contrarily

Answer 1

I have used following code. Changed in SCSS set table-layout:auto !important; .html

<p-dataTable [value]="Dataset"  [style]="{'width':'100%','overflow':'auto!important'}" 
      [responsive]="true"  [rows]="20" 
       [resizableColumns]="true" 
       columnResizeMode="expand" 
       [immutable]=false
       [paginator]="true" [rowsPerPageOptions]="[10,15,20,25]"
      appendTo="body" #dt>
      <p-column  styleClass="checkbox ui-resizable-column" [style]="{'width': 'auto'}" selectionMode="multiple">
      </p-column>  
      <p-column *ngFor="let col of cols;let j=index;" [style]="{'width':'auto','display':col.display} " [field]="col.field" [header]="col.header"
        [sortable]="true" [filter]="true" filterPlaceholder="Search" (mouseleave)="hoveredIndex=null" filterPlaceholder="Search"
        appendTo="body">
        <ng-template let-row="rowData" let-i="rowIndex" pTemplate="body">
          <div [pTooltip]="row[col.field]" [id]="col.field"></div>
             <!-- set String  -->
            <span (click)="test(dt)"  style="text-align:left;" *ngIf="col.datatype!='int' && col.datatype!='float'">
              {{row[col.field]}}
            </span>
             <!-- set int  -->
            <span  (click)="test(dt)"  style="text-align:top;float: top;padding-top: 4px !important;" *ngIf="col.datatype=='int' || col.datatype=='float' ">
              {{row[col.field]}}
            </span>
        </ng-template>
      </p-column>
    </p-dataTable> 

---

.scss

@import "src/app/Themes/colorVariables";  //datatable ui
    //Updated row
    ::ng-deep .ui-datatable tbody > tr.ng-star-inserted.ui-widget-updated-row{
        background-color:$updated-row-color;
    } 
    ::ng-deep .ui-datatable tbody > tr>td.ui-widget-deleted-row-checkbox  .ui-chkbox{
        display: none;
        }
    //Deleted row
    ::ng-deep .ui-datatable tbody > tr.ng-star-inserted.ui-widget-deleted-row{
        background-color:$deleted-row-color;
    } 

    ::ng-deep  .ui-datatable table
    {
        table-layout:auto !important;
        overflow-y: scroll !important; 
    }
    ::ng-deep .ui-datatable-tablewrapper {
        overflow-y: scroll !important; 
        width: auto !important;
    }
    ::ng-deep .ui-datatable-resizable {
        padding-bottom: 1px;
        /* overflow: auto; */
        width: auto !important;
    }

    ::ng-deep .ui-datatable-scrollable-view .ui-datatable-scrollable-body {
       // min-height: 300px;
        border: 1px solid #D5D5D5;
    }

    ::ng-deep .ui-datatable tbody > tr.ui-widget-content.ui-state-highlight{
        background-color: darkkhaki !important; 
    }
    ::ng-deep a.ui-state-highlight , .ui-state-highlight{
        background-color: rgb(64, 153, 83);
        color: black;
    }
    .hoverAction:hover{
        background-color: seagreen;
        color: black;
    }
    ::ng-deep .ui-confirmdialog-message {
        white-space: pre-line;
    }
    ::ng-deep  .ui-datatable tr.ui-datatable-even:hover
    {  background: #78BCFF;
    }
    ::ng-deep .ui-datatable tbody > tr.ui-widget-content.ui-datatable-odd:hover {
        background: #78BCFF;
    }

    .ui-datatable .ui-datatable-thead>tr>th, .ui-datatable .ui-datatable-tfoot>tr>td, .ui-datatable .ui-datatable-data>tr>td {
        border-color: inherit;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: .25em .5em;
        border-width: 1px;
        flex: 2;
        //width:auto !important;
        min-height: 8px;
        min-width: auto !important;
        max-width: 300px !important;
        font-size: 12px;
        padding: 0px !important;
        padding-left: 4px !important;
        color: black;
        text-transform: capitalize;
        white-space: nowrap;
        overflow: hidden;
         display: table-cell;
        text-overflow: ellipsis !important;
        word-wrap: break-word !important;
        /* font-size: 11px; */
        font-family: $default-font-family;
        border-width: 1px;
        border-style: solid;
    }

Contrarily

Thanks for sharing the idea, Nitin. – Dwight

thanku, this is what I was looking for but overflow: auto is not working – Wildee

Answer 2

You need to use 2 properties [resizableColumns]="true" [autoLayout]="true" as defined below inside the <p-table> tag

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

Why it happens? If you inspect it, primeng would by default add the following code from the primeng.min.css file

.ui-table table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

You need to change the table-layout property , for this you need to use the [autoLayout]="true". There is another way also in which you can override this by using :host but i would not recommend it as autoLayout is already available to use.

For resizing, you need to use [resizableColumns]="true" in tag

For scrolling, you need to use [scrollable]="true" scrollHeight="300px" in tag

Earmuff

Answer 3

In PrimeNG 13 to use a table with dynamic data and automatic column width I had to manually set width to "max-content": [tableStyle]="{width: 'max-content'}".

code example:

<p-table [columns]="columns"
         [value]="tableData"
         styleClass="p-datatable-gridlines"
         scrollHeight="42.857rem"
         scrollDirection="horizontal"
         responsiveLayout="scroll"
         [tableStyle]="{ width: 'max-content'}">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" class="p-1">
                {{col}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns" class="p-1">
                {{rowData[col]}}
            </td>
        </tr>
    </ng-template>
</p-table>

Synchro

Answer 4

Resolved: I also had the same Issue in Prime React DataTable. Please try the following in Prime React DataTable:

1. Remove the "scrollable" property in Prime React DataTable.
2. Modify columnResizeMode='fit' property in Prime React DataTable.

For me the above two steps solved the issue. The Table column will autofit based on the table content.

Kuehnel

Answer 5

Use follow inline css

table-layout: fixed;

Jamestown

use where, do you consider this an answer? – Jackquelin