1 | import { AfterViewInit, ChangeDetectorRef, ElementRef, IterableDiffers, OnDestroy } from '@angular/core';
|
2 | import { NbPlatform } from '../cdk/platform/platform-service';
|
3 | import { NbDirectionality } from '../cdk/bidi/bidi-service';
|
4 | import { NbTable } from '../cdk/table/table.module';
|
5 | import { NbViewportRulerAdapter } from '../cdk/adapter/viewport-ruler-adapter';
|
6 | import { NbTreeGridDataSource, NbTreeGridDataSourceBuilder } from './data-source/tree-grid-data-source';
|
7 | import { NbTreeGridPresentationNode } from './data-source/tree-grid.model';
|
8 | import { NbToggleOptions } from './data-source/tree-grid.service';
|
9 | import { NbTreeGridRowComponent } from './tree-grid-row.component';
|
10 | import { NbTreeGridCellDirective } from './tree-grid-cell.component';
|
11 | import { NbBooleanInput } from '../helpers';
|
12 | import * 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 | */
|
99 | export 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 | }
|