@deepkit/desktop-ui
Version:
Library for desktop UI widgets in Angular 10+
311 lines (310 loc) • 12.3 kB
TypeScript
import { AfterViewInit, ApplicationRef, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, QueryList, SimpleChanges, TemplateRef } from '@angular/core';
import { Observable } from 'rxjs';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { DropdownComponent } from '../button';
import * as i0 from "@angular/core";
/**
* Directive to allow dynamic content in a cell.
*
* ```html
* <dui-table-column>
* <ng-container *duiTableCell="let item">
* {{item.fieldName | date}}
* </ng-container>
* </dui-table-column>
* ```
*/
export declare class TableCellDirective {
template: TemplateRef<any>;
constructor(template: TemplateRef<any>);
static ɵfac: i0.ɵɵFactoryDeclaration<TableCellDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<TableCellDirective, "[duiTableCell]", never, {}, {}, never, never, false, never>;
}
/**
* Can be used to define own dropdown items once the user opens the header context menu.
*/
export declare class TableCustomHeaderContextMenuDirective {
readonly dropdown: DropdownComponent;
constructor(dropdown: DropdownComponent);
static ɵfac: i0.ɵɵFactoryDeclaration<TableCustomHeaderContextMenuDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<TableCustomHeaderContextMenuDirective, "dui-dropdown[duiTableCustomHeaderContextMenu]", never, {}, {}, never, never, false, never>;
}
/**
* Can be used to define own dropdown items once the user opens the row context menu.
*/
export declare class TableCustomRowContextMenuDirective {
readonly dropdown: DropdownComponent;
constructor(dropdown: DropdownComponent);
static ɵfac: i0.ɵɵFactoryDeclaration<TableCustomRowContextMenuDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<TableCustomRowContextMenuDirective, "dui-dropdown[duiTableCustomRowContextMenu]", never, {}, {}, never, never, false, never>;
}
/**
* Directive to allow dynamic content in a column header.
*
* ```html
* <dui-table-column name="fieldName">
* <ng-container *duiTableHead>
* <strong>Header</strong>
* </ng-container>
* </dui-table-column>
* ```
*/
export declare class TableHeaderDirective {
template: TemplateRef<any>;
constructor(template: TemplateRef<any>);
static ɵfac: i0.ɵɵFactoryDeclaration<TableHeaderDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<TableHeaderDirective, "[duiTableHeader]", never, {}, {}, never, never, false, never>;
}
/**
* Defines a new column.
*/
export declare class TableColumnDirective {
/**
* The name of the column. Needs to be unique. If no renderer (*duiTableCell) is specified, this
* name is used to render the content T[name].
*/
name: string;
/**
* A different header name. Use dui-table-header to render HTML there.
*/
header?: string;
/**
* Default width.
*/
width?: number | string;
/**
* Adds additional class to the columns cells.
*/
class: string;
/**
* Whether this column is start hidden. User can unhide it using the context menu on the header.
*/
hidden: boolean | '';
sortable: boolean;
hideable: boolean;
/**
* At which position this column will be placed.
*/
position?: number;
/**
* This is the new position when the user moved it manually.
* @hidden
*/
overwrittenPosition?: number;
cell?: TableCellDirective;
headerDirective?: TableHeaderDirective;
isHidden(): boolean;
toggleHidden(): void;
/**
* @hidden
*/
getWidth(): string | undefined;
/**
* @hidden
*/
getPosition(): number | undefined;
static ɵfac: i0.ɵɵFactoryDeclaration<TableColumnDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<TableColumnDirective, "dui-table-column", never, { "name": { "alias": "name"; "required": false; }; "header": { "alias": "header"; "required": false; }; "width": { "alias": "width"; "required": false; }; "class": { "alias": "class"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "sortable": { "alias": "sortable"; "required": false; }; "hideable": { "alias": "hideable"; "required": false; }; "position": { "alias": "position"; "required": false; }; }, {}, ["cell", "headerDirective"], never, false, never>;
}
export declare class TableComponent<T> implements AfterViewInit, OnInit, OnChanges, OnDestroy {
protected element: ElementRef;
protected cd: ChangeDetectorRef;
protected parentCd: ChangeDetectorRef;
protected zone: NgZone;
protected app: ApplicationRef;
/**
* @hidden
*/
tabindex: number;
borderless: boolean | '';
/**
* Array of items that should be used for each row.
*/
items: T[] | Observable<T[]>;
/**
* Since dui-table has virtual-scroll active per default, it's required to define the itemHeight to
* make scrolling actually workable correctly.
*/
itemHeight: number;
/**
* Whether the table height just prints all rows, or if virtual scrolling is enabled.
*/
autoHeight: boolean;
/**
* Whether the table row should have a hover effect.
*/
hover: boolean | '';
/**
* Current calculated height, used only when autoHeight is given.
*/
height: number;
/**
* Whether the header should be shown.
*/
showHeader: boolean;
/**
* How many columns (from the left) are frozen (stay visible even if user scrolls horizontally).
*/
freezeColumns: number;
/**
* Default field of T for sorting.
*/
defaultSort: string;
/**
* Default sorting order.
*/
defaultSortDirection: 'asc' | 'desc';
/**
* Whether rows are selectable.
*/
selectable: boolean | '';
/**
* Whether multiple rows are selectable at the same time.
*/
multiSelect: boolean | '';
/**
* TrackFn for ngFor to improve performance. Default is order by index.
*/
trackFn?: (index: number, item: T) => any;
/**
* Not used yet.
*/
displayInitial: number;
/**
* Not used yet.
*/
increaseBy: number;
/**
* Filter function.
*/
filter?: (item: T) => boolean;
rowClass?: (item: T) => string | undefined;
cellClass?: (item: T, column: string) => string | undefined;
/**
* When the user changes the order or width of the columns, the information is stored
* in localStorage using this key, prefixed with `@dui/table/`.
*/
preferenceKey: string;
/**
* Filter query.
*/
filterQuery?: string;
columnState: {
name: string;
position: number;
visible: boolean;
}[];
/**
* Against which fields filterQuery should run.
*/
filterFields?: string[];
/**
* Alternate object value fetcher, important for sorting and filtering.
*/
valueFetcher: (object: any, path: string) => any;
/**
* A hook to provide custom sorting behavior for certain columns.
*/
sortFunction?: (sort: {
[name: string]: 'asc' | 'desc';
}) => (((a: T, b: T) => number) | undefined);
/**
* Whether sorting is enabled (clicking headers trigger sort).
*/
sorting: boolean;
noFocusOutline: boolean | '';
sort: {
[column: string]: 'asc' | 'desc';
};
rawItems: T[];
sorted: T[];
selectedMap: Map<T, boolean>;
/**
* Elements that are selected, by reference.
*/
selected: T[];
protected selectedHistory: T[];
/**
* Elements that are selected, by reference.
*/
selectedChange: EventEmitter<T[]>;
sortedChange: EventEmitter<T[]>;
cellSelect: EventEmitter<{
item: T;
cell: string;
} | undefined>;
/**
* When a row gets double clicked.
*/
dbclick: EventEmitter<T>;
customSort: EventEmitter<{
[column: string]: 'asc' | 'desc';
}>;
cellDblClick: EventEmitter<{
item: T;
column: string;
}>;
cellClick: EventEmitter<{
item: T;
column: string;
}>;
header?: ElementRef;
ths?: QueryList<ElementRef<HTMLElement>>;
columnDefs?: QueryList<TableColumnDirective>;
customHeaderDropdown?: TableCustomHeaderContextMenuDirective;
customRowDropdown?: TableCustomRowContextMenuDirective;
viewport: CdkVirtualScrollViewport;
viewportElement: ElementRef;
sortedColumnDefs: TableColumnDirective[];
visibleColumns: TableColumnDirective[];
columnMap: {
[name: string]: TableColumnDirective;
};
displayedColumns?: string[];
protected ignoreThisSort: boolean;
scrollTop: number;
constructor(element: ElementRef, cd: ChangeDetectorRef, parentCd: ChangeDetectorRef, zone: NgZone);
setColumnWidth(column: TableColumnDirective, width: number): void;
ngOnInit(): void;
ngOnDestroy(): void;
freezeLeft(columns: TableColumnDirective[], untilIndex: number): number;
onResize(): void;
resetAll(): void;
storePreference(): void;
loadPreference(): void;
dblClickCell(event: MouseEvent): void;
clickCell(event: MouseEvent): void;
/**
* Toggles the sort by the given column name.
*/
sortBy(name: string, $event?: MouseEvent): void;
/**
* @hidden
*/
trackByFn: (index: number, item: any) => any;
/**
* @hidden
*/
trackByColumn(index: number, column: TableColumnDirective): string;
/**
* @hidden
*/
filterSorted(items: T[]): T[];
initHeaderMovement(): Promise<void>;
ngAfterViewInit(): void;
sortColumnDefs(): void;
getVisibleColumns(t: TableColumnDirective[]): TableColumnDirective[];
filterFn(item: T): boolean;
ngOnChanges(changes: SimpleChanges): void;
private updateDisplayColumns;
private doSort;
protected createSortFunction(sortField: string, dir: 'asc' | 'desc', next?: (a: any, b: any) => number): (a: T, b: T) => number;
/**
* @hidden
*/
onFocus(event: KeyboardEvent): void;
deselect(item: T): void;
select(item: T, $event?: MouseEvent): void;
static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent<any>, [null, null, { skipSelf: true; }, null]>;
static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "dui-table", never, { "borderless": { "alias": "borderless"; "required": false; }; "items": { "alias": "items"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "autoHeight": { "alias": "autoHeight"; "required": false; }; "hover": { "alias": "hover"; "required": false; }; "showHeader": { "alias": "showHeader"; "required": false; }; "freezeColumns": { "alias": "freezeColumns"; "required": false; }; "defaultSort": { "alias": "defaultSort"; "required": false; }; "defaultSortDirection": { "alias": "defaultSortDirection"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "multiSelect": { "alias": "multiSelect"; "required": false; }; "trackFn": { "alias": "trackFn"; "required": false; }; "displayInitial": { "alias": "displayInitial"; "required": false; }; "increaseBy": { "alias": "increaseBy"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "rowClass": { "alias": "rowClass"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "preferenceKey": { "alias": "preferenceKey"; "required": false; }; "filterQuery": { "alias": "filterQuery"; "required": false; }; "columnState": { "alias": "columnState"; "required": false; }; "filterFields": { "alias": "filterFields"; "required": false; }; "valueFetcher": { "alias": "valueFetcher"; "required": false; }; "sortFunction": { "alias": "sortFunction"; "required": false; }; "sorting": { "alias": "sorting"; "required": false; }; "noFocusOutline": { "alias": "noFocusOutline"; "required": false; }; "sort": { "alias": "sort"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectedChange": "selectedChange"; "sortedChange": "sortedChange"; "cellSelect": "cellSelect"; "dbclick": "dbclick"; "customSort": "customSort"; "cellDblClick": "cellDblClick"; "cellClick": "cellClick"; }, ["customHeaderDropdown", "customRowDropdown", "columnDefs"], never, false, never>;
}