Skip to content

Commit 9ac4c03

Browse files
amysortommalerba
amysorto
authored and
mmalerba
committed
build: add table example to mdc-migration integration test
1 parent 3c480dd commit 9ac4c03

File tree

14 files changed

+203
-0
lines changed

14 files changed

+203
-0
lines changed

‎integration/mdc-migration/golden/src/app/app.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@
1414
<slide-toggle-example></slide-toggle-example>
1515
<slider-example></slider-example>
1616
<snack-bar-example></snack-bar-example>
17+
<table-example></table-example>

‎integration/mdc-migration/golden/src/app/app.module.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {MatSelectModule} from '@angular/material-experimental/mdc-select';
2121
import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-toggle';
2222
import {MatSliderModule} from '@angular/material-experimental/mdc-slider';
2323
import {MatSnackBarModule} from '@angular/material/snack-bar';
24+
import {MatTableModule} from '@angular/material-experimental/mdc-table';
2425
import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
2526
import {ButtonComponent} from './components/button/button.component';
2627
import {CardComponent} from './components/card/card.component';
@@ -37,6 +38,7 @@ import {SelectComponent} from './components/select/select.component';
3738
import {SlideToggleComponent} from './components/slide-toggle/slide-toggle.component';
3839
import {SliderComponent} from './components/slider/slider.component';
3940
import {SnackBarComponent} from './components/snack-bar/snack-bar.component';
41+
import {TableComponent} from './components/table/table.component';
4042

