How to remove expand button if no child exist ngx-datatable

I am using the following code for generating tree view in ngx-datatable:

HTML:

<ngx-datatable
[rows]="rows"
class="material"
[loadingIndicator]="false"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[columns]="columns"
[rowClass]="getRowClass"
[reorderable]="reorderable"
[treeFromRelation]="'manager'"
[treeToRelation]="'id'"
[rows]="rows"
(treeAction)="onTreeAction($event)"
>
<ngx-datatable-column name="name" [flexGrow]="3" [isTreeColumn]="true">
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>

<ngx-datatable-column name="gender" [flexGrow]="3">
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>


TS:

import { Component, VERSION } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
name = 'Angular ' + VERSION.major;

reorderable: boolean = true;
loadingIndicator: boolean = true;

rows = [
{
id: 1,
name: 'Austin',
gender: 'Male',
company: 'Swimlane',
},
{ id: 2, name: 'Dany', gender: 'Male', company: 'KFC' },
{
id: 3,
name: 'Molly',
gender: 'Female',
company: 'Burger King',
manager: 1,
class: 'child-row-file',
},
];
columns = [{ prop: 'name' }, { name: 'Gender' }, { name: 'Company' }];
onTreeAction(event: any) {
console.log('toggle');
const index = event.rowIndex;
const row = event.row;
if (row.treeStatus === 'collapsed') {
row.treeStatus = 'expanded';
} else {
row.treeStatus = 'collapsed';
}
this.rows = [...this.rows];
}
getRowClass(event) {
console.log(event);
if (event.class) {
if (event.class == 'child-row-file')
return {
'child-row-file': true,
};
}
}
}


Code is working fine and I am able to generate tree view. Running example

Problem: As, you can check second parent has no child but it still showing expand button. How I can remove this button if no child present.

Continue reading...