table.d.ts 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414
  1. /**
  2. * @license
  3. * Copyright Google LLC All Rights Reserved.
  4. *
  5. * Use of this source code is governed by an MIT-style license that can be
  6. * found in the LICENSE file at https://angular.io/license
  7. */
  8. import { Directionality } from '@angular/cdk/bidi';
  9. import { CollectionViewer, DataSource } from '@angular/cdk/collections';
  10. import { Platform } from '@angular/cdk/platform';
  11. import { AfterContentChecked, ChangeDetectorRef, ElementRef, IterableDiffers, OnDestroy, OnInit, QueryList, TrackByFunction, ViewContainerRef } from '@angular/core';
  12. import { BehaviorSubject, Observable } from 'rxjs';
  13. import { CdkColumnDef } from './cell';
  14. import { CdkCellOutletMultiRowContext, CdkCellOutletRowContext, CdkFooterRowDef, CdkHeaderRowDef, CdkRowDef } from './row';
  15. /** Interface used to provide an outlet for rows to be inserted into. */
  16. export interface RowOutlet {
  17. viewContainer: ViewContainerRef;
  18. }
  19. /**
  20. * Union of the types that can be set as the data source for a `CdkTable`.
  21. * @docs-private
  22. */
  23. declare type CdkTableDataSourceInput<T> = DataSource<T> | Observable<ReadonlyArray<T> | T[]> | ReadonlyArray<T> | T[];
  24. /**
  25. * Provides a handle for the table to grab the view container's ng-container to insert data rows.
  26. * @docs-private
  27. */
  28. export declare class DataRowOutlet implements RowOutlet {
  29. viewContainer: ViewContainerRef;
  30. elementRef: ElementRef;
  31. constructor(viewContainer: ViewContainerRef, elementRef: ElementRef);
  32. }
  33. /**
  34. * Provides a handle for the table to grab the view container's ng-container to insert the header.
  35. * @docs-private
  36. */
  37. export declare class HeaderRowOutlet implements RowOutlet {
  38. viewContainer: ViewContainerRef;
  39. elementRef: ElementRef;
  40. constructor(viewContainer: ViewContainerRef, elementRef: ElementRef);
  41. }
  42. /**
  43. * Provides a handle for the table to grab the view container's ng-container to insert the footer.
  44. * @docs-private
  45. */
  46. export declare class FooterRowOutlet implements RowOutlet {
  47. viewContainer: ViewContainerRef;
  48. elementRef: ElementRef;
  49. constructor(viewContainer: ViewContainerRef, elementRef: ElementRef);
  50. }
  51. /**
  52. * The table template that can be used by the mat-table. Should not be used outside of the
  53. * material library.
  54. * @docs-private
  55. */
  56. export declare const CDK_TABLE_TEMPLATE = "\n <ng-content select=\"caption\"></ng-content>\n <ng-container headerRowOutlet></ng-container>\n <ng-container rowOutlet></ng-container>\n <ng-container footerRowOutlet></ng-container>\n";
  57. /**
  58. * Interface used to conveniently type the possible context interfaces for the render row.
  59. * @docs-private
  60. */
  61. export interface RowContext<T> extends CdkCellOutletMultiRowContext<T>, CdkCellOutletRowContext<T> {
  62. }
  63. /**
  64. * Set of properties that represents the identity of a single rendered row.
  65. *
  66. * When the table needs to determine the list of rows to render, it will do so by iterating through
  67. * each data object and evaluating its list of row templates to display (when multiTemplateDataRows
  68. * is false, there is only one template per data object). For each pair of data object and row
  69. * template, a `RenderRow` is added to the list of rows to render. If the data object and row
  70. * template pair has already been rendered, the previously used `RenderRow` is added; else a new
  71. * `RenderRow` is * created. Once the list is complete and all data objects have been itereated
  72. * through, a diff is performed to determine the changes that need to be made to the rendered rows.
  73. *
  74. * @docs-private
  75. */
  76. export interface RenderRow<T> {
  77. data: T;
  78. dataIndex: number;
  79. rowDef: CdkRowDef<T>;
  80. }
  81. /**
  82. * A data table that can render a header row, data rows, and a footer row.
  83. * Uses the dataSource input to determine the data to be rendered. The data can be provided either
  84. * as a data array, an Observable stream that emits the data array to render, or a DataSource with a
  85. * connect function that will return an Observable stream that emits the data array to render.
  86. */
  87. export declare class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
  88. protected readonly _differs: IterableDiffers;
  89. protected readonly _changeDetectorRef: ChangeDetectorRef;
  90. protected readonly _elementRef: ElementRef;
  91. protected readonly _dir: Directionality;
  92. private _platform;
  93. private _document;
  94. /** Latest data provided by the data source. */
  95. protected _data: T[] | ReadonlyArray<T>;
  96. /** Subject that emits when the component has been destroyed. */
  97. private _onDestroy;
  98. /** List of the rendered rows as identified by their `RenderRow` object. */
  99. private _renderRows;
  100. /** Subscription that listens for the data provided by the data source. */
  101. private _renderChangeSubscription;
  102. /**
  103. * Map of all the user's defined columns (header, data, and footer cell template) identified by
  104. * name. Collection populated by the column definitions gathered by `ContentChildren` as well as
  105. * any custom column definitions added to `_customColumnDefs`.
  106. */
  107. private _columnDefsByName;
  108. /**
  109. * Set of all row definitions that can be used by this table. Populated by the rows gathered by
  110. * using `ContentChildren` as well as any custom row definitions added to `_customRowDefs`.
  111. */
  112. private _rowDefs;
  113. /**
  114. * Set of all header row definitions that can be used by this table. Populated by the rows
  115. * gathered by using `ContentChildren` as well as any custom row definitions added to
  116. * `_customHeaderRowDefs`.
  117. */
  118. private _headerRowDefs;
  119. /**
  120. * Set of all row definitions that can be used by this table. Populated by the rows gathered by
  121. * using `ContentChildren` as well as any custom row definitions added to
  122. * `_customFooterRowDefs`.
  123. */
  124. private _footerRowDefs;
  125. /** Differ used to find the changes in the data provided by the data source. */
  126. private _dataDiffer;
  127. /** Stores the row definition that does not have a when predicate. */
  128. private _defaultRowDef;
  129. /**
  130. * Column definitions that were defined outside of the direct content children of the table.
  131. * These will be defined when, e.g., creating a wrapper around the cdkTable that has
  132. * column definitions as *its* content child.
  133. */
  134. private _customColumnDefs;
  135. /**
  136. * Data row definitions that were defined outside of the direct content children of the table.
  137. * These will be defined when, e.g., creating a wrapper around the cdkTable that has
  138. * built-in data rows as *its* content child.
  139. */
  140. private _customRowDefs;
  141. /**
  142. * Header row definitions that were defined outside of the direct content children of the table.
  143. * These will be defined when, e.g., creating a wrapper around the cdkTable that has
  144. * built-in header rows as *its* content child.
  145. */
  146. private _customHeaderRowDefs;
  147. /**
  148. * Footer row definitions that were defined outside of the direct content children of the table.
  149. * These will be defined when, e.g., creating a wrapper around the cdkTable that has a
  150. * built-in footer row as *its* content child.
  151. */
  152. private _customFooterRowDefs;
  153. /**
  154. * Whether the header row definition has been changed. Triggers an update to the header row after
  155. * content is checked. Initialized as true so that the table renders the initial set of rows.
  156. */
  157. private _headerRowDefChanged;
  158. /**
  159. * Whether the footer row definition has been changed. Triggers an update to the footer row after
  160. * content is checked. Initialized as true so that the table renders the initial set of rows.
  161. */
  162. private _footerRowDefChanged;
  163. /**
  164. * Cache of the latest rendered `RenderRow` objects as a map for easy retrieval when constructing
  165. * a new list of `RenderRow` objects for rendering rows. Since the new list is constructed with
  166. * the cached `RenderRow` objects when possible, the row identity is preserved when the data
  167. * and row template matches, which allows the `IterableDiffer` to check rows by reference
  168. * and understand which rows are added/moved/removed.
  169. *
  170. * Implemented as a map of maps where the first key is the `data: T` object and the second is the
  171. * `CdkRowDef<T>` object. With the two keys, the cache points to a `RenderRow<T>` object that
  172. * contains an array of created pairs. The array is necessary to handle cases where the data
  173. * array contains multiple duplicate data objects and each instantiated `RenderRow` must be
  174. * stored.
  175. */
  176. private _cachedRenderRowsMap;
  177. /** Whether the table is applied to a native `<table>`. */
  178. private _isNativeHtmlTable;
  179. /**
  180. * Utility class that is responsible for applying the appropriate sticky positioning styles to
  181. * the table's rows and cells.
  182. */
  183. private _stickyStyler;
  184. /**
  185. * CSS class added to any row or cell that has sticky positioning applied. May be overriden by
  186. * table subclasses.
  187. */
  188. protected stickyCssClass: string;
  189. /**
  190. * Tracking function that will be used to check the differences in data changes. Used similarly
  191. * to `ngFor` `trackBy` function. Optimize row operations by identifying a row based on its data
  192. * relative to the function to know if a row should be added/removed/moved.
  193. * Accepts a function that takes two parameters, `index` and `item`.
  194. */
  195. trackBy: TrackByFunction<T>;
  196. private _trackByFn;
  197. /**
  198. * The table's source of data, which can be provided in three ways (in order of complexity):
  199. * - Simple data array (each object represents one table row)
  200. * - Stream that emits a data array each time the array changes
  201. * - `DataSource` object that implements the connect/disconnect interface.
  202. *
  203. * If a data array is provided, the table must be notified when the array's objects are
  204. * added, removed, or moved. This can be done by calling the `renderRows()` function which will
  205. * render the diff since the last table render. If the data array reference is changed, the table
  206. * will automatically trigger an update to the rows.
  207. *
  208. * When providing an Observable stream, the table will trigger an update automatically when the
  209. * stream emits a new array of data.
  210. *
  211. * Finally, when providing a `DataSource` object, the table will use the Observable stream
  212. * provided by the connect function and trigger updates when that stream emits new data array
  213. * values. During the table's ngOnDestroy or when the data source is removed from the table, the
  214. * table will call the DataSource's `disconnect` function (may be useful for cleaning up any
  215. * subscriptions registered during the connect process).
  216. */
  217. dataSource: CdkTableDataSourceInput<T>;
  218. private _dataSource;
  219. /**
  220. * Whether to allow multiple rows per data object by evaluating which rows evaluate their 'when'
  221. * predicate to true. If `multiTemplateDataRows` is false, which is the default value, then each
  222. * dataobject will render the first row that evaluates its when predicate to true, in the order
  223. * defined in the table, or otherwise the default row which does not have a when predicate.
  224. */
  225. multiTemplateDataRows: boolean;
  226. _multiTemplateDataRows: boolean;
  227. /**
  228. * Stream containing the latest information on what rows are being displayed on screen.
  229. * Can be used by the data source to as a heuristic of what data should be provided.
  230. *
  231. * @docs-private
  232. */
  233. viewChange: BehaviorSubject<{
  234. start: number;
  235. end: number;
  236. }>;
  237. _rowOutlet: DataRowOutlet;
  238. _headerRowOutlet: HeaderRowOutlet;
  239. _footerRowOutlet: FooterRowOutlet;
  240. /**
  241. * The column definitions provided by the user that contain what the header, data, and footer
  242. * cells should render for each column.
  243. */
  244. _contentColumnDefs: QueryList<CdkColumnDef>;
  245. /** Set of data row definitions that were provided to the table as content children. */
  246. _contentRowDefs: QueryList<CdkRowDef<T>>;
  247. /** Set of header row definitions that were provided to the table as content children. */
  248. _contentHeaderRowDefs: QueryList<CdkHeaderRowDef>;
  249. /** Set of footer row definitions that were provided to the table as content children. */
  250. _contentFooterRowDefs: QueryList<CdkFooterRowDef>;
  251. constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef, role: string, _dir: Directionality, _document: any, _platform: Platform);
  252. ngOnInit(): void;
  253. ngAfterContentChecked(): void;
  254. ngOnDestroy(): void;
  255. /**
  256. * Renders rows based on the table's latest set of data, which was either provided directly as an
  257. * input or retrieved through an Observable stream (directly or from a DataSource).
  258. * Checks for differences in the data since the last diff to perform only the necessary
  259. * changes (add/remove/move rows).
  260. *
  261. * If the table's data source is a DataSource or Observable, this will be invoked automatically
  262. * each time the provided Observable stream emits a new data array. Otherwise if your data is
  263. * an array, this function will need to be called to render any changes.
  264. */
  265. renderRows(): void;
  266. /**
  267. * Sets the header row definition to be used. Overrides the header row definition gathered by
  268. * using `ContentChild`, if one exists. Sets a flag that will re-render the header row after the
  269. * table's content is checked.
  270. * @docs-private
  271. * @deprecated Use `addHeaderRowDef` and `removeHeaderRowDef` instead
  272. * @breaking-change 8.0.0
  273. */
  274. setHeaderRowDef(headerRowDef: CdkHeaderRowDef): void;
  275. /**
  276. * Sets the footer row definition to be used. Overrides the footer row definition gathered by
  277. * using `ContentChild`, if one exists. Sets a flag that will re-render the footer row after the
  278. * table's content is checked.
  279. * @docs-private
  280. * @deprecated Use `addFooterRowDef` and `removeFooterRowDef` instead
  281. * @breaking-change 8.0.0
  282. */
  283. setFooterRowDef(footerRowDef: CdkFooterRowDef): void;
  284. /** Adds a column definition that was not included as part of the content children. */
  285. addColumnDef(columnDef: CdkColumnDef): void;
  286. /** Removes a column definition that was not included as part of the content children. */
  287. removeColumnDef(columnDef: CdkColumnDef): void;
  288. /** Adds a row definition that was not included as part of the content children. */
  289. addRowDef(rowDef: CdkRowDef<T>): void;
  290. /** Removes a row definition that was not included as part of the content children. */
  291. removeRowDef(rowDef: CdkRowDef<T>): void;
  292. /** Adds a header row definition that was not included as part of the content children. */
  293. addHeaderRowDef(headerRowDef: CdkHeaderRowDef): void;
  294. /** Removes a header row definition that was not included as part of the content children. */
  295. removeHeaderRowDef(headerRowDef: CdkHeaderRowDef): void;
  296. /** Adds a footer row definition that was not included as part of the content children. */
  297. addFooterRowDef(footerRowDef: CdkFooterRowDef): void;
  298. /** Removes a footer row definition that was not included as part of the content children. */
  299. removeFooterRowDef(footerRowDef: CdkFooterRowDef): void;
  300. /**
  301. * Updates the header sticky styles. First resets all applied styles with respect to the cells
  302. * sticking to the top. Then, evaluating which cells need to be stuck to the top. This is
  303. * automatically called when the header row changes its displayed set of columns, or if its
  304. * sticky input changes. May be called manually for cases where the cell content changes outside
  305. * of these events.
  306. */
  307. updateStickyHeaderRowStyles(): void;
  308. /**
  309. * Updates the footer sticky styles. First resets all applied styles with respect to the cells
  310. * sticking to the bottom. Then, evaluating which cells need to be stuck to the bottom. This is
  311. * automatically called when the footer row changes its displayed set of columns, or if its
  312. * sticky input changes. May be called manually for cases where the cell content changes outside
  313. * of these events.
  314. */
  315. updateStickyFooterRowStyles(): void;
  316. /**
  317. * Updates the column sticky styles. First resets all applied styles with respect to the cells
  318. * sticking to the left and right. Then sticky styles are added for the left and right according
  319. * to the column definitions for each cell in each row. This is automatically called when
  320. * the data source provides a new set of data or when a column definition changes its sticky
  321. * input. May be called manually for cases where the cell content changes outside of these events.
  322. */
  323. updateStickyColumnStyles(): void;
  324. /**
  325. * Get the list of RenderRow objects to render according to the current list of data and defined
  326. * row definitions. If the previous list already contained a particular pair, it should be reused
  327. * so that the differ equates their references.
  328. */
  329. private _getAllRenderRows;
  330. /**
  331. * Gets a list of `RenderRow<T>` for the provided data object and any `CdkRowDef` objects that
  332. * should be rendered for this data. Reuses the cached RenderRow objects if they match the same
  333. * `(T, CdkRowDef)` pair.
  334. */
  335. private _getRenderRowsForData;
  336. /** Update the map containing the content's column definitions. */
  337. private _cacheColumnDefs;
  338. /** Update the list of all available row definitions that can be used. */
  339. private _cacheRowDefs;
  340. /**
  341. * Check if the header, data, or footer rows have changed what columns they want to display or
  342. * whether the sticky states have changed for the header or footer. If there is a diff, then
  343. * re-render that section.
  344. */
  345. private _renderUpdatedColumns;
  346. /**
  347. * Switch to the provided data source by resetting the data and unsubscribing from the current
  348. * render change subscription if one exists. If the data source is null, interpret this by
  349. * clearing the row outlet. Otherwise start listening for new data.
  350. */
  351. private _switchDataSource;
  352. /** Set up a subscription for the data provided by the data source. */
  353. private _observeRenderChanges;
  354. /**
  355. * Clears any existing content in the header row outlet and creates a new embedded view
  356. * in the outlet using the header row definition.
  357. */
  358. private _forceRenderHeaderRows;
  359. /**
  360. * Clears any existing content in the footer row outlet and creates a new embedded view
  361. * in the outlet using the footer row definition.
  362. */
  363. private _forceRenderFooterRows;
  364. /** Adds the sticky column styles for the rows according to the columns' stick states. */
  365. private _addStickyColumnStyles;
  366. /** Gets the list of rows that have been rendered in the row outlet. */
  367. _getRenderedRows(rowOutlet: RowOutlet): HTMLElement[];
  368. /**
  369. * Get the matching row definitions that should be used for this row data. If there is only
  370. * one row definition, it is returned. Otherwise, find the row definitions that has a when
  371. * predicate that returns true with the data. If none return true, return the default row
  372. * definition.
  373. */
  374. _getRowDefs(data: T, dataIndex: number): CdkRowDef<T>[];
  375. /**
  376. * Create the embedded view for the data row template and place it in the correct index location
  377. * within the data row view container.
  378. */
  379. private _insertRow;
  380. /**
  381. * Creates a new row template in the outlet and fills it with the set of cell templates.
  382. * Optionally takes a context to provide to the row and cells, as well as an optional index
  383. * of where to place the new row template in the outlet.
  384. */
  385. private _renderRow;
  386. /**
  387. * Updates the index-related context for each row to reflect any changes in the index of the rows,
  388. * e.g. first/last/even/odd.
  389. */
  390. private _updateRowIndexContext;
  391. /** Gets the column definitions for the provided row def. */
  392. private _getCellTemplates;
  393. /** Adds native table sections (e.g. tbody) and moves the row outlets into them. */
  394. private _applyNativeTableSections;
  395. /**
  396. * Forces a re-render of the data rows. Should be called in cases where there has been an input
  397. * change that affects the evaluation of which rows should be rendered, e.g. toggling
  398. * `multiTemplateDataRows` or adding/removing row definitions.
  399. */
  400. private _forceRenderDataRows;
  401. /**
  402. * Checks if there has been a change in sticky states since last check and applies the correct
  403. * sticky styles. Since checking resets the "dirty" state, this should only be performed once
  404. * during a change detection and after the inputs are settled (after content check).
  405. */
  406. private _checkStickyStates;
  407. /**
  408. * Creates the sticky styler that will be used for sticky rows and columns. Listens
  409. * for directionality changes and provides the latest direction to the styler. Re-applies column
  410. * stickiness when directionality changes.
  411. */
  412. private _setupStickyStyler;
  413. }
  414. export {};