3

how can you change the width of the columns of an Nebular NbTreeGridComponent? In the docs, they mention equalColumnsWidth, which default value is 'false'. However, my columns remain equal width, no matter what I do..

here's my code html:

<table [nbTreeGrid]="source" style="font-family: exo; font-size: 12px;">
    <tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
        <tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns"></tr>

        <ng-container [nbTreeGridColumnDef]="customColumn">
          <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>{{customColumn}}</th>
          <td nbTreeGridCell *nbTreeGridCellDef="let row">

            <nb-tree-grid-row-toggle
              [expanded]="row.expanded"
              *ngIf="row.data.kind === 'dir'">
            </nb-tree-grid-row-toggle>

            {{row.data[customColumn]}}

          </td>
        </ng-container>

        <ng-container *ngFor="let column of defaultColumns" [nbTreeGridColumnDef]="column">
          <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>{{column}}</th>
          <td nbTreeGridCell *nbTreeGridCellDef="let row">{{row.data[column] || '-'}}</td>
        </ng-container>
      </table>

code ts:

        customColumn = 'Organisme';
  defaultColumns = [ 'Score', 'Symbool'];
  allColumns = [ this.customColumn, ...this.defaultColumns ];
  source: NbTreeGridDataSource<FSEntry>;
  spinner_active = true;

  public _data: FSEntry[] = [];    
  lijst_maldi : maldi[] = [];

  constructor(public _monitorservice: MonitorService, public http: HttpClient, dataSourceBuilder: NbTreeGridDataSourceBuilder<FSEntry>) {    
    _monitorservice.current_isolid_active.subscribe(x => {
      if (x.orderid != 0){
        this.http.get<maldi[]>("https://test.be/getmaldi?specimenid=" +  x.specimenid + "&seq=" + x.sequentie ).subscribe(data =>
        { 
          this._data = [];
          this.lijst_maldi = data;
          for (let x of data){
            this._data.push({Symbool: x.symbool, Organisme: x.organisme, Score: x.score.substring(0,4) });
            }

            const getters: NbGetters<FSEntry, FSEntry> = {
              dataGetter: (node: FSEntry) => node,
              childrenGetter: (node: FSEntry) => node.childEntries || undefined,
              expandedGetter: (node: FSEntry) => !!node.expanded,
            };
            this.source = dataSourceBuilder.create(this._data, getters);

        });
      }
WIMA
  • 53
  • 5

2 Answers2

0

this won't affect all use cases , but if you want to change width of a number of columns with the same width , you can use style="width: 200px" in the table header (<th>) for the custom columns as the example below

<table [nbTreeGrid]="source" style="font-family: exo; font-size: 12px;">
<tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
    <tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns"></tr>

    <ng-container [nbTreeGridColumnDef]="customColumn">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef style="width: 200px">{{customColumn}}</th>
      <td nbTreeGridCell *nbTreeGridCellDef="let row">

        <nb-tree-grid-row-toggle
          [expanded]="row.expanded"
          *ngIf="row.data.kind === 'dir'">
        </nb-tree-grid-row-toggle>

        {{row.data[customColumn]}}

      </td>
    </ng-container>

    <ng-container *ngFor="let column of defaultColumns" [nbTreeGridColumnDef]="column">
      <th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef>{{column}}</th>
      <td nbTreeGridCell *nbTreeGridCellDef="let row">{{row.data[column] || '-'}}</td>
    </ng-container>
  </table>

don't forget to add your the columns which need width changed in customColumn property in .ts file

Meher Hendi
  • 66
  • 1
  • 4
0

try to set the table-layout CSS property to auto:

<table [nbTreeGrid]="source" style="table-layout: auto;">
ItsGeorge
  • 2,060
  • 3
  • 17
  • 33
Tom Zhao
  • 1
  • 1