feat: add new TreeGrid component (#1226)

Closes #1143

docs/structure.ts

@@ -482,6 +482,29 @@ export const structure = [
           'NbCalendarKitModule',
         ],
       },
+      {
+        type: 'group',
+        name: 'Data Table',
+      },
+      {
+        type: 'tabs',
+        name: 'Tree Grid',
+        icon: 'tree-grid.svg',
+        source: [
+          'NbTreeGridComponent',
+          'NbTreeGridNode',
+          'NbTreeGridPresentationNode',
+          'NbTreeGridSortService',
+          'NbTreeGridFilterService',
+          'NbTreeGridColumnDefDirective',
+          'NbTreeGridRowDefDirective',
+          'NbTreeGridRowComponent',
+          'NbSortDirective',
+          'NbSortHeaderComponent',
+          'NbFilterInputDirective',
+          'NbTreeGridRowToggleDirective',
+        ],
+      },
     ],
   },
   {

scripts/gulp/tasks/bundle/rollup-config.ts

@@ -22,6 +22,8 @@ const ROLLUP_GLOBALS = {
   '@angular/cdk/portal': 'ng.cdk.portal',
   '@angular/cdk/a11y': 'ng.cdk.a11y',
   '@angular/cdk/scrolling': 'ng.cdk.scrolling',
+  '@angular/cdk/table': 'ng.cdk.table',
+  '@angular/cdk/bidi': 'ng.cdk.bidi',
 
 
   // RxJS dependencies

src/app/playground-components.ts

@@ -1256,6 +1256,53 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
       },
     ],
   },
