Error displaying NBTreeGrid components ERROR TypeError: Cannot read property 'elementRef' of undefined

### Issue type

**I'm submitting a ...** (check one with "x")

* [ x] bug report
* [ ] feature request

### Issue description
I am trying to use Tree Grid component alone in my web application.
But the table doesn't get displayed when the page gets loaded with below error.

core.js:4081 ERROR TypeError: Cannot read property 'elementRef' of undefined
at NbTreeGridComponent._applyNativeTableSections (table.js:1743)
at NbTreeGridComponent.ngOnInit (table.js:1250)
at callHook (core.js:2922)
at callHooks (core.js:2892)
at executeInitAndCheckHooks (core.js:2844)
at selectIndexInternal (core.js:6051)
at Module.ɵɵadvance (core.js:6024)
at TreetableComponent_Template (treetable.component.html:9)
at executeTemplate (core.js:7329)
at refreshView (core.js:7198)
defaultErrorLogger @ core.js:4081
handleError @ core.js:4129
(anonymous) @ core.js:28062
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:27065
tick @ core.js:28062
_loadComponent @ core.js:28088
bootstrap @ core.js:28029
(anonymous) @ core.js:27731
_moduleDoBootstrap @ core.js:27731
(anonymous) @ core.js:27701
invoke @ zone-evergreen.js:364
onInvoke @ core.js:27138
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:27126
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:27726
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:78
0 @ main.ts:12
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:44
webpackJsonpCallback @ bootstrap:31
(anonymous) @ main.js:1
core.js:26534 Angular is running in development mode. Call enableProdMode() to enable production mode.
core.js:4081 ERROR TypeError: Cannot read property 'classList' of null
at StickyStyler._addStickyStyle (table.js:826)
at StickyStyler.updateStickyFooterContainer (table.js:799)
at NbTreeGridComponent.updateStickyFooterRowStyles (table.js:1417)
at NbTreeGridComponent._forceRenderFooterRows (table.js:1621)
at NbTreeGridComponent.ngAfterContentChecked (table.js:1276)
at callHook (core.js:2926)
at callHooks (core.js:2892)
at executeInitAndCheckHooks (core.js:2844)
at refreshView (core.js:7239)
at refreshComponent (core.js:8335)

**Current behavior:**
When trying to load the tree grid component.

**Expected behavior:**

Just display the tree grid component in UI with sample data.

**Steps to reproduce:**

**Related code:**

```
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
//import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatSortModule} from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatIconModule } from '@angular/material/icon';

import { NbThemeModule, NbCardModule, NbIconModule, NbInputModule, NbTreeGridModule, NbSearchModule, NbMenuModule } from '@nebular/theme';
import { Ng2CompleterModule } from '@akveo/ng2-completer';
import { Ng2SmartTableModule } from 'ng2-smart-table';

//import { FsIconComponent } from './treetable/treetable.component';
import { TreetableComponent } from './treetable/treetable.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
//import { ThemeModule } from './@theme/theme.module';

@NgModule({
declarations: [
TreetableComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
NbThemeModule.forRoot(),
BrowserAnimationsModule,
MatSortModule,
MatTableModule,
MatFormFieldModule,
MatInputModule,
FlexLayoutModule,
MatIconModule,
NbCardModule,
NbTreeGridModule,
NbMenuModule,
NbSearchModule,
NbIconModule,
NbInputModule,
Ng2CompleterModule,
Ng2SmartTableModule,
NgbModule,
],
providers: [],
bootstrap: [TreetableComponent]
})
export class AppModule { }

treetable.component.html

Search:










{{customColumn}}



{{row.data[customColumn]}}




{{column}}

{{row.data[column] || '-'}}

treetable.component.ts

/*
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/

import { Component } from '@angular/core';
import { NbSortDirection, NbSortRequest, NbTreeGridDataSource, NbTreeGridDataSourceBuilder } from '@nebular/theme';

interface TreeNode {
data: T;
children?: TreeNode[];
expanded?: boolean;
}

interface FSEntry {
name: string;
size: string;
kind: string;
items?: number;
}

@Component({
selector: 'app-root',
templateUrl: './treetable.component.html',
styleUrls: ['./treetable.component.css'],
})
export class TreetableComponent {
customColumn = 'name';
defaultColumns = [ 'size', 'kind', 'items' ];
allColumns = [ this.customColumn, ...this.defaultColumns ];

dataSource2: NbTreeGridDataSource;

sortColumn: string;
sortDirection: NbSortDirection = NbSortDirection.NONE;

constructor(private dataSourceBuilder: NbTreeGridDataSourceBuilder) {
this.dataSource2 = this.dataSourceBuilder.create(this.data);
}

//@ViewChild(dataSource2, {static: true}) sort: nbSort;

ngOnInit() {
console.log("Hello");
}

updateSort(sortRequest: NbSortRequest): void {
this.sortColumn = sortRequest.column;
this.sortDirection = sortRequest.direction;
}

getSortDirection(column: string): NbSortDirection {
if (this.sortColumn === column) {
return this.sortDirection;
}
return NbSortDirection.NONE;
}

private data: TreeNode[] = [
{
data: { name: 'Projects', size: '1.8 MB', items: 5, kind: 'dir' },
children: [
{ data: { name: 'project-1.doc', kind: 'doc', size: '240 KB' } },
{ data: { name: 'project-2.doc', kind: 'doc', size: '290 KB' } },
{
data: { name: 'project-3', kind: 'dir', size: '466 KB', items: 3 },
children: [
{ data: { name: 'project-3A.doc', kind: 'doc', size: '200 KB' } },
{ data: { name: 'project-3B.doc', kind: 'doc', size: '266 KB' } },
{ data: { name: 'project-3C.doc', kind: 'doc', size: '0' } },
],
},
{ data: { name: 'project-4.docx', kind: 'docx', size: '900 KB' } },
],
},
{
data: { name: 'Reports', kind: 'dir', size: '400 KB', items: 2 },
children: [
{
data: { name: 'Report 1', kind: 'dir', size: '100 KB', items: 1 },
children: [
{ data: { name: 'report-1.doc', kind: 'doc', size: '100 KB' } },
],
},
{
data: { name: 'Report 2', kind: 'dir', size: '300 KB', items: 2 },
children: [
{ data: { name: 'report-2.doc', kind: 'doc', size: '290 KB' } },
{ data: { name: 'report-2-note.txt', kind: 'txt', size: '10 KB' } },
],
},
],
},
{
data: { name: 'Other', kind: 'dir', size: '109 MB', items: 2 },
children: [
{ data: { name: 'backup.bkp', kind: 'bkp', size: '107 MB' } },
{ data: { name: 'secret-note.txt', kind: 'txt', size: '2 MB' } },
],
},
];

getShowOn(index: number) {
const minWithForMultipleColumns = 400;
const nextColumnStep = 100;
return minWithForMultipleColumns + (nextColumnStep * index);
}
}

// @Component({
// selector: 'nbfsicon',
// template: `
//
//
//
//
//
// `,
// })
// export class FsIconComponent {
// @Input() kind: string;
// @Input() expanded: boolean;

// isDir(): boolean {
// return this.kind === 'dir';
// }
// }
```

### Other information:

**npm, node, OS, Browser**
```

Node: v12.16.2 npm: 6.14.4
OS: Windows 7
Browser: Chrome
```

**Angular, Nebular**
```

Angular : 10.0.2
Nebular : 5.1.0
```