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

.firebaserc

@@ -0,0 +1,5 @@
+{
+ "projects": {
+ "staging": "material2-dev"
+ }
+}

src/cdk/table/BUILD.bazel

@@ -8,6 +8,7 @@ ng_module(
  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
  module_name = "@angular/cdk/table",
  deps = [
+ "//src/cdk/bidi",
  "//src/cdk/collections",
  "//src/cdk/coercion",
  "@rxjs",
@@ -21,6 +22,7 @@ ts_library(
  srcs = glob(["**/*.spec.ts"]),
  deps = [
  ":table",
+ "//src/cdk/bidi",
  "//src/cdk/collections",
  "@rxjs",
  "@rxjs//operators"

src/cdk/table/can-stick.ts

@@ -0,0 +1,68 @@
+/**
+ * @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
+ */
+
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+
+/** @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 CanStick {
+ /** Whether sticky positioning should be applied. */
+ sticky: boolean;
+
+ /** Whether the sticky input has changed since it was last checked. */
+ _hasStickyChanged: boolean;
+
+ /** Whether the sticky value has changed since this was last called. */
+ hasStickyChanged(): boolean;
+
+ /** Resets the dirty check for cases where the sticky state has been used without checking. */
+ 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<CanStick> & T {
+ return class extends base {
+ /** Whether sticky positioning should be applied. */
+ get sticky(): boolean { return this._sticky; }
+ set sticky(v: boolean) {
+ const prevValue = this._sticky;
+ this._sticky = coerceBooleanProperty(v);
+ this._hasStickyChanged = prevValue !== this._sticky;
+ }
+ _sticky: boolean = false;
+
+ /** 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. */
+ hasStickyChanged(): 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/cell.ts

@@ -7,6 +7,8 @@
  */
 
 import {ContentChild, Directive, ElementRef, Input, TemplateRef} from '@angular/core';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {CanStick, mixinHasStickyInput} from './can-stick';
 
 /** Base interface for a cell definition. Captures a column's cell template definition. */
 export interface CellDef {
@@ -40,12 +42,20 @@ 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 {
+@Directive({
+ selector: '[cdkColumnDef]',
+ inputs: ['sticky']
+})
+export class CdkColumnDef extends _CdkColumnDefBase implements CanStick {
  /** Unique name for this column. */
  @Input('cdkColumnDef')
  get name(): string { return this._name; }
@@ -59,6 +69,20 @@ export class CdkColumnDef {
  }
  _name: string;
 
+ /**
+ * Whether this column should be sticky positioned on the end of the row. Should make sure
+ * that it mimics the `CanStick` mixin such that `_hasStickyChanged` is set to true if the value
+ * has been changed.
+ */
+ @Input('stickyEnd')
+ get stickyEnd(): boolean { return this._stickyEnd; }
+ set stickyEnd(v: boolean) {
+ const prevValue = this._stickyEnd;
+ this._stickyEnd = coerceBooleanProperty(v);
+ this._hasStickyChanged = prevValue !== this._stickyEnd;
+ }
+ _stickyEnd: boolean = false;
+
  /** @docs-private */
  @ContentChild(CdkCellDef) cell: CdkCellDef;
 

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 './can-stick';
 
 /** 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,7 @@ import {
  ViewEncapsulation,
 } from '@angular/core';
 import {CdkCellDef, CdkColumnDef} from './cell';
+import {CanStick, mixinHasStickyInput} from './can-stick';
 
 /**
  * The row template that can be used by the mat-table. Should not be used outside of the
@@ -44,8 +45,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 +61,64 @@ 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 {
+export class CdkHeaderRowDef extends _CdkHeaderRowDefBase implements CanStick, OnChanges {
  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.headerCell.template;
+ // Prerender fails to recognize that ngOnChanges in a part of this class through inheritance.
+ // Explicitly define it so that the method is called as part of the Angular lifecycle.
+ ngOnChanges(changes: SimpleChanges): void {
+ super.ngOnChanges(changes);
  }
 }
 
+// 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 {
+export class CdkFooterRowDef extends _CdkFooterRowDefBase implements CanStick, OnChanges {
  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.footerCell.template;
+ // Prerender fails to recognize that ngOnChanges in a part of this class through inheritance.
+ // Explicitly define it so that the method is called as part of the Angular lifecycle.
+ ngOnChanges(changes: SimpleChanges): void {
+ super.ngOnChanges(changes);
  }
 }
 
@@ -124,11 +145,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 */