docs(material/table): fix table examples (#22792)

(cherry picked from commit 555852e)

Author: annieyw

src/components-examples/material/table/table-footer-row/table-footer-row-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 
-export interface Transaction {
+interface Transaction {
   item: string;
   cost: number;
 }

src/components-examples/material/table/table-http/table-http-example.css

@@ -28,7 +28,6 @@ table {
 }
 
 .example-rate-limit-reached {
-  color: #980000;
   max-width: 360px;
   text-align: center;
 }

src/components-examples/material/table/table-multiple-header-footer/table-multiple-header-footer-example.css

@@ -15,5 +15,5 @@ table {
 }
 
 .example-second-footer-row td {
-  color: #900000;
+  font-style: italic;
 }

src/components-examples/material/table/table-multiple-header-footer/table-multiple-header-footer-example.ts

@@ -1,5 +1,10 @@
 import {Component} from '@angular/core';
-import {Transaction} from '../table-footer-row/table-footer-row-example';
+
+interface Transaction {
+  item: string;
+  cost: number;
+}
+
 
 /**
  * @title Table with multiple header and footer rows

src/components-examples/material/table/table-overview/table-overview-example.html

@@ -24,10 +24,10 @@
       <td mat-cell *matCellDef="let row"> {{row.name}} </td>
     </ng-container>
 
-    <!-- Color Column -->
-    <ng-container matColumnDef="color">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Color </th>
-      <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </td>
+    <!-- Fruit Column -->
+    <ng-container matColumnDef="fruit">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Fruit </th>
+      <td mat-cell *matCellDef="let row"> {{row.fruit}} </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
@@ -41,3 +41,4 @@
 
   <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
 </div>
+

src/components-examples/material/table/table-overview/table-overview-example.ts

@@ -7,13 +7,12 @@ export interface UserData {
   id: string;
   name: string;
   progress: string;
-  color: string;
+  fruit: string;
 }
 
 /** Constants used to fill up our data base. */
-const COLORS: string[] = [
-  'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', 'fuchsia', 'lime', 'teal',
-  'aqua', 'blue', 'navy', 'black', 'gray'
+const FRUITS: string[] = [
+  'blueberry', 'lychee', 'kiwi', 'mango', 'peach', 'lime', 'pomegranate', 'pineapple'
 ];
 const NAMES: string[] = [
   'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', 'Charlotte', 'Theodore', 'Isla', 'Oliver',
@@ -29,7 +28,7 @@ const NAMES: string[] = [
   templateUrl: 'table-overview-example.html',
 })
 export class TableOverviewExample implements AfterViewInit {
-  displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
+  displayedColumns: string[] = ['id', 'name', 'progress', 'fruit'];
   dataSource: MatTableDataSource<UserData>;
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -61,12 +60,12 @@ export class TableOverviewExample implements AfterViewInit {
 /** Builds and returns a new User. */
 function createNewUser(id: number): UserData {
   const name = NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
-      NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
+    NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
 
   return {
     id: id.toString(),
     name: name,
     progress: Math.round(Math.random() * 100).toString(),
-    color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
+    fruit: FRUITS[Math.round(Math.random() * (FRUITS.length - 1))]
   };
 }