I want to change the row height of the PrimeNG tree table

418 views Asked by At

enter image description here

<p-treeTable [value]="files"   [columns]="cols" selectionMode="single" [metaKeySelection]="metaKeySelection" 
    [(selection)]="selectedNode" dataKey="name" [scrollable]="true"
    class="tableStyle ui-treetable-sm">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns">
                    {{ col.header }}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
            <tr [ttRow]="rowNode" [ttRow]="rowNode" >
                <td *ngFor="let col of columns; let i = index">
                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i === 0"></p-treeTableToggler>
                    {{ rowData[col.field] }}
                </td>
            </tr>
        </ng-template>
    </p-treeTable>

I want to resize the row height as small, but I can't do it. It is possible to increase the row height. The row height cannot be modified in the current code view, as shown in the image above

i want to change the row height

1

There are 1 answers

0
Aman Gojariya On BEST ANSWER

Using below code you can increase or decrease height of tree table row of PrimeNG.

<p-treeTable [value]="files" [columns]="cols">
  <ng-template pTemplate="body" let-rowData="rowData" let-columns="columns">
    <tr [ngStyle]="{height: '65px'}">
      <td *ngFor="let col of columns;">
        {{ rowData[col.field] }}
      </td>
    </tr>
  </ng-template>
</p-treeTable> 

OR else you can change height using css as well like below

.p-treetable .p-datatable-wrapper .p-datatable-tbody {
  height: <row-height>;
}