angular-material-app documentation
  1. Components
  2. StaticComponent

File

src/app/tables/static/static.component.ts

Implements

OnInit

Metadata

selector app-static
styleUrls ./static.component.scss
templateUrl ./static.component.html

Index

Properties
Methods

Constructor

constructor(_http: HttpClient)
Defined in src/app/tables/static/static.component.ts:49
Parameters :
Name Type Optional
_http HttpClient No

Methods

addColumn
addColumn()
Defined in src/app/tables/static/static.component.ts:67
Returns : void
applyFilter
applyFilter(filterValue: string)
Defined in src/app/tables/static/static.component.ts:92
Parameters :
Name Type Optional
filterValue string No
Returns : void
getQuery
getQuery()
Defined in src/app/tables/static/static.component.ts:57
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/tables/static/static.component.ts:53
Returns : void
removeColumn
removeColumn()
Defined in src/app/tables/static/static.component.ts:74
Returns : void
shuffle
shuffle()
Defined in src/app/tables/static/static.component.ts:80
Returns : void

Properties

Private apiUrl
Default value : environment.tableApi
Defined in src/app/tables/static/static.component.ts:49
columns
Type : string[]
Default value : [ 'appName', 'cateNames', 'developCompanyFullName', 'activeNums', 'activeNumsRatio', 'star', ]
Defined in src/app/tables/static/static.component.ts:38
columnsToDisplay
Type : string[]
Default value : this.displayedColumns.slice()
Defined in src/app/tables/static/static.component.ts:47
dataSource
Type : any
Defined in src/app/tables/static/static.component.ts:46
displayedColumns
Type : string[]
Default value : [ 'appName', 'cateNames', 'developCompanyFullName', 'activeNums', 'activeNumsRatio' ]
Defined in src/app/tables/static/static.component.ts:31
 
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {
  animate,
  state,
  style,
  transition,
  trigger
} from '@angular/animations';
import { environment } from '../../../environments/environment';

@Component({
  selector: 'app-static',
  templateUrl: './static.component.html',
  styleUrls: ['./static.component.scss'],
  animations: [
    trigger('detailExpand', [
      state(
        'collapsed',
        style({ height: '0px', minHeight: '0', display: 'none' })
      ),
      state('expanded', style({ height: '*' })),
      transition(
        'expanded <=> collapsed',
        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
      )
    ])
  ]
})
export class StaticComponent implements OnInit {
  displayedColumns: string[] = [
    'appName',
    'cateNames',
    'developCompanyFullName',
    'activeNums',
    'activeNumsRatio'
  ];
  columns: string[] = [
    'appName',
    'cateNames',
    'developCompanyFullName',
    'activeNums',
    'activeNumsRatio',
    'star',
  ];
  dataSource: any;
  columnsToDisplay: string[] = this.displayedColumns.slice();

  private apiUrl = environment.tableApi;

  constructor(private _http: HttpClient) {}

  ngOnInit() {
    this.getQuery();
  }

  getQuery() {
    const url = `${this.apiUrl}/static.json`;
    this._http
      .get(url)
      .toPromise()
      .then(res => {
        this.dataSource = res;
      });
  }

  addColumn() {
    const randomColumn = Math.floor(
      Math.random() * this.displayedColumns.length
    );
    this.columnsToDisplay.push(this.displayedColumns[randomColumn]);
  }

  removeColumn() {
    if (this.columnsToDisplay.length) {
      this.columnsToDisplay.pop();
    }
  }

  shuffle() {
    let currentIndex = this.columnsToDisplay.length;
    while (0 !== currentIndex) {
      let randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      let temp = this.columnsToDisplay[currentIndex];
      this.columnsToDisplay[currentIndex] = this.columnsToDisplay[randomIndex];
      this.columnsToDisplay[randomIndex] = temp;
    }
  }

  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}
