fix(material-experimental/mdc-table): match legacy examples

src/components-examples/material-experimental/mdc-table/BUILD.bazel

@@ -0,0 +1,64 @@
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "mdc-table",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    module_name = "@angular/components-examples/material-experimental/mdc-table",
+    deps = [
+        "//src/cdk/drag-drop",
+        "//src/cdk/table",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material-experimental/mdc-table",
+        "//src/material/button",
+        "//src/material/button-toggle",
+        "//src/material/checkbox",
+        "//src/material/core",
+        "//src/material/icon",
+        "//src/material/input",
+        "//src/material/paginator",
+        "//src/material/progress-spinner",
+        "//src/material/sort",
+        "//src/material/table/testing",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
+    ]),
+)
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":mdc-table",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/table",
+        "//src/material/table/testing",
+        "@npm//@angular/platform-browser-dynamic",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    exclude_init_script = True,
+    deps = [":unit_tests_lib"],
+)

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

@@ -0,0 +1,148 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {MatRippleModule} from '@angular/material/core';
+import {MatButtonModule} from '@angular/material/button';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatPaginatorModule} from '@angular/material/paginator';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatSortModule} from '@angular/material/sort';
+import {MatTableModule} from '@angular/material-experimental/mdc-table';
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {CdkTableModule} from '@angular/cdk/table';
+
+import {TableFlexBasicExample} from './table-flex-basic/table-flex-basic-example';
+import {TableBasicExample} from './table-basic/table-basic-example';
+import {TableDynamicColumnsExample} from './table-dynamic-columns/table-dynamic-columns-example';
+import {TableExpandableRowsExample} from './table-expandable-rows/table-expandable-rows-example';
+import {TableFilteringExample} from './table-filtering/table-filtering-example';
+import {TableFooterRowExample} from './table-footer-row/table-footer-row-example';
+import {TableHttpExample} from './table-http/table-http-example';
+import {
+  TableMultipleHeaderFooterExample
+} from './table-multiple-header-footer/table-multiple-header-footer-example';
+import {TableOverviewExample} from './table-overview/table-overview-example';
+import {TablePaginationExample} from './table-pagination/table-pagination-example';
+import {TableRowContextExample} from './table-row-context/table-row-context-example';
+import {TableSelectionExample} from './table-selection/table-selection-example';
+import {TableSortingExample} from './table-sorting/table-sorting-example';
+import {TableStickyColumnsExample} from './table-sticky-columns/table-sticky-columns-example';
+import {
+  TableStickyComplexFlexExample
+} from './table-sticky-complex-flex/table-sticky-complex-flex-example';
+import {TableStickyComplexExample} from './table-sticky-complex/table-sticky-complex-example';
+import {TableStickyFooterExample} from './table-sticky-footer/table-sticky-footer-example';
+import {TableStickyHeaderExample} from './table-sticky-header/table-sticky-header-example';
+import {
+  TableTextColumnAdvancedExample
+} from './table-text-column-advanced/table-text-column-advanced-example';
+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';
+import {TableWithRipplesExample} from './table-with-ripples/table-with-ripples-example';
+import {TableColumnStylingExample} from './table-column-styling/table-column-styling-example';
+import {TableRowBindingExample} from './table-row-binding/table-row-binding-example';
+import {
+  TableDynamicArrayDataExample
+} from './table-dynamic-array-data/table-dynamic-array-data-example';
+import {
+  TableDynamicObservableDataExample
+} from './table-dynamic-observable-data/table-dynamic-observable-data-example';
+import {
+  TableGeneratedColumnsExample
+} from './table-generated-columns/table-generated-columns-example';
+
+export {
+  TableBasicExample,
+  TableColumnStylingExample,
+  TableDynamicArrayDataExample,
+  TableDynamicColumnsExample,
+  TableDynamicObservableDataExample,
+  TableExpandableRowsExample,
+  TableFilteringExample,
+  TableFlexBasicExample,
+  TableFooterRowExample,
+  TableGeneratedColumnsExample,
+  TableHarnessExample,
+  TableHttpExample,
+  TableMultipleHeaderFooterExample,
+  TableOverviewExample,
+  TablePaginationExample,
+  TableRecycleRowsExample,
+  TableReorderableExample,
+  TableRowBindingExample,
+  TableRowContextExample,
+  TableSelectionExample,
+  TableSortingExample,
+  TableStickyColumnsExample,
+  TableStickyComplexExample,
+  TableStickyComplexFlexExample,
+  TableStickyFooterExample,
+  TableStickyHeaderExample,
+  TableTextColumnAdvancedExample,
+  TableTextColumnExample,
+  TableWithRipplesExample,
+  TableWrappedExample,
+  WrapperTable,
+};
+
+const EXAMPLES = [
+  TableBasicExample,
+  TableColumnStylingExample,
+  TableDynamicArrayDataExample,
+  TableDynamicColumnsExample,
+  TableDynamicObservableDataExample,
+  TableExpandableRowsExample,
+  TableFilteringExample,
+  TableFlexBasicExample,
+  TableFooterRowExample,
+  TableGeneratedColumnsExample,
+  TableHarnessExample,
+  TableHttpExample,
+  TableMultipleHeaderFooterExample,
+  TableOverviewExample,
+  TablePaginationExample,
+  TableRecycleRowsExample,
+  TableReorderableExample,
+  TableRowBindingExample,
+  TableRowContextExample,
+  TableSelectionExample,
+  TableSortingExample,
+  TableStickyColumnsExample,
+  TableStickyComplexExample,
+  TableStickyComplexFlexExample,
+  TableStickyFooterExample,
+  TableStickyHeaderExample,
+  TableTextColumnAdvancedExample,
+  TableTextColumnExample,
+  TableWithRipplesExample,
+  TableWrappedExample,
+  WrapperTable,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCheckboxModule,
+    MatIconModule,
+    MatInputModule,
+    MatPaginatorModule,
+    MatProgressSpinnerModule,
+    MatRippleModule,
+    MatSortModule,
+    MatTableModule,
+    CdkTableModule,
+    DragDropModule,
+  ],
+  declarations: EXAMPLES,
+  exports: EXAMPLES,
+  entryComponents: EXAMPLES,
+})
+export class MdcTableExamplesModule {
+}

