feat(table): support sticky headers, footers, and columns

Author: andrewseguin

src/cdk/table/cell.ts

@@ -7,6 +7,8 @@
  */
 
 import {ContentChild, Directive, ElementRef, Input, TemplateRef} from '@angular/core';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {HasStickyState, mixinHasStickyInput} from './has-sticky-state';
 
 /** Base interface for a cell definition. Captures a column's cell template definition. */
 export interface CellDef {
@@ -40,12 +42,17 @@ export class CdkFooterCellDef implements CellDef {
   constructor(/** @docs-private */ public template: TemplateRef<any>) { }
 }
 
+// Boilerplate for applying mixins to CdkColumnDef.
+/** @docs-private */
+export class CdkColumnDefBase {}
+export const _CdkColumnDefBase = mixinHasStickyInput(CdkColumnDefBase);
+
 /**
  * Column definition for the CDK table.
  * Defines a set of cells available for a table column.
  */
 @Directive({selector: '[cdkColumnDef]'})
-export class CdkColumnDef {
+export class CdkColumnDef extends _CdkColumnDefBase implements HasStickyState {
   /** Unique name for this column. */
   @Input('cdkColumnDef')
   get name(): string { return this._name; }
@@ -59,6 +66,26 @@ export class CdkColumnDef {
   }
   _name: string;
 
+  /** Whether this column should be sticky positioned on the left of the row */
+  @Input('stickyLeft')
+  get stickyLeft(): boolean { return this._stickyLeft; }
+  set stickyLeft(v: boolean) {
+    const prevValue = this._stickyLeft;
+    this._stickyLeft = coerceBooleanProperty(v);
+    this._hasStickyChanged = prevValue !== this._stickyLeft;
+  }
+  _stickyLeft: boolean = false;
+
+  /** Whether this column should be sticky positioned on the right of the right */
+  @Input('stickyRight')
+  get stickyRight(): boolean { return this._stickyRight; }
+  set stickyRight(v: boolean) {
+    const prevValue = this._stickyRight;
+    this._stickyRight = coerceBooleanProperty(v);
+    this._hasStickyChanged = prevValue !== this._stickyRight;
+  }
+  _stickyRight: boolean = false;
+
   /** @docs-private */
   @ContentChild(CdkCellDef) cell: CdkCellDef;
 

src/cdk/table/has-sticky-state.ts

@@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+/** @docs-private */
+export type Constructor<T> = new(...args: any[]) => T;
+
+/**
+ * Interface for a mixin to provide a directive with a function that checks if the sticky input has
+ * been changed since the last time the function was called. Essentially adds a dirty-check to the
+ * sticky value.
+ * @docs-private
+ */
+export interface HasStickyState {
+  /** State of whether the sticky input has changed since it was last checked. */
+  _hasStickyChanged: boolean;
+
+  checkStickyChanged(): boolean;
+
+  resetStickyChanged(): void;
+}
+
+/**
+ * Mixin to provide a directive with a function that checks if the sticky input has been
+ * changed since the last time the function was called. Essentially adds a dirty-check to the
+ * sticky value.
+ */
+export function mixinHasStickyInput<T extends Constructor<{}>>(base: T):
+    Constructor<HasStickyState> & T {
+  return class extends base {
+    /** State of whether the sticky input has changed since it was last checked. */
+    _hasStickyChanged: boolean = false;
+
+    /** Whether the sticky value has changed since this was last called. */
+    checkStickyChanged(): boolean {
+      const hasStickyChanged = this._hasStickyChanged;
+      this._hasStickyChanged = false;
+      return hasStickyChanged;
+    }
+
+    /** Resets the dirty check for cases where the sticky state has been used without checking. */
+    resetStickyChanged() {
+      this._hasStickyChanged = false;
+    }
+
+    constructor(...args: any[]) { super(...args); }
+  };
+}

src/cdk/table/public-api.ts

@@ -10,6 +10,8 @@ export * from './table';
 export * from './cell';
 export * from './row';
 export * from './table-module';
+export * from './sticky-styler';
+export * from './has-sticky-state';
 
 /** Re-export DataSource for a more intuitive experience for users of just the table. */
 export {DataSource} from '@angular/cdk/collections';

src/cdk/table/row.ts

@@ -20,6 +20,8 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {CdkCellDef, CdkColumnDef} from './cell';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {HasStickyState, mixinHasStickyInput} from './has-sticky-state';
 
 /**
  * The row template that can be used by the mat-table. Should not be used outside of the
@@ -44,8 +46,8 @@ export abstract class BaseRowDef implements OnChanges {
   ngOnChanges(changes: SimpleChanges): void {
     // Create a new columns differ if one does not yet exist. Initialize it based on initial value
     // of the columns property or an empty array if none is provided.
-    const columns = changes['columns'].currentValue || [];
     if (!this._columnsDiffer) {
+      const columns = (changes['columns'] && changes['columns'].currentValue) || [];
       this._columnsDiffer = this._differs.find(columns).create();
       this._columnsDiffer.diff(columns);
     }
@@ -60,44 +62,68 @@ export abstract class BaseRowDef implements OnChanges {
   }
 
   /** Gets this row def's relevant cell template from the provided column def. */
-  abstract extractCellTemplate(column: CdkColumnDef): TemplateRef<any>;
+  extractCellTemplate(column: CdkColumnDef): TemplateRef<any> {
+    if (this instanceof CdkHeaderRowDef) {
+      return column.headerCell.template;
+    } if (this instanceof CdkFooterRowDef) {
+      return column.footerCell.template;
+    } else {
+      return column.cell.template;
+    }
+  }
 }
 
+// Boilerplate for applying mixins to CdkHeaderRowDef.
+/** @docs-private */
+export class CdkHeaderRowDefBase extends BaseRowDef {}
+export const _CdkHeaderRowDefBase = mixinHasStickyInput(CdkHeaderRowDefBase);
+
 /**
  * Header row definition for the CDK table.
  * Captures the header row's template and other header properties such as the columns to display.
  */
 @Directive({
   selector: '[cdkHeaderRowDef]',
-  inputs: ['columns: cdkHeaderRowDef'],
+  inputs: ['columns: cdkHeaderRowDef', 'sticky: cdkHeaderRowDefSticky'],
 })
-export class CdkHeaderRowDef extends BaseRowDef {
-  constructor(template: TemplateRef<any>, _differs: IterableDiffers) {
-    super(template, _differs);
+export class CdkHeaderRowDef extends _CdkHeaderRowDefBase implements HasStickyState {
+  set sticky(v: boolean) {
+    const prevValue = this._sticky;
+    this._sticky = coerceBooleanProperty(v);
+    this._hasStickyChanged = prevValue !== this._sticky;
   }
+  get sticky(): boolean { return this._sticky; }
+  _sticky: boolean;
 
-  /** Gets this row def's relevant cell template from the provided column def. */
-  extractCellTemplate(column: CdkColumnDef): TemplateRef<any> {
-    return column.headerCell.template;
+  constructor(template: TemplateRef<any>, _differs: IterableDiffers) {
+    super(template, _differs);
   }
 }
 
+// Boilerplate for applying mixins to CdkFooterRowDef.
+/** @docs-private */
+export class CdkFooterRowDefBase extends BaseRowDef {}
+export const _CdkFooterRowDefBase = mixinHasStickyInput(CdkFooterRowDefBase);
+
 /**
  * Footer row definition for the CDK table.
  * Captures the footer row's template and other footer properties such as the columns to display.
  */
 @Directive({
   selector: '[cdkFooterRowDef]',
-  inputs: ['columns: cdkFooterRowDef'],
+  inputs: ['columns: cdkFooterRowDef', 'sticky: cdkFooterRowDefSticky'],
 })
-export class CdkFooterRowDef extends BaseRowDef {
-  constructor(template: TemplateRef<any>, _differs: IterableDiffers) {
-    super(template, _differs);
+export class CdkFooterRowDef extends _CdkFooterRowDefBase implements HasStickyState {
+  set sticky(v: boolean) {
+    const prevValue = this._sticky;
+    this._sticky = coerceBooleanProperty(v);
+    this._hasStickyChanged = prevValue !== this._sticky;
   }
+  get sticky(): boolean { return this._sticky; }
+  _sticky: boolean;
 
-  /** Gets this row def's relevant cell template from the provided column def. */
-  extractCellTemplate(column: CdkColumnDef): TemplateRef<any> {
-    return column.footerCell.template;
+  constructor(template: TemplateRef<any>, _differs: IterableDiffers) {
+    super(template, _differs);
   }
 }
 
@@ -124,11 +150,6 @@ export class CdkRowDef<T> extends BaseRowDef {
   constructor(template: TemplateRef<any>, _differs: IterableDiffers) {
     super(template, _differs);
   }
-
-  /** Gets this row def's relevant cell template from the provided column def. */
-  extractCellTemplate(column: CdkColumnDef): TemplateRef<any> {
-    return column.cell.template;
-  }
 }
 
 /** Context provided to the row cells when `multiTemplateDataRows` is false */