feat(cdk/table): add directive to enable recycle view repeater (angul…

…ar#21508)

src/cdk/table/table-module.ts

@@ -7,7 +7,14 @@
  */
 
 import {NgModule} from '@angular/core';
-import {HeaderRowOutlet, DataRowOutlet, CdkTable, FooterRowOutlet, NoDataRowOutlet} from './table';
+import {
+  HeaderRowOutlet,
+  DataRowOutlet,
+  CdkTable,
+  CdkRecycleRows,
+  FooterRowOutlet,
+  NoDataRowOutlet,
+} from './table';
 import {
   CdkCellOutlet, CdkFooterRow, CdkFooterRowDef, CdkHeaderRow, CdkHeaderRowDef, CdkRow,
   CdkRowDef,
@@ -41,6 +48,7 @@ const EXPORTED_DECLARATIONS = [
   FooterRowOutlet,
   CdkTextColumn,
   CdkNoDataRow,
+  CdkRecycleRows,
   NoDataRowOutlet,
 ];
 

src/cdk/table/table.ts

@@ -12,6 +12,7 @@ import {
   CollectionViewer,
   DataSource,
   _DisposeViewRepeaterStrategy,
+  _RecycleViewRepeaterStrategy,
   isDataSource,
   _VIEW_REPEATER_STRATEGY,
   _ViewRepeater,
@@ -82,6 +83,19 @@ import {
 import {STICKY_POSITIONING_LISTENER, StickyPositioningListener} from './sticky-position-listener';
 import {CDK_TABLE} from './tokens';
 
+
+/**
+ * Enables the recycle view repeater strategy, which reduces rendering latency. Not compatible with
+ * tables that animate rows.
+ */
+@Directive({
+  selector: 'cdk-table[recycleRows], table[cdk-table][recycleRows]',
+  providers: [
+    {provide: _VIEW_REPEATER_STRATEGY, useClass: _RecycleViewRepeaterStrategy},
+  ],
+})
+export class CdkRecycleRows {}
+
 /** Interface used to provide an outlet for rows to be inserted into. */
 export interface RowOutlet {
   viewContainer: ViewContainerRef;

src/components-examples/cdk/table/cdk-table-recycle-rows/cdk-table-recycle-rows-example.css

@@ -0,0 +1,7 @@
+.example-table {
+  width: 100%;
+}
+
+.example-row {
+  text-align: left;
+}

src/components-examples/cdk/table/cdk-table-recycle-rows/cdk-table-recycle-rows-example.html

@@ -0,0 +1,28 @@
+<table class="example-table" cdk-table recycleRows [dataSource]="dataSource">
+  <!-- Position Column -->
+  <ng-container cdkColumnDef="position">
+    <th class="example-row" cdk-header-cell *cdkHeaderCellDef> No. </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container cdkColumnDef="name">
+    <th class="example-row" cdk-header-cell *cdkHeaderCellDef> Name </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container cdkColumnDef="weight">
+    <th class="example-row" cdk-header-cell *cdkHeaderCellDef> Weight </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container cdkColumnDef="symbol">
+    <th class="example-row" cdk-header-cell *cdkHeaderCellDef> Symbol </th>
+    <td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
+
+  <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
+  <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
+</table>

src/components-examples/cdk/table/cdk-table-recycle-rows/cdk-table-recycle-rows-example.ts

@@ -0,0 +1,55 @@
+import {DataSource} from '@angular/cdk/collections';
+import {Component} from '@angular/core';
+import {BehaviorSubject, Observable} from 'rxjs';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
+
+/**
+ * @title Table that uses the recycle view repeater strategy.
+ */
+@Component({
+  selector: 'cdk-table-recycle-rows-example',
+  styleUrls: ['cdk-table-recycle-rows-example.css'],
+  templateUrl: 'cdk-table-recycle-rows-example.html',
+})
+export class CdkTableRecycleRowsExample {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = new ExampleDataSource();
+}
+
+/**
+ * Data source to provide what data should be rendered in the table. Note that the data source
+ * can retrieve its data in any way. In this case, the data source is provided a reference
+ * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
+ * the underlying data. Instead, it only needs to take the data and send the table exactly what
+ * should be rendered.
+ */
+export class ExampleDataSource extends DataSource<PeriodicElement> {
+  /** Stream of data that is provided to the table. */
+  data = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
+
+  /** Connect function called by the table to retrieve one stream containing the data to render. */
+  connect(): Observable<PeriodicElement[]> {
+    return this.data;
+  }
+
+  disconnect() {}
+}

src/components-examples/cdk/table/index.ts

@@ -5,17 +5,19 @@ import {CdkTableBasicExample} from './cdk-table-basic/cdk-table-basic-example';
 import {
   CdkTableFixedLayoutExample,
 } from './cdk-table-fixed-layout/cdk-table-fixed-layout-example';
-
+import {CdkTableRecycleRowsExample} from './cdk-table-recycle-rows/cdk-table-recycle-rows-example';
 export {
   CdkTableBasicExample,
   CdkTableFlexBasicExample,
   CdkTableFixedLayoutExample,
+  CdkTableRecycleRowsExample,
 };
 
 const EXAMPLES = [
   CdkTableBasicExample,
   CdkTableFlexBasicExample,
   CdkTableFixedLayoutExample,
+  CdkTableRecycleRowsExample,
 ];
 
 @NgModule({

src/components-examples/material/table/index.ts

@@ -40,6 +40,7 @@ import {
 import {TableTextColumnExample} from './table-text-column/table-text-column-example';
 import {TableWrappedExample, WrapperTable} from './table-wrapped/table-wrapped-example';
 import {TableReorderableExample} from './table-reorderable/table-reorderable-example';
+import {TableRecycleRowsExample} from './table-recycle-rows/table-recycle-rows-example';
 import {TableHarnessExample} from './table-harness/table-harness-example';
 
 export {
@@ -54,7 +55,8 @@ export {
   TableStickyFooterExample,   TableStickyHeaderExample,
   TableTextColumnExample,     TableTextColumnAdvancedExample,
   TableWrappedExample,        WrapperTable,
-  TableReorderableExample,    TableHarnessExample,
+  TableReorderableExample,    TableRecycleRowsExample,
+  TableHarnessExample,
 };
 
 const EXAMPLES = [
@@ -69,7 +71,8 @@ const EXAMPLES = [
   TableStickyFooterExample,   TableStickyHeaderExample,
   TableTextColumnExample,     TableTextColumnAdvancedExample,
   TableWrappedExample,        WrapperTable,
-  TableReorderableExample,    TableHarnessExample,
+  TableReorderableExample,    TableRecycleRowsExample,
+  TableHarnessExample,
 ];
 
 @NgModule({

src/components-examples/material/table/table-recycle-rows/table-recycle-rows-example.css

@@ -0,0 +1,3 @@
+.example-table {
+  width: 100%;
+}

src/components-examples/material/table/table-recycle-rows/table-recycle-rows-example.html

@@ -0,0 +1,29 @@
+<table class="example-table mat-elevation-z8" mat-table recycleRows [dataSource]="dataSource">
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef> Weight </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef> Symbol </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
+

src/components-examples/material/table/table-recycle-rows/table-recycle-rows-example.ts

@@ -0,0 +1,34 @@
+import {Component} from '@angular/core';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
+
+/**
+ * @title Table that uses the recycle view repeater strategy.
+ */
+@Component({
+  selector: 'table-recycle-rows-example',
+  styleUrls: ['table-recycle-rows-example.css'],
+  templateUrl: 'table-recycle-rows-example.html',
+})
+export class TableRecycleRowsExample {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+}

src/dev-app/table/table-demo.html

@@ -1,6 +1,9 @@
 <h3>Cdk table basic</h3>
 <cdk-table-basic-example></cdk-table-basic-example>
 
+<h3>Cdk table with recycled rows</h3>
+<cdk-table-recycle-rows-example></cdk-table-recycle-rows-example>
+
 <h3>Cdk table basic with fixed column widths</h3>
 <cdk-table-fixed-layout-example></cdk-table-fixed-layout-example>
 
@@ -10,6 +13,9 @@ <h3>Cdk table basic flex</h3>
 <h3>Table basic</h3>
 <table-basic-example></table-basic-example>
 
+<h3>Table basic with recycled rows</h3>
+<table-recycle-rows-example></table-recycle-rows-example>
+
 <h3>Table basic flex</h3>
 <table-flex-basic-example></table-flex-basic-example>
 

src/material-experimental/mdc-table/module.ts

@@ -8,7 +8,7 @@
 
 import {NgModule} from '@angular/core';
 import {MatCommonModule} from '@angular/material-experimental/mdc-core';
-import {MatTable} from './table';
+import {MatRecycleRows, MatTable} from './table';
 import {CdkTableModule} from '@angular/cdk/table';
 import {
   MatCell,
@@ -33,6 +33,7 @@ import {MatTextColumn} from './text-column';
 const EXPORTED_DECLARATIONS = [
   // Table
   MatTable,
+  MatRecycleRows,
 
   // Template defs
   MatHeaderCellDef,

src/material-experimental/mdc-table/table.ts

@@ -6,14 +6,36 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Directive,
+  OnInit,
+  ViewEncapsulation
+} from '@angular/core';
 import {
   CDK_TABLE_TEMPLATE,
   CdkTable,
   _CoalescedStyleScheduler,
   _COALESCED_STYLE_SCHEDULER,
 } from '@angular/cdk/table';
-import {_DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY} from '@angular/cdk/collections';
+import {
+  _DisposeViewRepeaterStrategy,
+  _RecycleViewRepeaterStrategy,
+  _VIEW_REPEATER_STRATEGY
+} from '@angular/cdk/collections';
+
+/**
+ * Enables the recycle view repeater strategy, which reduces rendering latency. Not compatible with
+ * tables that animate rows.
+ */
+@Directive({
+  selector: 'mat-table[recycleRows], table[mat-table][recycleRows]',
+  providers: [
+    {provide: _VIEW_REPEATER_STRATEGY, useClass: _RecycleViewRepeaterStrategy},
+  ],
+})
+export class MatRecycleRows {}
 
 @Component({
   selector: 'mat-table, table[mat-table]',

src/material/table/table-module.ts

@@ -7,7 +7,7 @@
  */
 
 import {NgModule} from '@angular/core';
-import {MatTable} from './table';
+import {MatRecycleRows, MatTable} from './table';
 import {CdkTableModule} from '@angular/cdk/table';
 import {
   MatCell,
@@ -16,7 +16,7 @@ import {
   MatFooterCell,
   MatFooterCellDef,
   MatHeaderCell,
-  MatHeaderCellDef
+  MatHeaderCellDef,
 } from './cell';
 import {
   MatFooterRow,
@@ -33,6 +33,7 @@ import {MatCommonModule} from '@angular/material/core';
 const EXPORTED_DECLARATIONS = [
   // Table
   MatTable,
+  MatRecycleRows,
 
   // Template defs
   MatHeaderCellDef,

src/material/table/table.ts

@@ -12,8 +12,24 @@ import {
   CDK_TABLE,
   _CoalescedStyleScheduler, _COALESCED_STYLE_SCHEDULER
 } from '@angular/cdk/table';
-import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {_DisposeViewRepeaterStrategy, _VIEW_REPEATER_STRATEGY} from '@angular/cdk/collections';
+import {ChangeDetectionStrategy, Component, Directive, ViewEncapsulation} from '@angular/core';
+import {
+  _DisposeViewRepeaterStrategy,
+  _RecycleViewRepeaterStrategy,
+  _VIEW_REPEATER_STRATEGY
+} from '@angular/cdk/collections';
+
+/**
+ * Enables the recycle view repeater strategy, which reduces rendering latency. Not compatible with
+ * tables that animate rows.
+ */
+@Directive({
+  selector: 'mat-table[recycleRows], table[mat-table][recycleRows]',
+  providers: [
+    {provide: _VIEW_REPEATER_STRATEGY, useClass: _RecycleViewRepeaterStrategy},
+  ],
+})
+export class MatRecycleRows {}
 
 /**
  * Wrapper for the CdkTable with Material design styles.