How to add custom columns in Nebular TreeGrid?

Question

In Nebular Tree Grid, how to add custom columns that aren't really linked to data? eg: add, edit, delete columns. I've just assigned them to properties of my class (ref, city, address), but what if the class definition didn't have "spare" properties? How to add extra columns?

In treegrid.component.ts:

nameColumn = 'name';
editColumn = 'ref';
addColumn = 'city';
deleteColumn = 'address';
defaultColumns = [ 'description' ];
allColumns = [ this.nameColumn, ...this.defaultColumns, this.editColumn, this.addColumn, this.deleteColumn ];
headers = ['Name', 'Description', 'Edit', 'Add', 'Delete'];

In treegrid.component.html:

<table [nbTreeGrid]="datasource" [nbSort]="datasource" (sort)="updateSort($event)">

      <tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
      <tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns"></tr>

      <ng-container [nbTreeGridColumnDef]="nameColumn">
        <th nbTreeGridHeaderCell [nbSortHeader]="getSortDirection(nameColumn)" *nbTreeGridHeaderCellDef>
          {{headers[0]}}
        </th>
        <td nbTreeGridCell *nbTreeGridCellDef="let row">
          <mybe-fs-icon [children]="row.children" [expanded]="row.expanded"></mybe-fs-icon>
          {{row.data[nameColumn]}}
        </td>
      </ng-container>

      <ng-container *ngFor="let column of defaultColumns; let index = index"
                    [nbTreeGridColumnDef]="column"
                    [showOn]="getShowOn(index)">
        <th nbTreeGridHeaderCell [nbSortHeader]="getSortDirection(column)" *nbTreeGridHeaderCellDef>
          {{headers[index+1]}}
        </th>
        <td nbTreeGridCell *nbTreeGridCellDef="let row">{{row.data[column] || '-'}}</td>
      </ng-container>

      <ng-container [nbTreeGridColumnDef]="editColumn">
        <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
          {{headers[headers.length - 3]}}
        </th>
        <td nbTreeGridCell *nbTreeGridCellDef="let row">
          <nb-icon icon="edit-2-outline" (click)="editOrg(row.data)"></nb-icon>
        </td>
      </ng-container>

      <ng-container [nbTreeGridColumnDef]="addColumn">
        <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
          {{headers[headers.length - 2]}}
        </th>
        <td nbTreeGridCell *nbTreeGridCellDef="let row">
          <nb-icon icon="plus-circle-outline" (click)="addOrg(row.data)"></nb-icon>
        </td>
      </ng-container>

      <ng-container [nbTreeGridColumnDef]="deleteColumn">
        <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
          {{headers[headers.length - 1]}}
        </th>
        <td nbTreeGridCell *nbTreeGridCellDef="let row">
          <nb-icon icon="minus-circle-outline" (click)="confirmDeleteOrg(row.data)"></nb-icon>
        </td>
      </ng-container>

    </table>

OSA413 · Answer 1 · 2022-03-31T13:48:33.507

Add a name of your new column (it doesn't have to be shown in the column header), for example actions. The name has to be placed in the allColumns array that is used in the table template for *nbTreeGridHeaderRowDef and *nbTreeGridRowDef.

allColumns = [ this.nameColumn, ...this.defaultColumns, "actions"];

Add the new column in the table template, place the name of your column into nbTreeGridColumnDef of the column container:

<table [nbTreeGrid]="datasource" [nbSort]="datasource" (sort)="updateSort($event)">

  <!-- ... -->

  <ng-container [nbTreeGridColumnDef]="'actions'">

    <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>
      <!-- Here you can place the title of your column if you want -->
    </th>

    <td nbTreeGridCell *nbTreeGridCellDef="let row">
      <!-- Here you can place any element you want, you still can access data using row.data and corresponding column name, for example a button -->
      <button (click)="console.log(row.data)">Edit</button>
    </td>

  </ng-container>

  <!-- ... -->

</table>

How to add custom columns in Nebular TreeGrid?

1 Answers1