4143
@NgModule({
4244
declarations: [
@@ -57,6 +59,7 @@ import {SnackBarComponent} from './components/snack-bar/snack-bar.component';
5759
SlideToggleComponent,
5860
SliderComponent,
5961
SnackBarComponent,
62+
TableComponent,
6063
],
6164
imports: [
6265
BrowserModule,
@@ -78,6 +81,7 @@ import {SnackBarComponent} from './components/snack-bar/snack-bar.component';
7881
MatSlideToggleModule,
7982
MatSliderModule,
8083
MatSnackBarModule,
84+
MatTableModule,
8185
ReactiveFormsModule,
8286
],
8387
providers: [],

‎integration/mdc-migration/golden/src/app/components/table/table.component.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<h2>Table example</h2>
2+
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
3+
4+
<!--- Note that these columns can be defined in any order.
5+
The actual rendered columns are set as a property on the row definition" -->
6+
7+
<!-- Position Column -->
8+
<ng-container matColumnDef="position">
9+
<th mat-header-cell *matHeaderCellDef> No. </th>
10+
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
11+
</ng-container>
12+
13+
<!-- Name Column -->
14+
<ng-container matColumnDef="name">
15+
<th mat-header-cell *matHeaderCellDef> Name </th>
16+
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
17+
</ng-container>
18+
19+
<!-- Weight Column -->
20+
<ng-container matColumnDef="weight">
21+
<th mat-header-cell *matHeaderCellDef> Weight </th>
22+
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
23+
</ng-container>
24+
25+
<!-- Symbol Column -->
26+
<ng-container matColumnDef="symbol">
27+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
28+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
29+
</ng-container>
30+
31+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
32+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
33+
</table>

‎integration/mdc-migration/golden/src/app/components/table/table.component.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.mat-mdc-table { padding: 8px; }
2+
3+
4+
.mat-mdc-header-row {
5+
background: lavender;
6+
}

‎integration/mdc-migration/golden/src/app/components/table/table.component.spec.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {ComponentFixture, TestBed} from '@angular/core/testing';
2+
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
3+
import {MatTableModule} from '@angular/material/table';
4+
import {TableComponent} from './table.component';
5+
6+
describe('TableComponent', () => {
7+
let component: TableComponent;
8+
let fixture: ComponentFixture<TableComponent>;
9+
10+
beforeEach(async () => {
11+
await TestBed.configureTestingModule({
12+
imports: [BrowserAnimationsModule, MatTableModule],
13+
declarations: [TableComponent],
14+
}).compileComponents();
15+
});
16+
17+
beforeEach(() => {
18+
fixture = TestBed.createComponent(TableComponent);
19+
component = fixture.componentInstance;
20+
fixture.detectChanges();
21+
});
22+
23+
it('should create', () => {
24+
expect(component).toBeTruthy();
25+
});
26+
});

‎integration/mdc-migration/golden/src/app/components/table/table.component.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {Component} from '@angular/core';
2+
3+
export interface PeriodicElement {
4+
name: string;
5+
position: number;
6+
weight: number;
7+
symbol: string;
8+
}
9+
10+
const ELEMENT_DATA: PeriodicElement[] = [
11+
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
12+
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
13+
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
14+
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
15+
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
16+
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
17+
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
18+
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
19+
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
20+
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
21+
];
22+
@Component({
23+
selector: 'table-example',
24+
templateUrl: './table.component.html',
25+
styleUrls: ['./table.component.scss'],
26+
})
27+
export class TableComponent {
28+
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
29+
dataSource = ELEMENT_DATA;
30+
}

‎integration/mdc-migration/golden/src/styles.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,8 @@ $sample-project-theme: mat.define-light-theme((
6666
@include mat.mdc-slider-typography($sample-project-theme);
6767
@include mat.mdc-snack-bar-theme($sample-project-theme);
6868
@include mat.mdc-snack-bar-typography($sample-project-theme);
69+
@include mat.mdc-table-theme($sample-project-theme);
70+
@include mat.mdc-table-typography($sample-project-theme);
6971

7072
/* You can add global styles to this file, and also import other style files */
7173

‎integration/mdc-migration/sample-project/src/app/app.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@
1414
<slide-toggle-example></slide-toggle-example>
1515
<slider-example></slider-example>
1616
<snack-bar-example></snack-bar-example>
17+
<table-example></table-example>

‎integration/mdc-migration/sample-project/src/app/app.module.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {MatSelectModule} from '@angular/material/select';
2121
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
2222
import {MatSliderModule} from '@angular/material/slider';
2323
import {MatSnackBarModule} from '@angular/material/snack-bar';
24+
import {MatTableModule} from '@angular/material/table';
2425
import {AutocompleteComponent} from './components/autocomplete/autocomplete.component';
2526
import {ButtonComponent} from './components/button/button.component';
2627
import {CardComponent} from './components/card/card.component';
@@ -37,6 +38,7 @@ import {SelectComponent} from './components/select/select.component';
3738
import {SlideToggleComponent} from './components/slide-toggle/slide-toggle.component';
3839
import {SliderComponent} from './components/slider/slider.component';
3940
import {SnackBarComponent} from './components/snack-bar/snack-bar.component';
41+
import {TableComponent} from './components/table/table.component';
4042

4143
@NgModule({
4244
declarations: [
@@ -57,6 +59,7 @@ import {SnackBarComponent} from './components/snack-bar/snack-bar.component';
5759
SlideToggleComponent,
5860
SliderComponent,
5961
SnackBarComponent,
62+
TableComponent,
6063
],
6164
imports: [
6265
BrowserModule,
@@ -78,6 +81,7 @@ import {SnackBarComponent} from './components/snack-bar/snack-bar.component';
7881
MatSlideToggleModule,
7982
MatSliderModule,
8083
MatSnackBarModule,
84+
MatTableModule,
8185
ReactiveFormsModule,
8286
],
8387
providers: [],

‎integration/mdc-migration/sample-project/src/app/components/table/table.component.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<h2>Table example</h2>
2+
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
3+
4+
<!--- Note that these columns can be defined in any order.
5+
The actual rendered columns are set as a property on the row definition" -->
6+
7+
<!-- Position Column -->
8+
<ng-container matColumnDef="position">
9+
<th mat-header-cell *matHeaderCellDef> No. </th>
10+
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
11+
</ng-container>
12+
13+
<!-- Name Column -->
14+
<ng-container matColumnDef="name">
15+
<th mat-header-cell *matHeaderCellDef> Name </th>
16+
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
17+
</ng-container>
18+
19+
<!-- Weight Column -->
20+
<ng-container matColumnDef="weight">
21+
<th mat-header-cell *matHeaderCellDef> Weight </th>
22+
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
23+
</ng-container>
24+
25+
<!-- Symbol Column -->
26+
<ng-container matColumnDef="symbol">
27+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
28+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
29+
</ng-container>
30+
31+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
32+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
33+
</table>

0 commit comments

Comments
 (0)