Skip to content

Commit 7b7c2e1

Browse files
andrewseguinandrewseguin
committed
fix(material-experimental/mdc-table): mtach legacy examples
1 parent fbb80fc commit 7b7c2e1

File tree

98 files changed

+3232
-285
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+3232
-285
lines changed

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_module(
6+
name = "mdc-table",
7+
srcs = glob(
8+
["**/*.ts"],
9+
exclude = ["**/*.spec.ts"],
10+
),
11+
assets = glob([
12+
"**/*.html",
13+
"**/*.css",
14+
]),
15+
module_name = "@angular/components-examples/material-experimental/mdc-table",
16+
deps = [
17+
"//src/cdk/drag-drop",
18+
"//src/cdk/table",
19+
"//src/cdk/testing",
20+
"//src/cdk/testing/testbed",
21+
"//src/material-experimental/mdc-table",
22+
"//src/material/button",
23+
"//src/material/button-toggle",
24+
"//src/material/checkbox",
25+
"//src/material/core",
26+
"//src/material/icon",
27+
"//src/material/input",
28+
"//src/material/paginator",
29+
"//src/material/progress-spinner",
30+
"//src/material/sort",
31+
"//src/material/table/testing",
32+
"@npm//@angular/platform-browser",
33+
"@npm//@angular/platform-browser-dynamic",
34+
"@npm//@types/jasmine",
35+
],
36+
)
37+
38+
filegroup(
39+
name = "source-files",
40+
srcs = glob([
41+
"**/*.html",
42+
"**/*.css",
43+
"**/*.ts",
44+
]),
45+
)
46+
47+
ng_test_library(
48+
name = "unit_tests_lib",
49+
srcs = glob(["**/*.spec.ts"]),
50+
deps = [
51+
":table",
52+
"//src/cdk/testing",
53+
"//src/cdk/testing/testbed",
54+
"//src/material/table",
55+
"//src/material/table/testing",
56+
"@npm//@angular/platform-browser-dynamic",
57+
],
58+
)
59+
60+
ng_web_test_suite(
61+
name = "unit_tests",
62+
exclude_init_script = True,
63+
deps = [":unit_tests_lib"],
64+
)

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

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import {CommonModule} from '@angular/common';
2+
import {NgModule} from '@angular/core';
3+
import {MatRippleModule} from '@angular/material/core';
4+
import {MatButtonModule} from '@angular/material/button';
5+
import {MatButtonToggleModule} from '@angular/material/button-toggle';
6+
import {MatCheckboxModule} from '@angular/material/checkbox';
7+
import {MatIconModule} from '@angular/material/icon';
8+
import {MatInputModule} from '@angular/material/input';
9+
import {MatPaginatorModule} from '@angular/material/paginator';
10+
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
11+
import {MatSortModule} from '@angular/material/sort';
12+
import {MatTableModule} from '@angular/material-experimental/mdc-table';
13+
import {DragDropModule} from '@angular/cdk/drag-drop';
14+
import {CdkTableModule} from '@angular/cdk/table';
15+
16+
import {TableFlexBasicExample} from './table-flex-basic/table-flex-basic-example';
17+
import {TableBasicExample} from './table-basic/table-basic-example';
18+
import {TableDynamicColumnsExample} from './table-dynamic-columns/table-dynamic-columns-example';
19+
import {TableExpandableRowsExample} from './table-expandable-rows/table-expandable-rows-example';
20+
import {TableFilteringExample} from './table-filtering/table-filtering-example';
21+
import {TableFooterRowExample} from './table-footer-row/table-footer-row-example';
22+
import {TableHttpExample} from './table-http/table-http-example';
23+
import {
24+
TableMultipleHeaderFooterExample
25+
} from './table-multiple-header-footer/table-multiple-header-footer-example';
26+
import {TableOverviewExample} from './table-overview/table-overview-example';
27+
import {TablePaginationExample} from './table-pagination/table-pagination-example';
28+
import {TableRowContextExample} from './table-row-context/table-row-context-example';
29+
import {TableSelectionExample} from './table-selection/table-selection-example';
30+
import {TableSortingExample} from './table-sorting/table-sorting-example';
31+
import {TableStickyColumnsExample} from './table-sticky-columns/table-sticky-columns-example';
32+
import {
33+
TableStickyComplexFlexExample
34+
} from './table-sticky-complex-flex/table-sticky-complex-flex-example';
35+
import {TableStickyComplexExample} from './table-sticky-complex/table-sticky-complex-example';
36+
import {TableStickyFooterExample} from './table-sticky-footer/table-sticky-footer-example';
37+
import {TableStickyHeaderExample} from './table-sticky-header/table-sticky-header-example';
38+
import {
39+
TableTextColumnAdvancedExample
40+
} from './table-text-column-advanced/table-text-column-advanced-example';
41+
import {TableTextColumnExample} from './table-text-column/table-text-column-example';
42+
import {TableWrappedExample, WrapperTable} from './table-wrapped/table-wrapped-example';
43+
import {TableReorderableExample} from './table-reorderable/table-reorderable-example';
44+
import {TableRecycleRowsExample} from './table-recycle-rows/table-recycle-rows-example';
45+
import {TableHarnessExample} from './table-harness/table-harness-example';
46+
import {TableWithRipplesExample} from './table-with-ripples/table-with-ripples-example';
47+
import {TableColumnStylingExample} from './table-column-styling/table-column-styling-example';
48+
import {TableRowBindingExample} from './table-row-binding/table-row-binding-example';
49+
import {
50+
TableDynamicArrayDataExample
51+
} from './table-dynamic-array-data/table-dynamic-array-data-example';
52+
import {
53+
TableDynamicObservableDataExample
54+
} from './table-dynamic-observable-data/table-dynamic-observable-data-example';
55+
import {
56+
TableGeneratedColumnsExample
57+
} from './table-generated-columns/table-generated-columns-example';
58+
59+
export {
60+
TableBasicExample,
61+
TableColumnStylingExample,
62+
TableDynamicArrayDataExample,
63+
TableDynamicColumnsExample,
64+
TableDynamicObservableDataExample,
65+
TableExpandableRowsExample,
66+
TableFilteringExample,
67+
TableFlexBasicExample,
68+
TableFooterRowExample,
69+
TableGeneratedColumnsExample,
70+
TableHarnessExample,
71+
TableHttpExample,
72+
TableMultipleHeaderFooterExample,
73+
TableOverviewExample,
74+
TablePaginationExample,
75+
TableRecycleRowsExample,
76+
TableReorderableExample,
77+
TableRowBindingExample,
78+
TableRowContextExample,
79+
TableSelectionExample,
80+
TableSortingExample,
81+
TableStickyColumnsExample,
82+
TableStickyComplexExample,
83+
TableStickyComplexFlexExample,
84+
TableStickyFooterExample,
85+
TableStickyHeaderExample,
86+
TableTextColumnAdvancedExample,
87+
TableTextColumnExample,
88+
TableWithRipplesExample,
89+
TableWrappedExample,
90+
WrapperTable,
91+
};
92+
93+
const EXAMPLES = [
94+
TableBasicExample,
95+
TableColumnStylingExample,
96+
TableDynamicArrayDataExample,
97+
TableDynamicColumnsExample,
98+
TableDynamicObservableDataExample,
99+
TableExpandableRowsExample,
100+
TableFilteringExample,
101+
TableFlexBasicExample,
102+
TableFooterRowExample,
103+
TableGeneratedColumnsExample,
104+
TableHarnessExample,
105+
TableHttpExample,
106+
TableMultipleHeaderFooterExample,
107+
TableOverviewExample,
108+
TablePaginationExample,
109+
TableRecycleRowsExample,
110+
TableReorderableExample,
111+
TableRowBindingExample,
112+
TableRowContextExample,
113+
TableSelectionExample,
114+
TableSortingExample,
115+
TableStickyColumnsExample,
116+
TableStickyComplexExample,
117+
TableStickyComplexFlexExample,
118+
TableStickyFooterExample,
119+
TableStickyHeaderExample,
120+
TableTextColumnAdvancedExample,
121+
TableTextColumnExample,
122+
TableWithRipplesExample,
123+
TableWrappedExample,
124+
WrapperTable,
125+
];
126+
127+
@NgModule({
128+
imports: [
129+
CommonModule,
130+
MatButtonModule,
131+
MatButtonToggleModule,
132+
MatCheckboxModule,
133+
MatIconModule,
134+
MatInputModule,
135+
MatPaginatorModule,
136+
MatProgressSpinnerModule,
137+
MatRippleModule,
138+
MatSortModule,
139+
MatTableModule,
140+
CdkTableModule,
141+
DragDropModule,
142+
],
143+
declarations: EXAMPLES,
144+
exports: EXAMPLES,
145+
entryComponents: EXAMPLES,
146+
})
147+
export class MdcTableExamplesModule {
148+
}

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
table {
2+
width: 100%;
3+
}

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

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

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
23+
/**
24+
* @title Basic use of `<table mat-table>`
25+
*/
26+
@Component({
27+
selector: 'table-basic-example',
28+
styleUrls: ['table-basic-example.css'],
29+
templateUrl: 'table-basic-example.html',
30+
})
31+
export class TableBasicExample {
32+
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
33+
dataSource = ELEMENT_DATA;
34+
}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.demo-table {
2+
width: 100%;
3+
}
4+
5+
.mat-column-demo-position {
6+
width: 32px;
7+
border-right: 1px solid currentColor;
8+
padding-right: 24px;
9+
text-align: center;
10+
}
11+
12+
.mat-column-demo-name {
13+
padding-left: 16px;
14+
font-size: 20px;
15+
}
16+
17+
.mat-column-demo-weight {
18+
font-style: italic;
19+
}
20+
21+
.mat-column-demo-symbol {
22+
width: 32px;
23+
text-align: center;
24+
font-weight: bold;
25+
}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table">
2+
<!-- Position Column -->
3+
<ng-container matColumnDef="demo-position">
4+
<th mat-header-cell *matHeaderCellDef> No. </th>
5+
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
6+
</ng-container>
7+
8+
<!-- Name Column -->
9+
<ng-container matColumnDef="demo-name">
10+
<th mat-header-cell *matHeaderCellDef> Name </th>
11+
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
12+
</ng-container>
13+
14+
<!-- Weight Column -->
15+
<ng-container matColumnDef="demo-weight">
16+
<th mat-header-cell *matHeaderCellDef> Weight </th>
17+
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
18+
</ng-container>
19+
20+
<!-- Symbol Column -->
21+
<ng-container matColumnDef="demo-symbol">
22+
<th mat-header-cell *matHeaderCellDef> Symbol </th>
23+
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
24+
</ng-container>
25+
26+
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
27+
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
28+
</table>
29+

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
23+
/**
24+
* @title Styling columns using their auto-generated column names
25+
*/
26+
@Component({
27+
selector: 'table-column-styling-example',
28+
styleUrls: ['table-column-styling-example.css'],
29+
templateUrl: 'table-column-styling-example.html',
30+
})
31+
export class TableColumnStylingExample {
32+
displayedColumns: string[] = ['demo-position', 'demo-name', 'demo-weight', 'demo-symbol'];
33+
dataSource = ELEMENT_DATA;
34+
}

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.demo-table {
2+
width: 100%;
3+
}
4+
5+
.demo-button-container {
6+
padding-bottom: 16px;
7+
}
8+
9+
.demo-button + .demo-button {
10+
margin-left: 8px;
11+
}

0 commit comments

Comments
 (0)