CODEWITHSUNDEEP
angulartypescriptprimengprimeng-treetable
atish shimpi
atish shimpi

Reputation: 5023

PrimeNG TreeTable Level Styling

I have implemented TreeTable from PrimeNG.

Requirement is to add doted lines between levels for usability perspective.

enter image description here

I have tried multiple approaches but since it is generating HTML structure 

<table>
  <div>
    <td></td>
  </div>
<table>

I don't able figure out proper solution to implement it.

Is it possible to implement with PrimeNG TreeTable?

Upvotes: 2

Views: 2895

Answers (1)

Fabricio
Fabricio

Reputation: 944

I had similar question. Since I didn't dig anything up from Google, I managed my way to solve it somehow (pretty simple!). I know it's been a long time this question was asked, but like me, others might get here too. And although this is not a direct answer, it could help you figure out other ways to achieve your goal (by using styles).

The example below is a cut from my own code, using Angular 8 and PrimeNG 9.

It's a dynamic TreeTable to show only if there is data to show, and where I check both, header and data, for column adjusting and for the color styling that I'm applying with the getOrderStyle(). And getTable() is here used to return names for the header and fields (it's a cool thing).

Quoting The Mandalorian, this is the way:

<p-treeTable *ngIf="!isLoading && dataNode.length" [value]="dataNode" [columns]="getTable()">

  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [ngStyle]="checkHeader(col.header)">
         {{ col.header }}
      </th>
    </tr>
  </ng-template>

  <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
     <tr>
       <td *ngFor="let col of columns; let i = index" [ngClass]="getOrderStyle(rowData)" [ngStyle]="checkField(rowData[col.field])">
         <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
         {{ rowData[col.field] }}
       </td>
     </tr>
   </ng-template>

</p-treeTable>

That p-treeTableToggler line is to show/hide the nodes. Inside the getOrderStyle(array) method you just check the value of param array to decide which class to apply to each (whole) table row. 

  getOrderStyle(array) {
    const col = 'column-name'; // the name of a field column you got from your getTable()
    if (array[col] === 'B') {
      return 'order-buy';
    } else if (array[col] === 'S') {
      return 'order-sell';
    }
  }

Ok, ok. Here is an example for the getTable():

  getTable() {
    return [
      { field: 'code', header: '🆔' },
      { field: 'qtty', header: '🤏' },
      { field: 'price', header: '🏷️' },
      { field: 'total', header: '💰' },
      { field: 'time', header: '🕒' }
    ];
  }

And lets complete this sample with the CSS I used here:

.order-buy {
  color: darkgreen;
  background-color: rgba(200, 255, 200, .8) !important;
}

.order-sell {
  color: darkred;
  background-color: rgba(255, 200, 200, .8) !important;
}

Of course, I'm only using !important because it didn't work without it for the background-color. Some of the styling for PrimeNG tags you need to force your way in.

Good luck (next ones who find this)! 👍

Upvotes: 3

Related Questions