diff --git a/test/benchmarks/mdc/table/BUILD.bazel b/test/benchmarks/mdc/table/BUILD.bazel
new file mode 100644
index 000000000000..7187033cb094
--- /dev/null
+++ b/test/benchmarks/mdc/table/BUILD.bazel
@@ -0,0 +1,23 @@
+load("@npm_angular_dev_infra_private//benchmark/component_benchmark:component_benchmark.bzl", "component_benchmark")
+
+component_benchmark(
+ name = "benchmark",
+ driver = ":table.perf-spec.ts",
+ driver_deps = [
+ "@npm//@angular/dev-infra-private",
+ "@npm//protractor",
+ "@npm//@types/jasmine",
+ ],
+ ng_deps = [
+ "@npm//@angular/core",
+ "@npm//@angular/platform-browser",
+ "//src/material-experimental/mdc-table",
+ ],
+ ng_srcs = [
+ ":app.module.ts",
+ ":basic-table.ts",
+ ":fake-table-data.ts",
+ ],
+ prefix = "",
+ styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"],
+)
diff --git a/test/benchmarks/mdc/table/app.module.html b/test/benchmarks/mdc/table/app.module.html
new file mode 100644
index 000000000000..6ec5e9e89a03
--- /dev/null
+++ b/test/benchmarks/mdc/table/app.module.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/benchmarks/mdc/table/app.module.ts b/test/benchmarks/mdc/table/app.module.ts
new file mode 100644
index 000000000000..558ee81517c4
--- /dev/null
+++ b/test/benchmarks/mdc/table/app.module.ts
@@ -0,0 +1,65 @@
+/**
+ * @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 {Component, NgModule, ViewEncapsulation} from '@angular/core';
+import {MatTableModule} from '@angular/material-experimental/mdc-table';
+import {BrowserModule} from '@angular/platform-browser';
+import {BasicTable} from './basic-table';
+import {
+ fiveCols, tenCols, twentyCols,
+ tenRows, oneHundredRows, oneThousandRows,
+} from './fake-table-data';
+
+/** component: mdc-table */
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.module.html',
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'],
+})
+export class TableBenchmarkApp {
+ fiveCols = fiveCols;
+ tenCols = tenCols;
+ twentyCols = twentyCols;
+
+ tenRows = tenRows;
+ oneHundredRows = oneHundredRows;
+ oneThousandRows = oneThousandRows;
+
+ isTenRowsFiveColsVisible = false;
+ isOneHundredRowsFiveColsVisible = false;
+ isOneThousandRowsFiveColsVisible = false;
+ isTenRowsTenColsVisible = false;
+ isTenRowsTwentyColsVisible = false;
+
+ hide() {
+ this.isTenRowsFiveColsVisible = false;
+ this.isOneHundredRowsFiveColsVisible = false;
+ this.isOneThousandRowsFiveColsVisible = false;
+ this.isTenRowsTenColsVisible = false;
+ this.isTenRowsTwentyColsVisible = false;
+ }
+
+ showTenRowsFiveCols() { this.isTenRowsFiveColsVisible = true; }
+ showOneHundredRowsFiveCols() { this.isOneHundredRowsFiveColsVisible = true; }
+ showOneThousandRowsFiveCols() { this.isOneThousandRowsFiveColsVisible = true; }
+ showTenRowsTenCols() { this.isTenRowsTenColsVisible = true; }
+ showTenRowsTwentyCols() { this.isTenRowsTwentyColsVisible = true; }
+}
+
+
+@NgModule({
+ declarations: [BasicTable, TableBenchmarkApp],
+ imports: [
+ BrowserModule,
+ MatTableModule,
+ ],
+ bootstrap: [TableBenchmarkApp],
+})
+export class AppModule {}
diff --git a/test/benchmarks/mdc/table/basic-table.ts b/test/benchmarks/mdc/table/basic-table.ts
new file mode 100644
index 000000000000..8484a9fae5c7
--- /dev/null
+++ b/test/benchmarks/mdc/table/basic-table.ts
@@ -0,0 +1,125 @@
+/**
+ * @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 {Component, Input} from '@angular/core';
+
+@Component({
+ selector: 'basic-table',
+ template: `
+
+
+
+ A |
+ {{cell.a}} |
+
+
+
+ B |
+ {{cell.b}} |
+
+
+
+ C |
+ {{cell.c}} |
+
+
+
+ D |
+ {{cell.d}} |
+
+
+
+ E |
+ {{cell.e}} |
+
+
+
+ F |
+ {{cell.f}} |
+
+
+
+ G |
+ {{cell.g}} |
+
+
+
+ H |
+ {{cell.h}} |
+
+
+
+ I |
+ {{cell.i}} |
+
+
+
+ J |
+ {{cell.j}} |
+
+
+
+ K |
+ {{cell.k}} |
+
+
+
+ L |
+ {{cell.l}} |
+
+
+
+ M |
+ {{cell.m}} |
+
+
+
+ N |
+ {{cell.n}} |
+
+
+
+ O |
+ {{cell.o}} |
+
+
+
+ P |
+ {{cell.p}} |
+
+
+
+ Q |
+ {{cell.q}} |
+
+
+
+ R |
+ {{cell.r}} |
+
+
+
+ S |
+ {{cell.s}} |
+
+
+
+ T |
+ {{cell.t}} |
+
+
+
+
+
+ `,
+ styles: ['table { width: 100% }', 'th.mat-header-cell, td.mat-cell { padding: 0px 20px }'],
+})
+export class BasicTable {
+ @Input() cols: string[];
+ @Input() rows: Record[];
+}
diff --git a/test/benchmarks/mdc/table/fake-table-data.ts b/test/benchmarks/mdc/table/fake-table-data.ts
new file mode 100644
index 000000000000..15ebcd80c18a
--- /dev/null
+++ b/test/benchmarks/mdc/table/fake-table-data.ts
@@ -0,0 +1,31 @@
+/**
+ * @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
+ */
+
+function numToChar(num: number): string {
+ return String.fromCharCode('a'.charCodeAt(0) + num);
+}
+
+function generateTableColumnNames(numColumns: number) {
+ return Array(numColumns).fill(null).map((_, index) => numToChar(index));
+}
+
+function generateTableData(numRows: number, cols: string[]): Record[] {
+ return Array(numRows).fill(null).map((_, index) => generateTableDataRow(cols, `${index + 1}`));
+}
+
+function generateTableDataRow(cols: string[], value: string): Record {
+ return cols.reduce((rowData, columnName) => ({...rowData, [columnName]: value}), {});
+}
+
+export const fiveCols = generateTableColumnNames(5);
+export const tenCols = generateTableColumnNames(10);
+export const twentyCols = generateTableColumnNames(20);
+
+export const tenRows = generateTableData(10, twentyCols);
+export const oneHundredRows = generateTableData(100, twentyCols);
+export const oneThousandRows = generateTableData(1000, twentyCols);
diff --git a/test/benchmarks/mdc/table/table.perf-spec.ts b/test/benchmarks/mdc/table/table.perf-spec.ts
new file mode 100644
index 000000000000..a129a42b7a21
--- /dev/null
+++ b/test/benchmarks/mdc/table/table.perf-spec.ts
@@ -0,0 +1,47 @@
+/**
+ * @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 {$, browser} from 'protractor';
+import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities';
+
+function runTableRenderBenchmark(testId: string, buttonId: string) {
+ return runBenchmark({
+ id: testId,
+ url: '',
+ ignoreBrowserSynchronization: true,
+ params: [],
+ prepare: async () => await $('#hide').click(),
+ work: async () => await $(buttonId).click(),
+ });
+}
+
+describe('table performance benchmarks', () => {
+ beforeAll(() => {
+ browser.rootEl = '#root';
+ });
+
+ it('renders 10 rows with 5 cols', async() => {
+ await runTableRenderBenchmark('table-render-10-rows-5-cols', '#show-10-rows-5-cols');
+ });
+
+ it('renders 100 rows with 5 cols', async() => {
+ await runTableRenderBenchmark('table-render-100-rows-5-cols', '#show-100-rows-5-cols');
+ });
+
+ it('renders 1000 rows with 5 cols', async() => {
+ await runTableRenderBenchmark('table-render-1000-rows-5-cols', '#show-1000-rows-5-cols');
+ });
+
+ it('renders 10 rows with 10 cols', async() => {
+ await runTableRenderBenchmark('table-render-10-rows-10-cols', '#show-10-rows-10-cols');
+ });
+
+ it('renders 10 rows with 20 cols', async() => {
+ await runTableRenderBenchmark('table-render-10-rows-20-cols', '#show-10-rows-20-cols');
+ });
+});