Copy
<mat-card>
  <mat-card-title>Base Table</mat-card-title>
  <mat-card-content>
    <table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="appName">
        <th mat-header-cell *matHeaderCellDef>APP</th>
        <td mat-cell *matCellDef="let element">{{ element.appName }}</td>
      </ng-container>

      <ng-container matColumnDef="cateNames">
        <th mat-header-cell *matHeaderCellDef>领域</th>
        <td mat-cell *matCellDef="let element">{{ element.cateNames }}</td>
      </ng-container>

      <ng-container matColumnDef="developCompanyFullName">
        <th mat-header-cell *matHeaderCellDef>开发商</th>
        <td mat-cell *matCellDef="let element">
          {{ element.developCompanyFullName }}
        </td>
      </ng-container>

      <ng-container matColumnDef="activeNums">
        <th mat-header-cell *matHeaderCellDef>活跃人数(万)</th>
        <td mat-cell *matCellDef="let element">{{ element.activeNums }}</td>
      </ng-container>

      <ng-container matColumnDef="activeNumsRatio">
        <th mat-header-cell *matHeaderCellDef>环比增幅(%)</th>
        <td mat-cell *matCellDef="let element">
          {{ element.activeNumsRatio }}
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
    </table>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Table with sticky header </mat-card-title>
  <mat-card-content
    ><div class="example-container mat-elevation-z8">
      <table mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="appName">
          <th mat-header-cell *matHeaderCellDef>APP</th>
          <td mat-cell *matCellDef="let element">{{ element.appName }}</td>
        </ng-container>

        <ng-container matColumnDef="cateNames">
          <th mat-header-cell *matHeaderCellDef>领域</th>
          <td mat-cell *matCellDef="let element">{{ element.cateNames }}</td>
        </ng-container>

        <ng-container matColumnDef="developCompanyFullName">
          <th mat-header-cell *matHeaderCellDef>开发商</th>
          <td mat-cell *matCellDef="let element">
            {{ element.developCompanyFullName }}
          </td>
        </ng-container>

        <ng-container matColumnDef="activeNums">
          <th mat-header-cell *matHeaderCellDef>活跃人数(万)</th>
          <td mat-cell *matCellDef="let element">{{ element.activeNums }}</td>
        </ng-container>

        <ng-container matColumnDef="activeNumsRatio">
          <th mat-header-cell *matHeaderCellDef>环比增幅(%)</th>
          <td mat-cell *matCellDef="let element">
            {{ element.activeNumsRatio }}
          </td>
        </ng-container>

        <tr
          mat-header-row
          *matHeaderRowDef="displayedColumns; sticky: true"
        ></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </div>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Table with a sticky footer </mat-card-title>
  <mat-card-content
    ><div class="example-container mat-elevation-z8">
      <table mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="appName">
          <th mat-header-cell *matHeaderCellDef>APP</th>
          <td mat-cell *matCellDef="let element">{{ element.appName }}</td>
          <td mat-footer-cell *matFooterCellDef>APP</td>
        </ng-container>

        <ng-container matColumnDef="cateNames">
          <th mat-header-cell *matHeaderCellDef>领域</th>
          <td mat-cell *matCellDef="let element">{{ element.cateNames }}</td>
          <td mat-footer-cell *matFooterCellDef>领域</td>
        </ng-container>

        <ng-container matColumnDef="developCompanyFullName">
          <th mat-header-cell *matHeaderCellDef>开发商</th>
          <td mat-cell *matCellDef="let element">
            {{ element.developCompanyFullName }}
          </td>
          <td mat-footer-cell *matFooterCellDef>领开发商域</td>
        </ng-container>

        <ng-container matColumnDef="activeNums">
          <th mat-header-cell *matHeaderCellDef>活跃人数(万)</th>
          <td mat-cell *matCellDef="let element">{{ element.activeNums }}</td>
          <td mat-footer-cell *matFooterCellDef>活跃人数(万)</td>
        </ng-container>

        <ng-container matColumnDef="activeNumsRatio">
          <th mat-header-cell *matHeaderCellDef>环比增幅(%)</th>
          <td mat-cell *matCellDef="let element">
            {{ element.activeNumsRatio }}
          </td>
          <td mat-footer-cell *matFooterCellDef>环比增幅(%)</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        <tr
          mat-footer-row
          *matFooterRowDef="displayedColumns; sticky: true"
        ></tr>
      </table>
    </div>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Table with a sticky columns </mat-card-title>
  <mat-card-content>
    <div class="table-sticky mat-elevation-z8">
      <table mat-table [dataSource]="dataSource" class="table-sticky-colums">
        <ng-container matColumnDef="appName" sticky>
          <th mat-header-cell *matHeaderCellDef>APP</th>
          <td mat-cell *matCellDef="let element">{{ element.appName }}</td>
        </ng-container>

        <ng-container matColumnDef="cateNames">
          <th mat-header-cell *matHeaderCellDef>领域</th>
          <td mat-cell *matCellDef="let element">{{ element.cateNames }}</td>
        </ng-container>

        <ng-container matColumnDef="developCompanyFullName">
          <th mat-header-cell *matHeaderCellDef>开发商</th>
          <td mat-cell *matCellDef="let element">
            {{ element.developCompanyFullName }}
          </td>
        </ng-container>

        <ng-container matColumnDef="activeNums">
          <th mat-header-cell *matHeaderCellDef>活跃人数(万)</th>
          <td mat-cell *matCellDef="let element">{{ element.activeNums }}</td>
        </ng-container>

        <ng-container matColumnDef="activeNumsRatio">
          <th mat-header-cell *matHeaderCellDef>环比增幅(%)</th>
          <td mat-cell *matCellDef="let element">
            {{ element.activeNumsRatio }}
          </td>
        </ng-container>

        <ng-container matColumnDef="star" stickyEnd>
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let element">
            <mat-icon>more_vert</mat-icon>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="columns"></tr>
        <tr mat-row *matRowDef="let row; columns: columns"></tr>
      </table>
    </div>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Table with expandable rows </mat-card-title>
  <mat-card-content>
    <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
      <ng-container
        matColumnDef="{{ column }}"
        *ngFor="let column of columnsToDisplay"
      >
        <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
        <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
      </ng-container>

      <ng-container matColumnDef="expandedDetail">
        <td
          mat-cell
          *matCellDef="let element"
          [attr.colspan]="columnsToDisplay.length"
        >
          <div
            class="example-element-detail"
            [@detailExpand]="
              element == expandedElement ? 'expanded' : 'collapsed'
            "
          >
            <div class="example-element-diagram">
              <div class="example-element-position">{{ element.appName }}</div>
              <div class="example-element-symbol">{{ element.appName }}</div>
              <div class="example-element-name">{{ element.appName }}</div>
              <div class="example-element-weight">{{ element.appName }}</div>
            </div>
            <div class="example-element-description">{{ element.appName }}</div>
          </div>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
      <tr
        mat-row
        *matRowDef="let element; columns: columnsToDisplay"
        class="example-element-row"
        [class.example-expanded-row]="expandedElement === element"
        (click)="expandedElement = expandedElement === element ? null : element"
      ></tr>
      <tr
        mat-row
        *matRowDef="let row; columns: ['expandedDetail']"
        class="example-detail-row"
      ></tr>
    </table>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title
    >Table dynamically changing the columns displayed</mat-card-title
  >
  <mat-card-content>
    <button mat-raised-button (click)="addColumn()">Add column</button>
    <button mat-raised-button (click)="removeColumn()">Remove column</button>
    <button mat-raised-button (click)="shuffle()">Shuffle</button>

    <table mat-table [dataSource]="dataSource">
      <ng-container
        [matColumnDef]="column"
        *ngFor="let column of displayedColumns"
      >
        <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
        <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
      <tr mat-row *matRowDef="let row; columns: columnsToDisplay"></tr>
    </table>
  </mat-card-content>
