mat-vs-table
Version:
[](https://badge.fury.io/js/mat-vs-table) [](https://angular.io/styleguide)
359 lines (358 loc) • 19.7 kB
TypeScript
import { AfterContentChecked, ChangeDetectorRef, ElementRef, IterableDiffers, OnDestroy, OnInit, QueryList, TrackByFunction, NgZone } from '@angular/core';
import { CollectionViewer, DataSource, ListRange } from '@angular/cdk/collections';
import { Directionality } from '@angular/cdk/bidi';
import { BehaviorSubject, Observable } from 'rxjs';
import { CdkColumnDef, CdkFooterRowDef, CdkHeaderRowDef, CdkRowDef, DataRowOutlet, HeaderRowOutlet, FooterRowOutlet, NoDataRowOutlet, RowOutlet, CdkNoDataRow } from '@angular/cdk/table';
import { BooleanInput } from '@angular/cdk/coercion';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { Platform } from '@angular/cdk/platform';
import * as i0 from "@angular/core";
export declare function getTableUnknownColumnError(id: string): Error;
export declare function getTableDuplicateColumnNameError(name: string): Error;
export declare function getTableMultipleDefaultRowDefsError(): Error;
export declare function getTableMissingMatchingRowDefError(data: any): Error;
export declare function getTableMissingRowDefsError(): Error;
export declare function getTableUnknownDataSourceError(): Error;
declare type CdkTableDataSourceInput<T> = DataSource<T> | Observable<ReadonlyArray<T> | T[]> | ReadonlyArray<T> | T[];
export declare class MatVsTableComponent<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
protected readonly _differs: IterableDiffers;
protected readonly _changeDetectorRef: ChangeDetectorRef;
protected readonly _elementRef: ElementRef;
protected readonly _dir: Directionality;
protected _viewport: CdkVirtualScrollViewport;
protected readonly ngZone: NgZone;
private _platform;
private _document;
/** Latest data provided by the data source. */
protected _data: T[] | ReadonlyArray<T>;
/** The currently rendered items. */
private _renderedItems;
/** Subject that emits when the component has been destroyed. */
private _onDestroy;
/** List of the rendered rows as identified by their `RenderRow` object. */
private _renderRows;
/** Subscription that listens for the data provided by the data source. */
private _renderChangeSubscription;
/**
* Map of all the user's defined columns (header, data, and footer cell template) identified by
* name. Collection populated by the column definitions gathered by `ContentChildren` as well as
* any custom column definitions added to `_customColumnDefs`.
*/
private _columnDefsByName;
/**
* Set of all row definitions that can be used by this table. Populated by the rows gathered by
* using `ContentChildren` as well as any custom row definitions added to `_customRowDefs`.
*/
private _rowDefs;
/**
* Set of all header row definitions that can be used by this table. Populated by the rows
* gathered by using `ContentChildren` as well as any custom row definitions added to
* `_customHeaderRowDefs`.
*/
private _headerRowDefs;
/**
* Set of all row definitions that can be used by this table. Populated by the rows gathered by
* using `ContentChildren` as well as any custom row definitions added to
* `_customFooterRowDefs`.
*/
private _footerRowDefs;
/** Differ used to find the changes in the data provided by the data source. */
private _dataDiffer;
/** Stores the row definition that does not have a when predicate. */
private _defaultRowDef;
/**
* Column definitions that were defined outside of the direct content children of the table.
* These will be defined when, e.g., creating a wrapper around the cdkTable that has
* column definitions as *its* content child.
*/
private _customColumnDefs;
/**
* Data row definitions that were defined outside of the direct content children of the table.
* These will be defined when, e.g., creating a wrapper around the cdkTable that has
* built-in data rows as *its* content child.
*/
private _customRowDefs;
/**
* Header row definitions that were defined outside of the direct content children of the table.
* These will be defined when, e.g., creating a wrapper around the cdkTable that has
* built-in header rows as *its* content child.
*/
private _customHeaderRowDefs;
/**
* Footer row definitions that were defined outside of the direct content children of the table.
* These will be defined when, e.g., creating a wrapper around the cdkTable that has a
* built-in footer row as *its* content child.
*/
private _customFooterRowDefs;
/**
* Whether the header row definition has been changed. Triggers an update to the header row after
* content is checked. Initialized as true so that the table renders the initial set of rows.
*/
private _headerRowDefChanged;
/**
* Whether the footer row definition has been changed. Triggers an update to the footer row after
* content is checked. Initialized as true so that the table renders the initial set of rows.
*/
private _footerRowDefChanged;
/**
* Cache of the latest rendered `RenderRow` objects as a map for easy retrieval when constructing
* a new list of `RenderRow` objects for rendering rows. Since the new list is constructed with
* the cached `RenderRow` objects when possible, the row identity is preserved when the data
* and row template matches, which allows the `IterableDiffer` to check rows by reference
* and understand which rows are added/moved/removed.
*
* Implemented as a map of maps where the first key is the `data: T` object and the second is the
* `CdkRowDef<T>` object. With the two keys, the cache points to a `RenderRow<T>` object that
* contains an array of created pairs. The array is necessary to handle cases where the data
* array contains multiple duplicate data objects and each instantiated `RenderRow` must be
* stored.
*/
private _cachedRenderRowsMap;
/** Whether the table is applied to a native `<table>`. */
private _isNativeHtmlTable;
/**
* Utility class that is responsible for applying the appropriate sticky positioning styles to
* the table's rows and cells.
*/
private _stickyStyler;
/**
* CSS class added to any row or cell that has sticky positioning applied. May be overriden by
* table subclasses.
*/
protected stickyCssClass: string;
/** Whether the no data row is currently showing anything. */
private _isShowingNoDataRow;
/**
* Tracking function that will be used to check the differences in data changes. Used similarly
* to `ngFor` `trackBy` function. Optimize row operations by identifying a row based on its data
* relative to the function to know if a row should be added/removed/moved.
* Accepts a function that takes two parameters, `index` and `item`.
*/
get trackBy(): TrackByFunction<T>;
set trackBy(fn: TrackByFunction<T>);
private _trackByFn;
/**
* The table's source of data, which can be provided in three ways (in order of complexity):
* - Simple data array (each object represents one table row)
* - Stream that emits a data array each time the array changes
* - `DataSource` object that implements the connect/disconnect interface.
*
* If a data array is provided, the table must be notified when the array's objects are
* added, removed, or moved. This can be done by calling the `renderRows()` function which will
* render the diff since the last table render. If the data array reference is changed, the table
* will automatically trigger an update to the rows.
*
* When providing an Observable stream, the table will trigger an update automatically when the
* stream emits a new array of data.
*
* Finally, when providing a `DataSource` object, the table will use the Observable stream
* provided by the connect function and trigger updates when that stream emits new data array
* values. During the table's ngOnDestroy or when the data source is removed from the table, the
* table will call the DataSource's `disconnect` function (may be useful for cleaning up any
* subscriptions registered during the connect process).
*/
get dataSource(): CdkTableDataSourceInput<T>;
set dataSource(dataSource: CdkTableDataSourceInput<T>);
private _dataSource;
/**
* Whether to allow multiple rows per data object by evaluating which rows evaluate their 'when'
* predicate to true. If `multiTemplateDataRows` is false, which is the default value, then each
* dataobject will render the first row that evaluates its when predicate to true, in the order
* defined in the table, or otherwise the default row which does not have a when predicate.
*/
get multiTemplateDataRows(): boolean;
set multiTemplateDataRows(v: boolean);
_multiTemplateDataRows: boolean;
/**
* Stream containing the latest information on what rows are being displayed on screen.
* Can be used by the data source to as a heuristic of what data should be provided.
*
* @docs-private
*/
viewChange: BehaviorSubject<{
start: number;
end: number;
}>;
_rowOutlet: DataRowOutlet;
_headerRowOutlet: HeaderRowOutlet;
_footerRowOutlet: FooterRowOutlet;
_noDataRowOutlet: NoDataRowOutlet;
/**
* The column definitions provided by the user that contain what the header, data, and footer
* cells should render for each column.
*/
_contentColumnDefs: QueryList<CdkColumnDef>;
/** Set of data row definitions that were provided to the table as content children. */
_contentRowDefs: QueryList<CdkRowDef<T>>;
/** Set of header row definitions that were provided to the table as content children. */
_contentHeaderRowDefs: QueryList<CdkHeaderRowDef>;
/** Set of footer row definitions that were provided to the table as content children. */
_contentFooterRowDefs: QueryList<CdkFooterRowDef>;
/** Row definition that will only be rendered if there's no data in the table. */
_noDataRow: CdkNoDataRow;
constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef, role: string, _dir: Directionality, _viewport: CdkVirtualScrollViewport, ngZone: NgZone, _document: any, _platform: Platform);
/** The currently rendered range of indices. */
private _renderedRange;
dataStream: Observable<T[]>;
/** Helper to extract size from a DOM Node. */
getSize(orientation: 'horizontal' | 'vertical', node: Node): number;
/**
* Measures the combined size (width for horizontal orientation, height for vertical) of all items
* in the specified range. Throws an error if the range includes items that are not currently
* rendered.
*/
measureRangeSize(range: ListRange, orientation: 'horizontal' | 'vertical'): number;
ngOnInit(): void;
ngAfterContentChecked(): void;
/** React to scroll state changes in the viewport. */
private _onRenderedDataChange;
ngOnDestroy(): void;
/**
* Renders rows based on the table's latest set of data, which was either provided directly as an
* input or retrieved through an Observable stream (directly or from a DataSource).
* Checks for differences in the data since the last diff to perform only the necessary
* changes (add/remove/move rows).
*
* If the table's data source is a DataSource or Observable, this will be invoked automatically
* each time the provided Observable stream emits a new data array. Otherwise if your data is
* an array, this function will need to be called to render any changes.
*/
renderRows(): void;
/** Adds a column definition that was not included as part of the content children. */
addColumnDef(columnDef: CdkColumnDef): void;
/** Removes a column definition that was not included as part of the content children. */
removeColumnDef(columnDef: CdkColumnDef): void;
/** Adds a row definition that was not included as part of the content children. */
addRowDef(rowDef: CdkRowDef<T>): void;
/** Removes a row definition that was not included as part of the content children. */
removeRowDef(rowDef: CdkRowDef<T>): void;
/** Adds a header row definition that was not included as part of the content children. */
addHeaderRowDef(headerRowDef: CdkHeaderRowDef): void;
/** Removes a header row definition that was not included as part of the content children. */
removeHeaderRowDef(headerRowDef: CdkHeaderRowDef): void;
/** Adds a footer row definition that was not included as part of the content children. */
addFooterRowDef(footerRowDef: CdkFooterRowDef): void;
/** Removes a footer row definition that was not included as part of the content children. */
removeFooterRowDef(footerRowDef: CdkFooterRowDef): void;
/**
* Updates the header sticky styles. First resets all applied styles with respect to the cells
* sticking to the top. Then, evaluating which cells need to be stuck to the top. This is
* automatically called when the header row changes its displayed set of columns, or if its
* sticky input changes. May be called manually for cases where the cell content changes outside
* of these events.
*/
updateStickyHeaderRowStyles(): void;
/**
* Updates the footer sticky styles. First resets all applied styles with respect to the cells
* sticking to the bottom. Then, evaluating which cells need to be stuck to the bottom. This is
* automatically called when the footer row changes its displayed set of columns, or if its
* sticky input changes. May be called manually for cases where the cell content changes outside
* of these events.
*/
updateStickyFooterRowStyles(): void;
/**
* Updates the column sticky styles. First resets all applied styles with respect to the cells
* sticking to the left and right. Then sticky styles are added for the left and right according
* to the column definitions for each cell in each row. This is automatically called when
* the data source provides a new set of data or when a column definition changes its sticky
* input. May be called manually for cases where the cell content changes outside of these events.
*/
updateStickyColumnStyles(): void;
/**
* Get the list of RenderRow objects to render according to the current list of data and defined
* row definitions. If the previous list already contained a particular pair, it should be reused
* so that the differ equates their references.
*/
private _getAllRenderRows;
/**
* Gets a list of `RenderRow<T>` for the provided data object and any `CdkRowDef` objects that
* should be rendered for this data. Reuses the cached RenderRow objects if they match the same
* `(T, CdkRowDef)` pair.
*/
private _getRenderRowsForData;
/** Update the map containing the content's column definitions. */
private _cacheColumnDefs;
/** Update the list of all available row definitions that can be used. */
private _cacheRowDefs;
/**
* Check if the header, data, or footer rows have changed what columns they want to display or
* whether the sticky states have changed for the header or footer. If there is a diff, then
* re-render that section.
*/
private _renderUpdatedColumns;
/**
* Switch to the provided data source by resetting the data and unsubscribing from the current
* render change subscription if one exists. If the data source is null, interpret this by
* clearing the row outlet. Otherwise start listening for new data.
*/
private _switchDataSource;
/** Set up a subscription for the data provided by the data source. */
private _observeRenderChanges;
/**
* Clears any existing content in the header row outlet and creates a new embedded view
* in the outlet using the header row definition.
*/
private _forceRenderHeaderRows;
/**
* Clears any existing content in the footer row outlet and creates a new embedded view
* in the outlet using the footer row definition.
*/
private _forceRenderFooterRows;
/** Adds the sticky column styles for the rows according to the columns' stick states. */
private _addStickyColumnStyles;
/** Gets the list of rows that have been rendered in the row outlet. */
_getRenderedRows(rowOutlet: RowOutlet): HTMLElement[];
/**
* Get the matching row definitions that should be used for this row data. If there is only
* one row definition, it is returned. Otherwise, find the row definitions that has a when
* predicate that returns true with the data. If none return true, return the default row
* definition.
*/
_getRowDefs(data: T, dataIndex: number): CdkRowDef<T>[];
/**
* Create the embedded view for the data row template and place it in the correct index location
* within the data row view container.
*/
private _insertRow;
/**
* Creates a new row template in the outlet and fills it with the set of cell templates.
* Optionally takes a context to provide to the row and cells, as well as an optional index
* of where to place the new row template in the outlet.
*/
private _renderRow;
/**
* Updates the index-related context for each row to reflect any changes in the index of the rows,
* e.g. first/last/even/odd.
*/
private _updateRowIndexContext;
/** Gets the column definitions for the provided row def. */
private _getCellTemplates;
/** Adds native table sections (e.g. tbody) and moves the row outlets into them. */
private _applyNativeTableSections;
/**
* Forces a re-render of the data rows. Should be called in cases where there has been an input
* change that affects the evaluation of which rows should be rendered, e.g. toggling
* `multiTemplateDataRows` or adding/removing row definitions.
*/
private _forceRenderDataRows;
/**
* Checks if there has been a change in sticky states since last check and applies the correct
* sticky styles. Since checking resets the "dirty" state, this should only be performed once
* during a change detection and after the inputs are settled (after content check).
*/
private _checkStickyStates;
/**
* Creates the sticky styler that will be used for sticky rows and columns. Listens
* for directionality changes and provides the latest direction to the styler. Re-applies column
* stickiness when directionality changes.
*/
private _setupStickyStyler;
/** Filters definitions that belong to this table from a QueryList. */
private _getOwnDefs;
/** Creates or removes the no data row, depending on whether any data is being shown. */
private _updateNoDataRow;
static ngAcceptInputType_multiTemplateDataRows: BooleanInput;
static ɵfac: i0.ɵɵFactoryDef<MatVsTableComponent<any>, [null, null, null, { attribute: "role"; }, { optional: true; }, { skipSelf: true; }, null, null, null]>;
static ɵcmp: i0.ɵɵComponentDefWithMeta<MatVsTableComponent<any>, "mat-vs-table, table[mat-vs-table]", ["matVSTable"], { "trackBy": "trackBy"; "dataSource": "dataSource"; "multiTemplateDataRows": "multiTemplateDataRows"; }, {}, ["_noDataRow", "_contentColumnDefs", "_contentRowDefs", "_contentHeaderRowDefs", "_contentFooterRowDefs"], ["caption", "colgroup, col"]>;
}
export {};