| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515 |
- import { ElementRef, EventEmitter, OnInit, QueryList, AfterViewInit, DoCheck, KeyValueDiffers, KeyValueDiffer, ChangeDetectorRef } from '@angular/core';
- import { DatatableGroupHeaderDirective } from './body/body-group-header.directive';
- import { BehaviorSubject, Subscription } from 'rxjs';
- import { INgxDatatableConfig } from '../ngx-datatable.module';
- import { TableColumn } from '../types/table-column.type';
- import { ColumnMode } from '../types/column-mode.type';
- import { SelectionType } from '../types/selection.type';
- import { SortType } from '../types/sort.type';
- import { ContextmenuType } from '../types/contextmenu.type';
- import { DataTableColumnDirective } from './columns/column.directive';
- import { DatatableRowDetailDirective } from './row-detail/row-detail.directive';
- import { DatatableFooterDirective } from './footer/footer.directive';
- import { DataTableBodyComponent } from './body/body.component';
- import { DataTableHeaderComponent } from './header/header.component';
- import { ScrollbarHelper } from '../services/scrollbar-helper.service';
- import { ColumnChangesService } from '../services/column-changes.service';
- import { DimensionsHelper } from '../services/dimensions-helper.service';
- export declare class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
- private scrollbarHelper;
- private dimensionsHelper;
- private cd;
- private columnChangesService;
- private configuration;
- /**
- * Template for the target marker of drag target columns.
- */
- targetMarkerTemplate: any;
- /**
- * Rows that are displayed in the table.
- */
- /**
- * Gets the rows.
- */
- rows: any;
- /**
- * This attribute allows the user to set the name of the column to group the data with
- */
- groupRowsBy: string;
- /**
- * This attribute allows the user to set a grouped array in the following format:
- * [
- * {groupid=1} [
- * {id=1 name="test1"},
- * {id=2 name="test2"},
- * {id=3 name="test3"}
- * ]},
- * {groupid=2>[
- * {id=4 name="test4"},
- * {id=5 name="test5"},
- * {id=6 name="test6"}
- * ]}
- * ]
- */
- groupedRows: any[];
- /**
- * Columns to be displayed.
- */
- /**
- * Get the columns.
- */
- columns: TableColumn[];
- /**
- * List of row objects that should be
- * represented as selected in the grid.
- * Default value: `[]`
- */
- selected: any[];
- /**
- * Enable vertical scrollbars
- */
- scrollbarV: boolean;
- /**
- * Enable horz scrollbars
- */
- scrollbarH: boolean;
- /**
- * The row height; which is necessary
- * to calculate the height for the lazy rendering.
- */
- rowHeight: number | 'auto' | ((row?: any) => number);
- /**
- * Type of column width distribution formula.
- * Example: flex, force, standard
- */
- columnMode: ColumnMode;
- /**
- * The minimum header height in pixels.
- * Pass a falsey for no header
- */
- headerHeight: any;
- /**
- * The minimum footer height in pixels.
- * Pass falsey for no footer
- */
- footerHeight: number;
- /**
- * If the table should use external paging
- * otherwise its assumed that all data is preloaded.
- */
- externalPaging: boolean;
- /**
- * If the table should use external sorting or
- * the built-in basic sorting.
- */
- externalSorting: boolean;
- /**
- * The page size to be shown.
- * Default value: `undefined`
- */
- /**
- * Gets the limit.
- */
- limit: number | undefined;
- /**
- * The total count of all rows.
- * Default value: `0`
- */
- /**
- * Gets the count.
- */
- count: number;
- /**
- * The current offset ( page - 1 ) shown.
- * Default value: `0`
- */
- offset: number;
- /**
- * Show the linear loading bar.
- * Default value: `false`
- */
- loadingIndicator: boolean;
- /**
- * Type of row selection. Options are:
- *
- * - `single`
- * - `multi`
- * - `checkbox`
- * - `multiClick`
- * - `cell`
- *
- * For no selection pass a `falsey`.
- * Default value: `undefined`
- */
- selectionType: SelectionType;
- /**
- * Enable/Disable ability to re-order columns
- * by dragging them.
- */
- reorderable: boolean;
- /**
- * Swap columns on re-order columns or
- * move them.
- */
- swapColumns: boolean;
- /**
- * The type of sorting
- */
- sortType: SortType;
- /**
- * Array of sorted columns by property and type.
- * Default value: `[]`
- */
- sorts: any[];
- /**
- * Css class overrides
- */
- cssClasses: any;
- /**
- * Message overrides for localization
- *
- * emptyMessage [default] = 'No data to display'
- * totalMessage [default] = 'total'
- * selectedMessage [default] = 'selected'
- */
- messages: any;
- /**
- * Row specific classes.
- * Similar implementation to ngClass.
- *
- * [rowClass]="'first second'"
- * [rowClass]="{ 'first': true, 'second': true, 'third': false }"
- */
- rowClass: any;
- /**
- * A boolean/function you can use to check whether you want
- * to select a particular row based on a criteria. Example:
- *
- * (selection) => {
- * return selection !== 'Ethel Price';
- * }
- */
- selectCheck: any;
- /**
- * A function you can use to check whether you want
- * to show the checkbox for a particular row based on a criteria. Example:
- *
- * (row, column, value) => {
- * return row.name !== 'Ethel Price';
- * }
- */
- displayCheck: (row: any, column?: any, value?: any) => boolean;
- /**
- * A boolean you can use to set the detault behaviour of rows and groups
- * whether they will start expanded or not. If ommited the default is NOT expanded.
- *
- */
- groupExpansionDefault: boolean;
- /**
- * Property to which you can use for custom tracking of rows.
- * Example: 'name'
- */
- trackByProp: string;
- /**
- * Property to which you can use for determining select all
- * rows on current page or not.
- *
- * @memberOf DatatableComponent
- */
- selectAllRowsOnPage: boolean;
- /**
- * A flag for row virtualization on / off
- */
- virtualization: boolean;
- /**
- * Tree from relation
- */
- treeFromRelation: string;
- /**
- * Tree to relation
- */
- treeToRelation: string;
- /**
- * A flag for switching summary row on / off
- */
- summaryRow: boolean;
- /**
- * A height of summary row
- */
- summaryHeight: number;
- /**
- * A property holds a summary row position: top/bottom
- */
- summaryPosition: string;
- /**
- * Body was scrolled typically in a `scrollbarV:true` scenario.
- */
- scroll: EventEmitter<any>;
- /**
- * A cell or row was focused via keyboard or mouse click.
- */
- activate: EventEmitter<any>;
- /**
- * A cell or row was selected.
- */
- select: EventEmitter<any>;
- /**
- * Column sort was invoked.
- */
- sort: EventEmitter<any>;
- /**
- * The table was paged either triggered by the pager or the body scroll.
- */
- page: EventEmitter<any>;
- /**
- * Columns were re-ordered.
- */
- reorder: EventEmitter<any>;
- /**
- * Column was resized.
- */
- resize: EventEmitter<any>;
- /**
- * The context menu was invoked on the table.
- * type indicates whether the header or the body was clicked.
- * content contains either the column or the row that was clicked.
- */
- tableContextmenu: EventEmitter<{
- event: MouseEvent;
- type: ContextmenuType;
- content: any;
- }>;
- /**
- * A row was expanded ot collapsed for tree
- */
- treeAction: EventEmitter<any>;
- /**
- * CSS class applied if the header height if fixed height.
- */
- readonly isFixedHeader: boolean;
- /**
- * CSS class applied to the root element if
- * the row heights are fixed heights.
- */
- readonly isFixedRow: boolean;
- /**
- * CSS class applied to root element if
- * vertical scrolling is enabled.
- */
- readonly isVertScroll: boolean;
- /**
- * CSS class applied to root element if
- * virtualization is enabled.
- */
- readonly isVirtualized: boolean;
- /**
- * CSS class applied to the root element
- * if the horziontal scrolling is enabled.
- */
- readonly isHorScroll: boolean;
- /**
- * CSS class applied to root element is selectable.
- */
- readonly isSelectable: boolean;
- /**
- * CSS class applied to root is checkbox selection.
- */
- readonly isCheckboxSelection: boolean;
- /**
- * CSS class applied to root if cell selection.
- */
- readonly isCellSelection: boolean;
- /**
- * CSS class applied to root if single select.
- */
- readonly isSingleSelection: boolean;
- /**
- * CSS class added to root element if mulit select
- */
- readonly isMultiSelection: boolean;
- /**
- * CSS class added to root element if mulit click select
- */
- readonly isMultiClickSelection: boolean;
- /**
- * Column templates gathered from `ContentChildren`
- * if described in your markup.
- */
- /**
- * Returns the column templates.
- */
- columnTemplates: QueryList<DataTableColumnDirective>;
- /**
- * Row Detail templates gathered from the ContentChild
- */
- rowDetail: DatatableRowDetailDirective;
- /**
- * Group Header templates gathered from the ContentChild
- */
- groupHeader: DatatableGroupHeaderDirective;
- /**
- * Footer template gathered from the ContentChild
- */
- footer: DatatableFooterDirective;
- /**
- * Reference to the body component for manually
- * invoking functions on the body.
- */
- bodyComponent: DataTableBodyComponent;
- /**
- * Reference to the header component for manually
- * invoking functions on the header.
- *
- * @memberOf DatatableComponent
- */
- headerComponent: DataTableHeaderComponent;
- /**
- * Returns if all rows are selected.
- */
- readonly allRowsSelected: boolean;
- element: HTMLElement;
- _innerWidth: number;
- pageSize: number;
- bodyHeight: number;
- rowCount: number;
- rowDiffer: KeyValueDiffer<{}, {}>;
- _offsetX: BehaviorSubject<number>;
- _limit: number | undefined;
- _count: number;
- _offset: number;
- _rows: any[];
- _groupRowsBy: string;
- _internalRows: any[];
- _internalColumns: TableColumn[];
- _columns: TableColumn[];
- _columnTemplates: QueryList<DataTableColumnDirective>;
- _subscriptions: Subscription[];
- constructor(scrollbarHelper: ScrollbarHelper, dimensionsHelper: DimensionsHelper, cd: ChangeDetectorRef, element: ElementRef, differs: KeyValueDiffers, columnChangesService: ColumnChangesService, configuration: INgxDatatableConfig);
- /**
- * Lifecycle hook that is called after data-bound
- * properties of a directive are initialized.
- */
- ngOnInit(): void;
- /**
- * Lifecycle hook that is called after a component's
- * view has been fully initialized.
- */
- ngAfterViewInit(): void;
- /**
- * Lifecycle hook that is called after a component's
- * content has been fully initialized.
- */
- ngAfterContentInit(): void;
- /**
- * This will be used when displaying or selecting rows.
- * when tracking/comparing them, we'll use the value of this fn,
- *
- * (`fn(x) === fn(y)` instead of `x === y`)
- */
- rowIdentity: (x: any) => any;
- /**
- * Translates the templates to the column objects
- */
- translateColumns(val: any): void;
- /**
- * Creates a map with the data grouped by the user choice of grouping index
- *
- * @param originalArray the original array passed via parameter
- * @param groupByIndex the index of the column to group the data by
- */
- groupArrayBy(originalArray: any, groupBy: any): {
- key: any;
- value: any;
- }[];
- ngDoCheck(): void;
- /**
- * Recalc's the sizes of the grid.
- *
- * Updated automatically on changes to:
- *
- * - Columns
- * - Rows
- * - Paging related
- *
- * Also can be manually invoked or upon window resize.
- */
- recalculate(): void;
- /**
- * Window resize handler to update sizes.
- */
- onWindowResize(): void;
- /**
- * Recalulcates the column widths based on column width
- * distribution mode and scrollbar offsets.
- */
- recalculateColumns(columns?: any[], forceIdx?: number, allowBleed?: boolean): any[] | undefined;
- /**
- * Recalculates the dimensions of the table size.
- * Internally calls the page size and row count calcs too.
- *
- */
- recalculateDims(): void;
- /**
- * Recalculates the pages after a update.
- */
- recalculatePages(): void;
- /**
- * Body triggered a page event.
- */
- onBodyPage({ offset }: any): void;
- /**
- * The body triggered a scroll event.
- */
- onBodyScroll(event: MouseEvent): void;
- /**
- * The footer triggered a page event.
- */
- onFooterPage(event: any): void;
- /**
- * Recalculates the sizes of the page
- */
- calcPageSize(val?: any[]): number;
- /**
- * Calculates the row count.
- */
- calcRowCount(val?: any[]): number;
- /**
- * The header triggered a contextmenu event.
- */
- onColumnContextmenu({ event, column }: any): void;
- /**
- * The body triggered a contextmenu event.
- */
- onRowContextmenu({ event, row }: any): void;
- /**
- * The header triggered a column resize event.
- */
- onColumnResize({ column, newValue }: any): void;
- /**
- * The header triggered a column re-order event.
- */
- onColumnReorder({ column, newValue, prevValue }: any): void;
- /**
- * The header triggered a column sort event.
- */
- onColumnSort(event: any): void;
- /**
- * Toggle all row selection
- */
- onHeaderSelect(event: any): void;
- /**
- * A row was selected from body
- */
- onBodySelect(event: any): void;
- /**
- * A row was expanded or collapsed for tree
- */
- onTreeAction(event: any): void;
- ngOnDestroy(): void;
- /**
- * listen for changes to input bindings of all DataTableColumnDirective and
- * trigger the columnTemplates.changes observable to emit
- */
- private listenForColumnInputChanges;
- private sortInternalRows;
- }
|