src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.css

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

src/components-examples/material-experimental/mdc-table/table-basic/table-basic-example.html

@@ -0,0 +1,33 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+
+  <!--- Note that these columns can be defined in any order.
+        The actual rendered columns are set as a property on the row definition" -->
+
+  <!-- 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-experimental/mdc-table/table-basic/table-basic-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 Basic use of `<table mat-table>`
+ */
+@Component({
+  selector: 'table-basic-example',
+  styleUrls: ['table-basic-example.css'],
+  templateUrl: 'table-basic-example.html',
+})
+export class TableBasicExample {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+}

src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.css

@@ -0,0 +1,25 @@
+.demo-table {
+  width: 100%;
+}
+
+.mat-column-demo-position {
+  width: 32px;
+  border-right: 1px solid currentColor;
+  padding-right: 24px;
+  text-align: center;
+}
+
+.mat-column-demo-name {
+  padding-left: 16px;
+  font-size: 20px;
+}
+
+.mat-column-demo-weight {
+  font-style: italic;
+}
+
+.mat-column-demo-symbol {
+  width: 32px;
+  text-align: center;
+  font-weight: bold;
+}

src/components-examples/material-experimental/mdc-table/table-column-styling/table-column-styling-example.html

@@ -0,0 +1,29 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
+  <!-- Position Column -->
+  <ng-container matColumnDef="demo-position">
+    <th mat-header-cell *matHeaderCellDef> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="demo-name">
+    <th mat-header-cell *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container matColumnDef="demo-weight">
+    <th mat-header-cell *matHeaderCellDef> Weight </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="demo-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-experimental/mdc-table/table-column-styling/table-column-styling-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 Styling columns using their auto-generated column names
+ */
+@Component({
+  selector: 'table-column-styling-example',
+  styleUrls: ['table-column-styling-example.css'],
+  templateUrl: 'table-column-styling-example.html',
+})
+export class TableColumnStylingExample {
+  displayedColumns: string[] = ['demo-position', 'demo-name', 'demo-weight', 'demo-symbol'];
+  dataSource = ELEMENT_DATA;
+}

src/components-examples/material-experimental/mdc-table/table-dynamic-array-data/table-dynamic-array-data-example.css

@@ -0,0 +1,11 @@
+.demo-table {
+  width: 100%;
+}
+
+.demo-button-container {
+  padding-bottom: 16px;
+}
+
+.demo-button + .demo-button {
+  margin-left: 8px;
+}