⚡ Angular Material Table

• App using the Angular Material design component library to add a table using mat-table and experiment with different themes.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular Material Table
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Table of periodic elements used to provide data for columns.

📷 Screenshots

📶 Technologies

• Angular v14-rc1
• Angular Material v14-rc1

💾 Setup

• Install dependencies using npm i

• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

• Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

💻 Code Examples

<!-- Data passed to the mat-table component using the dataSource input.
Mat-sort header is used to allow each column to be sorted in asc or desc order -->
<div class="mat-elevation-z8 data-table">
  <table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
    <!-- Id Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
      <td mat-cell *matCellDef="let row">{{row.id}}</td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let row">{{row.name}}</td>
    </ng-container>

    <!-- Amount Column -->
    <ng-container matColumnDef="amount">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Amount</th>
      <td mat-cell *matCellDef="let row">{{row.amount}}</td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Weight</th>
      <td mat-cell *matCellDef="let row">{{ row.weight }}</td>
    </ng-container>

    <!-- Sticky header added, onRowClick function added -->
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRowClicked(row)"></tr>
  </table>

  <!-- Add a paginator -->
  <mat-paginator #paginator
      [length]="dataSource.data.length"
      [pageIndex]="0"
      [pageSize]="50"
      [pageSizeOptions]="[25, 50, 100, 250]">
  </mat-paginator>
</div>

🆒 Features

• Clicking on a row will console.log the data in that row.
• Table now has a sticky header.
• In data-table.component.ts: Breaking change on ViewChild decorator: error TS2554: Expected 2 arguments, but got 1 in v8 fixed by adding the 'static' flag to both ViewChild decorators:

@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;

📋 Status & To-Do List

• Status: Working.
• To-Do: Nothing

👏 Inspiration

• Project inspired by these 4 Youtube tutorials. Note: the Custom Theme Youtube Video 4 was out of date. Breaking changes were fixed due to Angular major version updates:

• 1. Intro & Setup,

• 2. Data Table,

• 3. Responsive Navigation,

• 4. Custom Theme

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]