+  {
+    path: 'tree-grid',
+    children: [
+      {
+        path: 'tree-grid-showcase.component',
+        link: '/tree-grid/tree-grid-showcase.component',
+        component: 'TreeGridShowcaseComponent',
+        name: 'Tree Grid Showcase',
+      },
+      {
+        path: 'tree-grid-sortable.component',
+        link: '/tree-grid/tree-grid-sortable.component',
+        component: 'TreeGridSortableComponent',
+        name: 'Tree Grid Sortable',
+      },
+      {
+        path: 'tree-grid-filterable.component',
+        link: '/tree-grid/tree-grid-filterable.component',
+        component: 'TreeGridFilterableComponent',
+        name: 'Tree Grid Filterable',
+      },
+      {
+        path: 'tree-grid-basic.component',
+        link: '/tree-grid/tree-grid-basic.component',
+        component: 'TreeGridBasicComponent',
+        name: 'Tree Grid Basic',
+      },
+      {
+        path: 'tree-grid-responsive.component',
+        link: '/tree-grid/tree-grid-responsive.component',
+        component: 'TreeGridResponsiveComponent',
+        name: 'Tree Grid Responsive',
+      },
+      {
+        path: 'tree-grid-custom-icons.component',
+        link: '/tree-grid/tree-grid-custom-icons.component',
+        component: 'TreeGridCustomIconsComponent',
+        name: 'Tree Grid Custom Icons',
+      },
+      {
+        path: 'tree-grid-disable-click-toggle.component',
+        link: '/tree-grid/tree-grid-disable-click-toggle.component',
+        component: 'TreeGridDisableClickToggleComponent',
+        name: 'Tree Grid Disable Click Toggle',
+      },
+    ],
+  },
   {
     path: 'bootstrap',
     children: [

src/framework/theme/components/cdk/bidi/bidi.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { BidiModule, Directionality } from '@angular/cdk/bidi';
+import { NbDirectionality } from './bidi';
+
+@NgModule({
+  providers: [
+    { provide: NbDirectionality, useExisting: Directionality },
+  ],
+})
+export class NbBidiModule extends BidiModule {}

src/framework/theme/components/cdk/bidi/bidi.ts

@@ -0,0 +1,5 @@
+import { Injectable } from '@angular/core';
+import { Directionality } from '@angular/cdk/bidi';
+
+@Injectable()
+export class NbDirectionality extends Directionality {}

src/framework/theme/components/cdk/bidi/index.ts

@@ -0,0 +1,2 @@
+export * from './bidi';
+export * from './bidi.module';

src/framework/theme/components/cdk/collections/collection-viewer.ts

@@ -0,0 +1,6 @@
+import { CollectionViewer, ListRange } from '@angular/cdk/collections';
+import { Observable } from 'rxjs';
+
+export interface NbCollectionViewer extends CollectionViewer {
+  viewChange: Observable<ListRange>;
+}

src/framework/theme/components/cdk/collections/index.ts

@@ -0,0 +1 @@
+export * from './collection-viewer';

src/framework/theme/components/cdk/platform/index.ts

@@ -0,0 +1,2 @@
+export * from './platform.module';
+export * from './platform';

src/framework/theme/components/cdk/platform/platform.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Platform, PlatformModule } from '@angular/cdk/platform';
+import { NbPlatform } from './platform';
+
+@NgModule({
+  providers: [
+    { provide: NbPlatform, useExisting: Platform },
+  ],
+})
+export class NbPlatformModule extends PlatformModule {}

src/framework/theme/components/cdk/platform/platform.ts

@@ -0,0 +1,3 @@
+import { Platform } from '@angular/cdk/platform';
+
+export class NbPlatform extends Platform {}

src/framework/theme/components/cdk/table/cell.ts

@@ -0,0 +1,121 @@
+/*
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license infornbion.
+ */
+
+import { Directive, ElementRef, InjectionToken, Input } from '@angular/core';
+import {
+  CdkCell,
+  CdkCellDef,
+  CdkColumnDef,
+  CdkFooterCell,
+  CdkFooterCellDef,
+  CdkHeaderCell,
+  CdkHeaderCellDef,
+} from '@angular/cdk/table';
+
+/**
+ * Cell definition for the nb-table.
+ * Captures the template of a column's data row cell as well as cell-specific properties.
+ */
+@Directive({
+  selector: '[nbCellDef]',
+  providers: [{ provide: CdkCellDef, useExisting: NbCellDefDirective }],
+})
+export class NbCellDefDirective extends CdkCellDef {
+}
+
+/**
+ * Header cell definition for the nb-table.
+ * Captures the template of a column's header cell and as well as cell-specific properties.
+ */
+@Directive({
+  selector: '[nbHeaderCellDef]',
+  providers: [{ provide: CdkHeaderCellDef, useExisting: NbHeaderCellDefDirective }],
+})
+export class NbHeaderCellDefDirective extends CdkHeaderCellDef {
+}
+
+/**
+ * Footer cell definition for the nb-table.
+ * Captures the template of a column's footer cell and as well as cell-specific properties.
+ */
+@Directive({
+  selector: '[nbFooterCellDef]',
+  providers: [{ provide: CdkFooterCellDef, useExisting: NbFooterCellDefDirective }],
+})
+export class NbFooterCellDefDirective extends CdkFooterCellDef {
+}
+
+export const NB_SORT_HEADER_COLUMN_DEF = new InjectionToken('NB_SORT_HEADER_COLUMN_DEF');
+
+/**
+ * Column definition for the nb-table.
+ * Defines a set of cells available for a table column.
+ */
+@Directive({
+  selector: '[nbColumnDef]',
+  providers: [
+    { provide: CdkColumnDef, useExisting: NbColumnDefDirective },
+    { provide: NB_SORT_HEADER_COLUMN_DEF, useExisting: NbColumnDefDirective },
+  ],
+})
+export class NbColumnDefDirective extends CdkColumnDef {
+  /** Unique name for this column. */
+  @Input('nbColumnDef') name: string;
+
+  /** Whether this column should be sticky positioned at the start of the row */
+  @Input() sticky: boolean;
+
+  /** Whether this column should be sticky positioned on the end of the row */
+  @Input() stickyEnd: boolean;
+}
+
+/** Header cell template container that adds the right classes and role. */
+@Directive({
+  selector: 'nb-header-cell, th[nbHeaderCell]',
+  host: {
+    'class': 'nb-header-cell',
+    'role': 'columnheader',
+  },
+})
+export class NbHeaderCellDirective extends CdkHeaderCell {
+  constructor(columnDef: NbColumnDefDirective,
+              elementRef: ElementRef<HTMLElement>) {
+    super(columnDef, elementRef);
+    elementRef.nativeElement.classList.add(`nb-column-${columnDef.cssClassFriendlyName}`);
+  }
+}
+
+/** Footer cell template container that adds the right classes and role. */
+@Directive({
+  selector: 'nb-footer-cell, td[nbFooterCell]',
+  host: {
+    'class': 'nb-footer-cell',
+    'role': 'gridcell',
+  },
+})
+export class NbFooterCellDirective extends CdkFooterCell {
+  constructor(columnDef: NbColumnDefDirective,
+              elementRef: ElementRef) {
+    super(columnDef, elementRef);
+    elementRef.nativeElement.classList.add(`nb-column-${columnDef.cssClassFriendlyName}`);
+  }
+}
+
+/** Cell template container that adds the right classes and role. */
+@Directive({
+  selector: 'nb-cell, td[nbCell]',
+  host: {
+    'class': 'nb-cell',
+    'role': 'gridcell',
+  },
+})
+export class NbCellDirective extends CdkCell {
+  constructor(columnDef: NbColumnDefDirective,
+              elementRef: ElementRef<HTMLElement>) {
+    super(columnDef, elementRef);
+    elementRef.nativeElement.classList.add(`nb-column-${columnDef.cssClassFriendlyName}`);
+  }
+}

src/framework/theme/components/cdk/table/data-source.ts

@@ -0,0 +1,3 @@
+import { DataSource } from '@angular/cdk/table';
+
+export abstract class NbDataSource<T> extends DataSource<T> {}

src/framework/theme/components/cdk/table/index.ts

@@ -0,0 +1,5 @@
+export * from './table.module';
+export * from './cell';
+export * from './row';
+export * from './data-source';
+export * from './type-mappings';