a11y(table): add basic, sort, pager demos for a11y #6498 (#6653)

* a11y(table): add basic, sort, pager demos for a11y #6498

* chore(nit): few tweaks

* a11y(table): add readonly flag

* chore(nit): export interface

* chore(tests): fix old prefixes

* chore(build): update comp names from md to mat

src/demo-app/a11y/a11y-module.ts

@@ -33,6 +33,7 @@ import {SliderAccessibilityDemo} from './slider/slider-a11y';
 import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
 import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y';
 import {SelectAccessibilityDemo} from './select/select-a11y';
+import {TableAccessibilityDemo} from './table/table-a11y';
 import {
   TabsAccessibilityDemo,
   SunnyTabContent,
@@ -45,7 +46,6 @@ import {SidenavBasicAccessibilityDemo} from './sidenav/basic-sidenav-a11y';
 import {SidenavDualAccessibilityDemo} from './sidenav/dual-sidenav-a11y';
 import {SidenavMobileAccessibilityDemo} from './sidenav/mobile-sidenav-a11y';
 
-
 @NgModule({
   imports: [
     RouterModule.forChild(ACCESSIBILITY_DEMO_ROUTES)
@@ -98,6 +98,7 @@ export class AccessibilityRoutingModule {}
     SliderAccessibilityDemo,
     SlideToggleAccessibilityDemo,
     SnackBarAccessibilityDemo,
+    TableAccessibilityDemo,
     SunnyTabContent,
     TabsAccessibilityDemo,
     ToolbarAccessibilityDemo,

src/demo-app/a11y/a11y.ts

@@ -50,6 +50,7 @@ export class AccessibilityDemo implements OnDestroy {
     {name: 'Slide toggle', route: 'slide-toggle'},
     {name: 'Slider', route: 'slider'},
     {name: 'Snack bar', route: 'snack-bar'},
+    {name: 'Table', route: 'table'},
     {name: 'Tabs', route: 'tabs'},
     {name: 'Toolbar', route: 'toolbar'},
     {name: 'Tooltip', route: 'tooltip'},

src/demo-app/a11y/routes.ts

@@ -21,6 +21,7 @@ import {SliderAccessibilityDemo} from './slider/slider-a11y';
 import {SlideToggleAccessibilityDemo} from './slide-toggle/slide-toggle-a11y';
 import {SnackBarAccessibilityDemo} from './snack-bar/snack-bar-a11y';
 import {SelectAccessibilityDemo} from './select/select-a11y';
+import {TableAccessibilityDemo} from './table/table-a11y';
 import {TabsAccessibilityDemo} from './tabs/tabs-a11y';
 import {TABS_DEMO_ROUTES} from './tabs/routes';
 import {TooltipAccessibilityDemo} from './tooltip/tooltip-a11y';
@@ -57,5 +58,6 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'snack-bar', component: SnackBarAccessibilityDemo},
   {path: 'tabs', component: TabsAccessibilityDemo, children: TABS_DEMO_ROUTES},
   {path: 'toolbar', component: ToolbarAccessibilityDemo},
+  {path: 'table', component: TableAccessibilityDemo},
   {path: 'tooltip', component: TooltipAccessibilityDemo},
 ];

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

@@ -0,0 +1,78 @@
+<div>
+  <section>
+    <h2>Basic Table</h2>
+    <p>Shows name, color and age data.</p>
+    <mat-table aria-readonly="true"
+              [dataSource]="basicDataSource"
+              aria-label="Users favorite colors and age">
+      <ng-container cdkColumnDef="name">
+        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
+        <mat-cell *cdkCellDef="let row">{{row.name}}</mat-cell>
+      </ng-container>
+      <ng-container cdkColumnDef="color">
+        <mat-header-cell *cdkHeaderCellDef>Color</mat-header-cell>
+        <mat-cell *cdkCellDef="let row">{{row.color}}</mat-cell>
+      </ng-container>
+      <ng-container cdkColumnDef="age">
+        <mat-header-cell *cdkHeaderCellDef>Age</mat-header-cell>
+        <mat-cell *cdkCellDef="let row">{{row.age}}</mat-cell>
+      </ng-container>
+      <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
+    </mat-table>
+  </section>
+
+  <section>
+    <h2>Sortable Table</h2>
+    <p>Shows name, color and age data. Sorted ascending by age.</p>
+    <mat-table [dataSource]="sortDataSource"
+              aria-label="Users favorite colors and age"
+              aria-readonly="true"
+              mdSort mdSortActive="age"
+              mdSortDirection="asc">
+      <ng-container cdkColumnDef="name">
+        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
+        <mat-cell *cdkCellDef="let row">{{row.name}}</mat-cell>
+      </ng-container>
+      <ng-container cdkColumnDef="color">
+        <mat-header-cell *cdkHeaderCellDef>Color</mat-header-cell>
+        <mat-cell *cdkCellDef="let row">{{row.color}}</mat-cell>
+      </ng-container>
+      <ng-container cdkColumnDef="age">
+        <mat-header-cell *cdkHeaderCellDef mat-sort-header>Age</mat-header-cell>
+        <mat-cell *cdkCellDef="let row">{{row.age}}</mat-cell>
+      </ng-container>
+      <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
+    </mat-table>
+  </section>
+
+  <section>
+    <h2>Paginated Table</h2>
+    <p>Shows name, color and age data. Shows only first 5 until paginated.</p>
+    <mat-table [dataSource]="paginatedDataSource"
+              aria-readonly="true"
+              aria-label="Users favorite colors and age">
+      <ng-container cdkColumnDef="name">
+        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
+        <mat-cell *cdkCellDef="let row">{{row.name}}</mat-cell>
+      </ng-container>
+      <ng-container cdkColumnDef="color">
+        <mat-header-cell *cdkHeaderCellDef>Color</mat-header-cell>
+        <mat-cell *cdkCellDef="let row">{{row.color}}</mat-cell>
+      </ng-container>
+      <ng-container cdkColumnDef="age">
+        <mat-header-cell *cdkHeaderCellDef>Age</mat-header-cell>
+        <mat-cell *cdkCellDef="let row">{{row.age}}</mat-cell>
+      </ng-container>
+      <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
+    </mat-table>
+    <mat-paginator #paginator
+      [length]="6"
+      [pageIndex]="0"
+      [pageSize]="3"
+      [pageSizeOptions]="[1, 3, 5]">
+    </mat-paginator>
+  </section>
+</div>

src/demo-app/a11y/table/table-a11y.ts

@@ -0,0 +1,114 @@
+import {Component, ViewChild} from '@angular/core';
+import {DataSource} from '@angular/cdk/table';
+import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+import {Observable} from 'rxjs/Observable';
+import {MatSort, MatPaginator} from '@angular/material';
+
+export interface UserData {
+  name: string;
+  color: string;
+  age: number;
+}
+
+const exampleData = [
+  {name: 'Austin', color: 'blue', age: 30},
+  {name: 'Jeremy', color: 'green', age: 33},
+  {name: 'Kara', color: 'purple', age: 29},
+  {name: 'Tina', color: 'yellow', age: 35},
+  {name: 'Brad', color: 'pink', age: 40},
+  {name: 'Jules', color: 'red', age: 21},
+];
+
+@Component({
+  moduleId: module.id,
+  selector: 'table-a11y',
+  templateUrl: 'table-a11y.html',
+  styleUrls: ['table-a11y.css'],
+})
+export class TableAccessibilityDemo {
+  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatPaginator) pager: MatPaginator;
+
+  displayedColumns = ['name', 'color', 'age'];
+  basicDataSource: BasicDataSource;
+  sortDataSource: SortDataSource;
+  paginatedDataSource: PaginatedDataSource;
+
+  ngOnInit(): void {
+    this.basicDataSource = new BasicDataSource();
+    this.sortDataSource = new SortDataSource(this.sort);
+    this.paginatedDataSource = new PaginatedDataSource(this.pager);
+  }
+}
+
+export class BasicDataSource extends DataSource<UserData> {
+  dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
+
+  constructor() {
+    super();
+    this.dataChange.next(exampleData);
+  }
+
+  connect(): Observable<UserData[]> {
+    return this.dataChange;
+  }
+
+  disconnect() {}
+}
+
+export class SortDataSource extends DataSource<UserData> {
+  dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
+
+  constructor(private _sort: MatSort) {
+    super();
+    this.dataChange.next(exampleData);
+  }
+
+  connect(): Observable<UserData[]> {
+    const displayDataChanges = [
+      this.dataChange,
+      this._sort.sortChange,
+    ];
+
+    return Observable.merge(...displayDataChanges).map(() => {
+      return this.getSortedData();
+    });
+  }
+
+  disconnect() {}
+
+  getSortedData(): UserData[] {
+    const data = [...exampleData];
+    if (!this._sort.active || this._sort.direction == '') {
+      return data;
+    }
+
+    return data.sort((a: UserData, b: UserData) => {
+      return (a.age < b.age ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1);
+    });
+  }
+}
+
+export class PaginatedDataSource extends DataSource<UserData> {
+  dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
+
+  constructor(private _paginator: MatPaginator) {
+    super();
+    this.dataChange.next(exampleData);
+  }
+
+  connect(): Observable<UserData[]> {
+    const displayDataChanges = [
+      this.dataChange,
+      this._paginator.page,
+    ];
+
+    return Observable.merge(...displayDataChanges).map(() => {
+      const data = [...exampleData];
+      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
+      return data.splice(startIndex, this._paginator.pageSize);
+    });
+  }
+
+  disconnect() {}
+}