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';