Styles don't work, delay on expand TreeGrid

kkseven07 commented 5 years ago

I've done everything according to the guide, but styles are not applied. Angular 7, @nebular/theme 3.4.2 Imported

NbThemeModule.forRoot(),
    NbLayoutModule,
    NbTreeGridModule,

angular.json

"styles": [
              "src/styles.css",
              "node_modules/@fontawesome/fortawesome-free/css/all.css",
              "./node_modules/@nebular/theme/styles/prebuilt/default.css"
            ],

Tree grid:

<nb-card>
  <nb-card-body>

    <label class="search-label" for="search">Search:</label>
    <input nbInput [nbFilterInput]="dataSource" id="search" class="search-input">

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

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

      <ng-container [nbTreeGridColumnDef]="customColumn">
        <th nbTreeGridHeaderCell [nbSortHeader]="getSortDirection(customColumn)" *nbTreeGridHeaderCellDef>
          {{customColumn}}
        </th>
        <td nbTreeGridCell *nbTreeGridCellDef="let row">
          {{row.data[customColumn]}}
        </td>
      </ng-container>

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

    </table>

  </nb-card-body>
</nb-card>

kkseven07 commented 5 years ago

Also, why there's delay on 0.1-0.3sec when I expand the node of the TreeGrid? The data is not that big(14 nodes, with 1-2 inside each)

yggg commented 5 years ago

Hi @kkseven07. It's a 200ms delay before expanding the row to handle double click which should expand it deeply. You can configure delay amount with doubleClickDelay input on nbTreeGridRow. Regarding styling. Theme setup looks fine. Do you have nb-theme-default class on body element? Make sure you use nb-layout in the app component.

modusV commented 5 years ago

Hi @yggg, I have the same problem, I have imported nb-layout and the theme setup looks fine (every other component in the application is working), but style does not apply to the TreeGrid. Any hint?

akveo / nebular

Styles don't work, delay on expand TreeGrid #1570