AndrewJBateman / angular-material-table

:clipboard: Angular app to display a table using the Material library

⚡ Angular Material Table

• App using the Angular Material design component library to add a table using mat-table with sortable columns, as per Angular Material sort docs.
• 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 v16
• Angular Material v16

💾 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.

💻 Code Examples

• use ng breakpoint observer to see if use has a phone-sized screen or not.

ngOnInit(): void {
  this.breakpointObserver
    .observe(Breakpoints.Handset)
    .subscribe(async result => {
      this.isHandset = result.matches
    })
}

🆒 Features

• Clicking on a row will console.log the data in that row
• Table now has a sticky header
• Table columns now sortable

📋 Status & To-Do List

• Status: Working
• To-Do: Nothing

👏 Inspiration

• Angular Material sort docs.

📁 License

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

✉️ Contact

• Repo created by ABateman, email: [e-mail]