UNPKG

7.19 kBTypeScriptView Raw
1import { AfterViewInit, ChangeDetectorRef, ElementRef, IterableDiffers, OnDestroy } from '@angular/core';
2import { NbPlatform } from '../cdk/platform/platform-service';
3import { NbDirectionality } from '../cdk/bidi/bidi-service';
4import { NbTable } from '../cdk/table/table.module';
5import { NbViewportRulerAdapter } from '../cdk/adapter/viewport-ruler-adapter';
6import { NbTreeGridDataSource, NbTreeGridDataSourceBuilder } from './data-source/tree-grid-data-source';
7import { NbTreeGridPresentationNode } from './data-source/tree-grid.model';
8import { NbToggleOptions } from './data-source/tree-grid.service';
9import { NbTreeGridRowComponent } from './tree-grid-row.component';
10import { NbTreeGridCellDirective } from './tree-grid-cell.component';
11import { NbBooleanInput } from '../helpers';
12import * as i0 from "@angular/core";
13/**
14 * Tree grid component that can be used to display nested rows of data.
15 * Supports filtering and sorting.
16 * @stacked-example(Showcase, tree-grid/tree-grid-showcase.component)
17 *
18 * ### Installation
19 *
20 * Import `NbTreeGridModule` to your feature module.
21 * ```ts
22 * @NgModule({
23 * imports: [
24 * // ...
25 * NbTreeGridModule,
26 * ],
27 * })
28 * export class PageModule { }
29 * ```
30 *
31 * ### Usage
32 *
33 * As the most basic usage you need to define [nbTreeGridRowDef](docs/components/treegrid/api#nbtreegridrowdefdirective)
34 * where you should pass columns to display in rows and
35 * [nbTreeGridColumnDef](docs/components/treegrid/api#nbtreegridcolumndefdirective) - component containing cell
36 * definitions for each column passed to row definition.
37 * @stacked-example(Basic, tree-grid/tree-grid-basic.component)
38 *
39 * `NbTreeGridComponent`'s source input and `NbTreeGridDataSourceBuilder.create` expecting data to be an array of
40 * objects with `data`, `children` and `expanded` properties. If your data doesn't match this interface, you can pass
41 * getter functions for each property as arguments to `NbTreeGridDataSourceBuilder.create` method.
42 * @stacked-example(Custom node structure, tree-grid/tree-grid-custom-node-structure.component)
43 *
44 * To use sorting you can add `nbSort` directive to table and subscribe to `sort` method. When user click on header,
45 * sort event will be emitted. Event object contain clicked column name and desired sort direction.
46 * @stacked-example(Sortable, tree-grid/tree-grid-sortable.component)
47 *
48 * You can use `Data Source Builder` to create `NbTreeGridDataSource` which would have toggle, sort and
49 * filter methods. Then you can call this methods to change sort or toggle rows programmatically. Also `nbSort` and
50 * `nbFilterInput` directives both support `NbTreeGridDataSource`, so you can pass it directly as an input and
51 * directives will trigger sort, toggle themselves.
52 * @stacked-example(Data Source Builder, tree-grid/tree-grid-showcase.component)
53 *
54 * You can create responsive grid by setting `hideOn` and `showOn` inputs of
55 * [nbTreeGridColumnDef](docs/components/tree-grid/api#nbtreegridcolumndefdirective) directive.
56 * When viewport reaches specified width grid hides or shows columns.
57 * @stacked-example(Responsive columns, tree-grid/tree-grid-responsive.component)
58 *
59 * To customize sort or row toggle icons you can use `nbSortHeaderIcon` and `nbTreeGridRowToggle` directives
60 * respectively. `nbSortHeaderIcon` is a structural directive and it's implicit context set to current direction.
61 * Also context has three properties: `isAscending`, `isDescending` and `isNone`.
62 * @stacked-example(Custom icons, tree-grid/tree-grid-custom-icons.component)
63 *
64 * By default, row to toggle happens when user clicks anywhere in the row. Also double click expands row deeply.
65 * To disable this you can set `[clickToToggle]="false"` input of `nbTreeGridRow`.
66 * @stacked-example(Disable click toggle, tree-grid/tree-grid-disable-click-toggle.component)
67 *
68 * @styles
69 *
70 * tree-grid-cell-border-width:
71 * tree-grid-cell-border-style:
72 * tree-grid-cell-border-color:
73 * tree-grid-row-min-height:
74 * tree-grid-cell-padding:
75 * tree-grid-header-background-color:
76 * tree-grid-header-text-color:
77 * tree-grid-header-text-font-family:
78 * tree-grid-header-text-font-size:
79 * tree-grid-header-text-font-weight:
80 * tree-grid-header-text-line-height:
81 * tree-grid-footer-background-color:
82 * tree-grid-footer-text-color:
83 * tree-grid-footer-text-font-family:
84 * tree-grid-footer-text-font-size:
85 * tree-grid-footer-text-font-weight:
86 * tree-grid-footer-text-line-height:
87 * tree-grid-row-background-color:
88 * tree-grid-row-even-background-color:
89 * tree-grid-row-hover-background-color:
90 * tree-grid-row-text-color:
91 * tree-grid-row-text-font-family:
92 * tree-grid-row-text-font-size:
93 * tree-grid-row-text-font-weight:
94 * tree-grid-row-text-line-height:
95 * tree-grid-sort-header-button-background-color:
96 * tree-grid-sort-header-button-border:
97 * tree-grid-sort-header-button-padding:
98 */
99export declare class NbTreeGridComponent<T> extends NbTable<NbTreeGridPresentationNode<T>> implements AfterViewInit, OnDestroy {
100 private dataSourceBuilder;
101 private window;
102 protected readonly _viewRepeater: any;
103 protected readonly _coalescedStyleScheduler: any;
104 protected readonly _stickyPositioningListener: any;
105 constructor(dataSourceBuilder: NbTreeGridDataSourceBuilder<T>, differs: IterableDiffers, changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, role: string, dir: NbDirectionality, document: any, platform: NbPlatform, window: any, _viewRepeater: any, _coalescedStyleScheduler: any, _viewportRuler: NbViewportRulerAdapter, _stickyPositioningListener: any);
106 private destroy$;
107 private _source;
108 private platform;
109 /**
110 * The table's data
111 * @param data
112 * @type {<T>[] | NbTreeGridDataSource}
113 */
114 set source(data: T[] | NbTreeGridDataSource<T>);
115 levelPadding: string;
116 /**
117 * Make all columns equal width. False by default.
118 */
119 set equalColumnsWidth(value: boolean);
120 get equalColumnsWidth(): boolean;
121 private equalColumnsWidthValue;
122 static ngAcceptInputType_equalColumnsWidth: NbBooleanInput;
123 readonly treeClass = true;
124 ngAfterViewInit(): void;
125 ngOnDestroy(): void;
126 toggleRow(row: NbTreeGridRowComponent, options?: NbToggleOptions): void;
127 toggleCellRow(cell: NbTreeGridCellDirective): void;
128 getColumnWidth(): string;
129 getCellLevel(cell: NbTreeGridCellDirective, columnName: string): number;
130 private getRowContext;
131 private getCellContext;
132 private getContextByCellEl;
133 private getContextByRowEl;
134 private getColumns;
135 private getColumnsCount;
136 private isFirstColumn;
137 private checkDefsCount;
138 private updateVisibleColumns;
139 static ɵfac: i0.ɵɵFactoryDeclaration<NbTreeGridComponent<any>, [null, null, null, null, { attribute: "role"; }, null, null, null, null, null, null, null, { optional: true; skipSelf: true; }]>;
140 static ɵcmp: i0.ɵɵComponentDeclaration<NbTreeGridComponent<any>, "table[nbTreeGrid]", never, { "source": { "alias": "nbTreeGrid"; "required": false; }; "levelPadding": { "alias": "levelPadding"; "required": false; }; "equalColumnsWidth": { "alias": "equalColumnsWidth"; "required": false; }; }, {}, never, never, false, never>;
141}