</mat-card>
Copy

./static.component.scss 

mat-card {
  margin: 24px;
}

.example-container {
  height: 400px;
  overflow: auto;
}

table {
  width: 100%;
}

tr.example-detail-row {
  height: 0;
}

tr.example-element-row:not(.example-expanded-row):hover {
  background: #f5f5f5;
}

tr.example-element-row:not(.example-expanded-row):active {
  background: #efefef;
}

.example-element-row td {
  border-bottom-width: 0;
}

.example-element-detail {
  overflow: hidden;
  display: flex;
}

.example-element-diagram {
  min-width: 80px;
  border: 2px solid black;
  padding: 8px;
  font-weight: lighter;
  margin: 8px 0;
  height: 104px;
}

.example-element-symbol {
  font-weight: bold;
  font-size: 40px;
  line-height: normal;
}

.example-element-description {
  padding: 16px;
}

.example-element-description-attribution {
  opacity: 0.5;
}

// Table with a sticky columns
.table-sticky {
  width: 500px;
  height: 400px;
  overflow: auto;
}
.table-sticky-colums {
  width: 800px;

  td.mat-column-star {
    width: 20px;
    padding-right: 8px;
  }

  th.mat-column-cateNames,
  td.mat-column-cateNames {
    padding-left: 8px;
  }

  .mat-table-sticky:first-child {
    border-right: 1px solid #e0e0e0;
  }

  .mat-table-sticky:last-child {
    border-left: 1px solid #e0e0e0;
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""