@swimlane/ngx-datatable
Version:
ngx-datatable is an Angular table grid component for presenting large and complex data.
232 lines (231 loc) • 11.2 kB
TypeScript
import { ChangeDetectorRef, EventEmitter, OnDestroy, OnInit, TemplateRef, TrackByFunction } from '@angular/core';
import { ScrollerComponent } from './scroller.component';
import { RowHeightCache } from '../../utils/row-height-cache';
import { TableColumn } from '../../types/table-column.type';
import { DatatableGroupHeaderDirective } from './body-group-header.directive';
import { DatatableRowDetailDirective } from '../row-detail/row-detail.directive';
import { DataTableBodyRowComponent } from './body-row.component';
import { ColumnGroupWidth } from '../../types/internal.types';
import { ActivateEvent, DragEventData, Group, RowOrGroup, ScrollEvent, SelectionType, TreeStatus } from '../../types/public.types';
import * as i0 from "@angular/core";
export declare class DataTableBodyComponent<TRow extends {
treeStatus?: TreeStatus;
} = any> implements OnInit, OnDestroy {
cd: ChangeDetectorRef;
rowDefTemplate?: TemplateRef<any>;
scrollbarV: boolean;
scrollbarH: boolean;
loadingIndicator: boolean;
ghostLoadingIndicator: boolean;
externalPaging: boolean;
rowHeight: number | 'auto' | ((row?: any) => number);
offsetX: number;
selectionType: SelectionType;
selected: any[];
rowIdentity: any;
rowDetail: DatatableRowDetailDirective;
groupHeader: DatatableGroupHeaderDirective;
selectCheck: (value: TRow, index: number, array: TRow[]) => boolean;
displayCheck: (row: TRow, column: TableColumn, value?: any) => boolean;
trackByProp: string;
rowClass: (row: RowOrGroup<TRow>) => string | Record<string, boolean>;
groupedRows: Group<TRow>[];
groupExpansionDefault: boolean;
innerWidth: number;
groupRowsBy: keyof TRow;
virtualization: boolean;
summaryRow: boolean;
summaryPosition: string;
summaryHeight: number;
rowDraggable: boolean;
rowDragEvents: EventEmitter<DragEventData>;
disableRowCheck: (row: TRow) => boolean;
set pageSize(val: number);
get pageSize(): number;
set rows(val: TRow[]);
get rows(): TRow[];
set columns(val: TableColumn[]);
get columns(): any[];
set offset(val: number);
get offset(): number;
set rowCount(val: number);
get rowCount(): number;
get bodyWidth(): string;
set bodyHeight(val: number | string);
get bodyHeight(): number | string;
verticalScrollVisible: boolean;
scroll: EventEmitter<ScrollEvent>;
page: EventEmitter<number>;
activate: EventEmitter<ActivateEvent<TRow>>;
select: EventEmitter<{
selected: TRow[];
}>;
detailToggle: EventEmitter<any>;
rowContextmenu: EventEmitter<{
event: MouseEvent;
row: RowOrGroup<TRow>;
}>;
treeAction: EventEmitter<{
row: TRow;
}>;
scroller: ScrollerComponent;
/**
* Returns if selection is enabled.
*/
get selectEnabled(): boolean;
/**
* Property that would calculate the height of scroll bar
* based on the row heights cache for virtual scroll and virtualization. Other scenarios
* calculate scroll height automatically (as height will be undefined).
*/
scrollHeight: import("@angular/core").Signal<number>;
rowsToRender: import("@angular/core").Signal<RowOrGroup<TRow>[]>;
rowHeightsCache: import("@angular/core").WritableSignal<RowHeightCache>;
offsetY: number;
indexes: import("@angular/core").WritableSignal<{
first: number;
last: number;
}>;
columnGroupWidths: ColumnGroupWidth;
rowTrackingFn: TrackByFunction<RowOrGroup<TRow>>;
listener: any;
rowIndexes: WeakMap<any, any>;
rowExpansions: any[];
_rows: TRow[];
_bodyHeight: string;
_columns: TableColumn[];
_rowCount: number;
_offset: number;
_pageSize: number;
_offsetEvent: number;
private _draggedRow;
private _draggedRowElement;
/**
* Creates an instance of DataTableBodyComponent.
*/
constructor();
/**
* Called after the constructor, initializing input properties
*/
ngOnInit(): void;
private toggleStateChange;
/**
* Called once, before the instance is destroyed.
*/
ngOnDestroy(): void;
/**
* Updates the Y offset given a new offset.
*/
updateOffsetY(offset?: number): void;
/**
* Body was scrolled, this is mainly useful for
* when a user is server-side pagination via virtual scroll.
*/
onBodyScroll(event: any): void;
/**
* Updates the page given a direction.
*/
updatePage(direction: string): void;
/**
* Updates the rows in the view port
*/
updateRows(): RowOrGroup<TRow>[];
/**
* Get the row height
*/
getRowHeight(row: RowOrGroup<TRow>): number;
/**
* @param group the group with all rows
*/
getGroupHeight(group: Group<TRow>): number;
/**
* Calculate row height based on the expanded state of the row.
*/
getRowAndDetailHeight(row: TRow): number;
/**
* Get the height of the detail row.
*/
getDetailRowHeight: (row?: TRow, index?: number) => number;
getGroupHeaderRowHeight: (row?: any, index?: any) => number;
/**
* Calculates the styles for the row so that the rows can be moved in 2D space
* during virtual scroll inside the DOM. In the below case the Y position is
* manipulated. As an example, if the height of row 0 is 30 px and row 1 is
* 100 px then following styles are generated:
*
* transform: translate3d(0px, 0px, 0px); -> row0
* transform: translate3d(0px, 30px, 0px); -> row1
* transform: translate3d(0px, 130px, 0px); -> row2
*
* Row heights have to be calculated based on the row heights cache as we wont
* be able to determine which row is of what height before hand. In the above
* case the positionY of the translate3d for row2 would be the sum of all the
* heights of the rows before it (i.e. row0 and row1).
*
* @returns the CSS3 style to be applied
*/
rowsStyles: import("@angular/core").Signal<{
[klass: string]: any;
}[]>;
/**
* Calculate bottom summary row offset for scrollbar mode.
* For more information about cache and offset calculation
* see description for `rowsStyles` signal
*
* @returns the CSS3 style to be applied
*/
bottomSummaryRowsStyles: import("@angular/core").Signal<{
transform: string;
position: string;
}>;
/**
* Updates the index of the rows in the viewport
*/
updateIndexes(): void;
/**
* Refreshes the full Row Height cache. Should be used
* when the entire row array state has changed.
*/
refreshRowHeightCache(): void;
/**
* Gets the index for the view port
*/
getAdjustedViewPortIndex(): number;
/**
* Toggle the Expansion of the row i.e. if the row is expanded then it will
* collapse and vice versa. Note that the expanded status is stored as
* a part of the row object itself as we have to preserve the expanded row
* status in case of sorting and filtering of the row set.
*/
toggleRowExpansion(row: TRow): void;
/**
* Expand/Collapse all the rows no matter what their state is.
*/
toggleAllRows(expanded: boolean): void;
/**
* Recalculates the table
*/
recalcLayout(): void;
/**
* Returns if the row was expanded and set default row expansion when row expansion is empty
*/
getRowExpanded(row: RowOrGroup<TRow>): boolean;
getRowExpandedIdx(row: RowOrGroup<TRow>, expanded: RowOrGroup<TRow>[]): number;
/**
* Gets the row index given a row
*/
getRowIndex(row: RowOrGroup<TRow>): number;
onTreeAction(row: TRow): void;
dragOver(event: DragEvent, dropRow: RowOrGroup<TRow>): void;
drag(event: DragEvent, dragRow: RowOrGroup<TRow>, rowComponent: DataTableBodyRowComponent<TRow>): void;
drop(event: DragEvent, dropRow: RowOrGroup<TRow>, rowComponent: DataTableBodyRowComponent<TRow>): void;
dragEnter(event: DragEvent, dropRow: RowOrGroup<TRow>, rowComponent: DataTableBodyRowComponent<TRow>): void;
dragLeave(event: DragEvent, dropRow: RowOrGroup<TRow>, rowComponent: DataTableBodyRowComponent<TRow>): void;
dragEnd(event: DragEvent, dragRow: RowOrGroup<TRow>): void;
updateColumnGroupWidths(): void;
protected isGroup(row: RowOrGroup<TRow>[]): row is Group<TRow>[];
protected isGroup(row: RowOrGroup<TRow>): row is Group<TRow>;
protected isRow(row: RowOrGroup<TRow>): row is TRow;
static ɵfac: i0.ɵɵFactoryDeclaration<DataTableBodyComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<DataTableBodyComponent<any>, "datatable-body", never, { "rowDefTemplate": { "alias": "rowDefTemplate"; "required": false; }; "scrollbarV": { "alias": "scrollbarV"; "required": false; }; "scrollbarH": { "alias": "scrollbarH"; "required": false; }; "loadingIndicator": { "alias": "loadingIndicator"; "required": false; }; "ghostLoadingIndicator": { "alias": "ghostLoadingIndicator"; "required": false; }; "externalPaging": { "alias": "externalPaging"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "offsetX": { "alias": "offsetX"; "required": false; }; "selectionType": { "alias": "selectionType"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "rowIdentity": { "alias": "rowIdentity"; "required": false; }; "rowDetail": { "alias": "rowDetail"; "required": false; }; "groupHeader": { "alias": "groupHeader"; "required": false; }; "selectCheck": { "alias": "selectCheck"; "required": false; }; "displayCheck": { "alias": "displayCheck"; "required": false; }; "trackByProp": { "alias": "trackByProp"; "required": false; }; "rowClass": { "alias": "rowClass"; "required": false; }; "groupedRows": { "alias": "groupedRows"; "required": false; }; "groupExpansionDefault": { "alias": "groupExpansionDefault"; "required": false; }; "innerWidth": { "alias": "innerWidth"; "required": false; }; "groupRowsBy": { "alias": "groupRowsBy"; "required": false; }; "virtualization": { "alias": "virtualization"; "required": false; }; "summaryRow": { "alias": "summaryRow"; "required": false; }; "summaryPosition": { "alias": "summaryPosition"; "required": false; }; "summaryHeight": { "alias": "summaryHeight"; "required": false; }; "rowDraggable": { "alias": "rowDraggable"; "required": false; }; "rowDragEvents": { "alias": "rowDragEvents"; "required": false; }; "disableRowCheck": { "alias": "disableRowCheck"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "rowCount": { "alias": "rowCount"; "required": false; }; "bodyHeight": { "alias": "bodyHeight"; "required": false; }; "verticalScrollVisible": { "alias": "verticalScrollVisible"; "required": false; }; }, { "scroll": "scroll"; "page": "page"; "activate": "activate"; "select": "select"; "detailToggle": "detailToggle"; "rowContextmenu": "rowContextmenu"; "treeAction": "treeAction"; }, never, ["[loading-indicator]", "[empty-content]"], true, never>;
}