├── .github ├── dependabot.yml └── workflows │ ├── build.yml │ └── ng-update.yml ├── .gitignore ├── .vscode ├── extensions.json ├── launch.json └── tasks.json ├── README.md ├── angular.json ├── db.json ├── package-lock.json ├── package.json ├── src ├── app │ ├── advanced-material-table │ │ ├── advanced-material-table.component.html │ │ ├── advanced-material-table.component.scss │ │ ├── advanced-material-table.component.ts │ │ ├── product.service.ts │ │ └── product.ts │ ├── app.component.ts │ ├── app.config.ts │ └── app.routes.ts ├── assets │ └── .gitkeep ├── favicon.ico ├── index.html ├── main.ts └── styles.scss ├── tsconfig.app.json └── tsconfig.json /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: "npm" # See documentation for possible values 9 | directory: "/" # Location of package manifests 10 | schedule: 11 | interval: "weekly" 12 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Angular Build 2 | 3 | on: 4 | push: 5 | branches: [ "main" ] 6 | pull_request: 7 | branches: [ "main" ] 8 | 9 | jobs: 10 | angular: 11 | name: Angular Build 12 | runs-on: ubuntu-latest 13 | steps: 14 | - name: Checkout the source code 15 | uses: actions/checkout@v3 16 | - name: Setup Node.js 17 | uses: actions/setup-node@v3 18 | with: 19 | node-version: 20 20 | cache: 'npm' 21 | cache-dependency-path: package-lock.json 22 | - name: Install dependencies 23 | run: npm ci 24 | - name: Build 25 | run: npm run build 26 | -------------------------------------------------------------------------------- /.github/workflows/ng-update.yml: -------------------------------------------------------------------------------- 1 | name: "ng-update" 2 | on: # when the action should run. Can also be a CRON or in response to external events. see https://git.io/JeBz1 3 | schedule: 4 | - cron: '30 5 1 * *' 5 | 6 | jobs: 7 | ngxUptodate: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: Updating ng dependencies # the magic happens here ! 11 | uses: fast-facts/ng-update@v1 12 | with: 13 | base-branch: main 14 | repo-token: ${{ secrets.GITHUB_TOKEN }} 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /bazel-out 8 | 9 | # Node 10 | /node_modules 11 | npm-debug.log 12 | yarn-error.log 13 | 14 | # IDEs and editors 15 | .idea/ 16 | .project 17 | .classpath 18 | .c9/ 19 | *.launch 20 | .settings/ 21 | *.sublime-workspace 22 | 23 | # Visual Studio Code 24 | .vscode/* 25 | !.vscode/settings.json 26 | !.vscode/tasks.json 27 | !.vscode/launch.json 28 | !.vscode/extensions.json 29 | .history/* 30 | 31 | # Miscellaneous 32 | /.angular/cache 33 | .sass-cache/ 34 | /connect.lock 35 | /coverage 36 | /libpeerconnection.log 37 | testem.log 38 | /typings 39 | 40 | # System files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846 3 | "recommendations": ["angular.ng-template"] 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "ng serve", 7 | "type": "chrome", 8 | "request": "launch", 9 | "preLaunchTask": "npm: start", 10 | "url": "http://localhost:4200/" 11 | } 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558 3 | "version": "2.0.0", 4 | "tasks": [ 5 | { 6 | "type": "npm", 7 | "script": "start", 8 | "isBackground": true, 9 | "problemMatcher": { 10 | "owner": "typescript", 11 | "pattern": "$tsc", 12 | "background": { 13 | "activeOnStart": true, 14 | "beginsPattern": { 15 | "regexp": "(.*?)" 16 | }, 17 | "endsPattern": { 18 | "regexp": "bundle generation complete" 19 | } 20 | } 21 | } 22 | } 23 | ] 24 | } 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AdvancedAngularMaterialTable 2 | 3 | Angular Material data table with pagination, sorting, and multiple filters. 4 | 5 | ## 💻 Tecnologies 6 | 7 | - Angular v17 8 | - Angular Material 9 | - Json-Server npm package to emulate the API 10 | 11 | ## ⌨️ Editor / IDE 12 | 13 | - Visual Studio Code 14 | - Angular Extensions [link](https://marketplace.visualstudio.com/items?itemName=loiane.angular-extension-pack) 15 | 16 | ## Step by step tutorial 17 | 18 | TODO 19 | 20 | ## Screenshots 21 | 22 | TODO 23 | 24 | ## Development server 25 | 26 | You need to have Node.js / NPM installed locally. 27 | 28 | 1. Install all the required dependencies: 29 | 30 | ``` 31 | npm install 32 | ``` 33 | 34 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. 35 | 36 | In another terminal tab or window, run the following command to emulate the API: 37 | 38 | ``` 39 | npx json-server db.json 40 | ``` 41 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "advanced-angular-material-table": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "inlineTemplate": true, 11 | "inlineStyle": true, 12 | "style": "scss", 13 | "skipTests": true 14 | }, 15 | "@schematics/angular:class": { 16 | "skipTests": true 17 | }, 18 | "@schematics/angular:directive": { 19 | "skipTests": true 20 | }, 21 | "@schematics/angular:guard": { 22 | "skipTests": true 23 | }, 24 | "@schematics/angular:interceptor": { 25 | "skipTests": true 26 | }, 27 | "@schematics/angular:pipe": { 28 | "skipTests": true 29 | }, 30 | "@schematics/angular:resolver": { 31 | "skipTests": true 32 | }, 33 | "@schematics/angular:service": { 34 | "skipTests": true 35 | } 36 | }, 37 | "root": "", 38 | "sourceRoot": "src", 39 | "prefix": "app", 40 | "architect": { 41 | "build": { 42 | "builder": "@angular-devkit/build-angular:application", 43 | "options": { 44 | "outputPath": "dist/advanced-angular-material-table", 45 | "index": "src/index.html", 46 | "browser": "src/main.ts", 47 | "polyfills": [ 48 | "zone.js" 49 | ], 50 | "tsConfig": "tsconfig.app.json", 51 | "inlineStyleLanguage": "scss", 52 | "assets": [ 53 | "src/favicon.ico", 54 | "src/assets" 55 | ], 56 | "styles": [ 57 | "@angular/material/prebuilt-themes/indigo-pink.css", 58 | "src/styles.scss" 59 | ], 60 | "scripts": [] 61 | }, 62 | "configurations": { 63 | "production": { 64 | "budgets": [ 65 | { 66 | "type": "initial", 67 | "maximumWarning": "500kb", 68 | "maximumError": "1mb" 69 | }, 70 | { 71 | "type": "anyComponentStyle", 72 | "maximumWarning": "2kb", 73 | "maximumError": "4kb" 74 | } 75 | ], 76 | "outputHashing": "all" 77 | }, 78 | "development": { 79 | "optimization": false, 80 | "extractLicenses": false, 81 | "sourceMap": true 82 | } 83 | }, 84 | "defaultConfiguration": "production" 85 | }, 86 | "serve": { 87 | "builder": "@angular-devkit/build-angular:dev-server", 88 | "configurations": { 89 | "production": { 90 | "buildTarget": "advanced-angular-material-table:build:production" 91 | }, 92 | "development": { 93 | "buildTarget": "advanced-angular-material-table:build:development" 94 | } 95 | }, 96 | "defaultConfiguration": "development" 97 | }, 98 | "extract-i18n": { 99 | "builder": "@angular-devkit/build-angular:extract-i18n", 100 | "options": { 101 | "buildTarget": "advanced-angular-material-table:build" 102 | } 103 | } 104 | } 105 | } 106 | }, 107 | "schematics": { 108 | "@schematics/angular:component": { 109 | "type": "component" 110 | }, 111 | "@schematics/angular:directive": { 112 | "type": "directive" 113 | }, 114 | "@schematics/angular:service": { 115 | "type": "service" 116 | }, 117 | "@schematics/angular:guard": { 118 | "typeSeparator": "." 119 | }, 120 | "@schematics/angular:interceptor": { 121 | "typeSeparator": "." 122 | }, 123 | "@schematics/angular:module": { 124 | "typeSeparator": "." 125 | }, 126 | "@schematics/angular:pipe": { 127 | "typeSeparator": "." 128 | }, 129 | "@schematics/angular:resolver": { 130 | "typeSeparator": "." 131 | } 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /db.json: -------------------------------------------------------------------------------- 1 | {"products":[ 2 | {"id": 1, "name": "iPhone 13", "category": "Smartphone", "price": 699, "stock": 100, "created": "2021-09-14", "active": true}, 3 | {"id": 2, "name": "iPhone 13 Pro", "category": "Smartphone", "price": 999, "stock": 80, "created": "2021-09-14", "active": true}, 4 | {"id": 3, "name": "iPhone 13 Pro Max", "category": "Smartphone", "price": 1099, "stock": 70, "created": "2021-09-14", "active": true}, 5 | {"id": 4, "name": "iPhone 13 Mini", "category": "Smartphone", "price": 699, "stock": 50, "created": "2021-09-14", "active": true}, 6 | {"id": 5, "name": "iPad Pro", "category": "Tablet", "price": 799, "stock": 100, "created": "2021-04-20", "active": true}, 7 | {"id": 6, "name": "iPad Air", "category": "Tablet", "price": 599, "stock": 100, "created": "2020-09-15", "active": true}, 8 | {"id": 7, "name": "iPad Mini", "category": "Tablet", "price": 499, "stock": 100, "created": "2021-09-14", "active": true}, 9 | {"id": 8, "name": "iPad", "category": "Tablet", "price": 329, "stock": 100, "created": "2020-09-15", "active": true}, 10 | {"id": 9, "name": "MacBook Pro", "category": "Laptop", "price": 1299, "stock": 100, "created": "2020-11-10", "active": true}, 11 | {"id": 10, "name": "MacBook Air", "category": "Laptop", "price": 999, "stock": 100, "created": "2020-11-10", "active": true}, 12 | {"id": 11, "name": "iMac", "category": "Desktop", "price": 1299, "stock": 100, "created": "2021-04-20", "active": true}, 13 | {"id": 12, "name": "Mac Mini", "category": "Desktop", "price": 699, "stock": 100, "created": "2020-11-10", "active": true}, 14 | {"id": 13, "name": "Apple Watch Series 7", "category": "Smartwatch", "price": 399, "stock": 100, "created": "2021-09-14", "active": true}, 15 | {"id": 14, "name": "Apple Watch SE", "category": "Smartwatch", "price": 279, "stock": 100, "created": "2020-09-15", "active": true}, 16 | {"id": 15, "name": "AirPods Pro", "category": "Earbuds", "price": 249, "stock": 100, "created": "2019-10-30", "active": true}, 17 | {"id": 16, "name": "AirPods", "category": "Earbuds", "price": 159, "stock": 100, "created": "2019-03-20", "active": true}, 18 | {"id": 17, "name": "AirPods Max", "category": "Headphones", "price": 549, "stock": 100, "created": "2020-12-08", "active": true}, 19 | {"id": 18, "name": "HomePod Mini", "category": "Speaker", "price": 99, "stock": 100, "created": "2020-11-10", "active": true}, 20 | {"id": 19, "name": "Apple TV 4K", "category": "Media Player", "price": 179, "stock": 100, "created": "2021-04-20", "active": true}, 21 | {"id": 20, "name": "Apple Pencil", "category": "Accessory", "price": 99, "stock": 100, "created": "2018-11-07", "active": true} 22 | ]} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "advanced-angular-material-table", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "watch": "ng build --watch --configuration development" 9 | }, 10 | "private": true, 11 | "dependencies": { 12 | "@angular/animations": "^20.0.0", 13 | "@angular/cdk": "^20.0.1", 14 | "@angular/common": "^20.0.0", 15 | "@angular/compiler": "^20.0.0", 16 | "@angular/core": "^20.0.0", 17 | "@angular/forms": "^20.0.0", 18 | "@angular/material": "^20.0.1", 19 | "@angular/platform-browser": "^20.0.0", 20 | "@angular/platform-browser-dynamic": "^20.0.0", 21 | "@angular/router": "^20.0.0", 22 | "rxjs": "~7.8.2", 23 | "tslib": "^2.7.0", 24 | "zone.js": "~0.15.1" 25 | }, 26 | "devDependencies": { 27 | "@angular-devkit/build-angular": "^20.0.0", 28 | "@angular/cli": "^20.0.0", 29 | "@angular/compiler-cli": "^20.0.0", 30 | "json-server": "^1.0.0-beta.3", 31 | "typescript": "~5.8.3" 32 | } 33 | } -------------------------------------------------------------------------------- /src/app/advanced-material-table/advanced-material-table.component.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
Name{{ row.name }}Category{{ row.category }}Price{{ row.price }}Stock{{ row.stock }}Created{{ row.created }}Active{{ row.active }}
37 | 38 | 47 | -------------------------------------------------------------------------------- /src/app/advanced-material-table/advanced-material-table.component.scss: -------------------------------------------------------------------------------- 1 | .mat-header-cell .mat-sort-header-container.mat-sort-header-sorted .mat-sort-header-arrow 2 | { 3 | opacity: 1 !important; 4 | } -------------------------------------------------------------------------------- /src/app/advanced-material-table/advanced-material-table.component.ts: -------------------------------------------------------------------------------- 1 | import { AsyncPipe } from '@angular/common'; 2 | import { Component, inject, OnInit, ViewChild } from '@angular/core'; 3 | import { MatPaginator, MatPaginatorModule, PageEvent } from '@angular/material/paginator'; 4 | import { MatSortModule, Sort } from '@angular/material/sort'; 5 | import { MatTableModule } from '@angular/material/table'; 6 | import { catchError, first, Observable, of, tap } from 'rxjs'; 7 | 8 | import { ProductPage } from './product'; 9 | import { ProductService } from './product.service'; 10 | 11 | @Component({ 12 | selector: 'app-advanced-material-table', 13 | imports: [MatTableModule, MatPaginatorModule, AsyncPipe, MatSortModule], 14 | templateUrl: './advanced-material-table.component.html', 15 | styleUrls: ['./advanced-material-table.component.scss'] 16 | }) 17 | export class AdvancedMaterialTableComponent implements OnInit { 18 | 19 | productService = inject(ProductService); 20 | 21 | displayedColumns = ['name', 'category', 'price', 'stock', 'created', 'active']; 22 | 23 | products$!: Observable; 24 | productPage: ProductPage = { data: [], items: 0 }; 25 | 26 | @ViewChild(MatPaginator) paginator!: MatPaginator; 27 | 28 | pageIndex = 0; 29 | pageSize = 5; 30 | 31 | ngOnInit() { 32 | this.refresh(); 33 | } 34 | 35 | refresh(pageEvent: PageEvent = { length: 0, pageIndex: 0, pageSize: 5 }, sort: Sort = {active: 'name', direction: 'asc'}) { 36 | console.log('refresh',sort); 37 | this.productService.loadProducts(pageEvent.pageIndex, pageEvent.pageSize, sort.active, sort.direction) 38 | .pipe( 39 | first(), 40 | tap(() => { 41 | this.pageIndex = pageEvent.pageIndex; 42 | this.pageSize = pageEvent.pageSize; 43 | }), 44 | catchError(() => { 45 | console.error('Error loading products.'); 46 | return of({} as ProductPage); 47 | }) 48 | ).subscribe((productPage: ProductPage) => { 49 | this.productPage = productPage; 50 | }); 51 | } 52 | 53 | onSortChange(sort: Sort) { 54 | this.refresh({length: 0, pageIndex: 0, pageSize: this.pageSize}, sort); 55 | } 56 | 57 | } 58 | -------------------------------------------------------------------------------- /src/app/advanced-material-table/product.service.ts: -------------------------------------------------------------------------------- 1 | import { HttpClient } from '@angular/common/http'; 2 | import { inject, Injectable } from '@angular/core'; 3 | 4 | import { ProductPage } from './product'; 5 | 6 | @Injectable({ 7 | providedIn: 'root' 8 | }) 9 | export class ProductService { 10 | 11 | private http = inject(HttpClient); 12 | 13 | loadProducts(page = 0, pageSize = 5, sort = '', direction = '') { 14 | let _sort: string = ''; 15 | if (direction !== '') { 16 | _sort = direction === 'desc' ? '-' + sort: sort; 17 | } 18 | 19 | const params: any = { _page: page + 1, _per_page: pageSize }; 20 | if (_sort !== '') { 21 | params._sort = _sort; 22 | } 23 | 24 | return this.http.get('http://localhost:3000/products', { params }); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/app/advanced-material-table/product.ts: -------------------------------------------------------------------------------- 1 | export interface Product { 2 | id: number; 3 | name: string; 4 | category: string; 5 | price: number; 6 | stock: number; 7 | created: Date; 8 | active: boolean; 9 | } 10 | 11 | export interface ProductPage { 12 | data: Product[]; 13 | items: number; 14 | } -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { RouterOutlet } from '@angular/router'; 3 | 4 | import { AdvancedMaterialTableComponent } from './advanced-material-table/advanced-material-table.component'; 5 | 6 | @Component({ 7 | selector: 'app-root', 8 | imports: [RouterOutlet, AdvancedMaterialTableComponent], 9 | template: ` 10 | 11 | `, 12 | styles: [] 13 | }) 14 | export class AppComponent { 15 | title = 'advanced-angular-material-table'; 16 | } 17 | -------------------------------------------------------------------------------- /src/app/app.config.ts: -------------------------------------------------------------------------------- 1 | import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; 2 | import { ApplicationConfig } from '@angular/core'; 3 | import { provideAnimations } from '@angular/platform-browser/animations'; 4 | import { provideRouter } from '@angular/router'; 5 | 6 | import { routes } from './app.routes'; 7 | 8 | export const appConfig: ApplicationConfig = { 9 | providers: [ 10 | provideRouter(routes), 11 | provideHttpClient(withInterceptorsFromDi()), 12 | provideAnimations(), 13 | ] 14 | }; 15 | -------------------------------------------------------------------------------- /src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { Routes } from '@angular/router'; 2 | 3 | export const routes: Routes = []; 4 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loiane/advanced-angular-material-table/4985408433da6d41c22e1ec6073346053070c749/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/loiane/advanced-angular-material-table/4985408433da6d41c22e1ec6073346053070c749/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AdvancedAngularMaterialTable 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrapApplication } from '@angular/platform-browser'; 2 | import { appConfig } from './app/app.config'; 3 | import { AppComponent } from './app/app.component'; 4 | 5 | bootstrapApplication(AppComponent, appConfig) 6 | .catch((err) => console.error(err)); 7 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | html, body { height: 100%; } 4 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } 5 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts" 10 | ], 11 | "include": [ 12 | "src/**/*.d.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "outDir": "./dist/out-tsc", 6 | "forceConsistentCasingInFileNames": true, 7 | "strict": true, 8 | "noImplicitOverride": true, 9 | "noPropertyAccessFromIndexSignature": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "skipLibCheck": true, 13 | "esModuleInterop": true, 14 | "sourceMap": true, 15 | "declaration": false, 16 | "experimentalDecorators": true, 17 | "moduleResolution": "bundler", 18 | "importHelpers": true, 19 | "target": "ES2022", 20 | "module": "ES2022", 21 | "useDefineForClassFields": false, 22 | "lib": [ 23 | "ES2022", 24 | "dom" 25 | ] 26 | }, 27 | "angularCompilerOptions": { 28 | "enableI18nLegacyMessageIdFormat": false, 29 | "strictInjectionParameters": true, 30 | "strictInputAccessModifiers": true, 31 | "strictTemplates": true 32 | } 33 | } 34 | --------------------------------------------------------------------------------