material advanced table

Angular Material Enhanced Table with less boilerplate

Features

• Abstraction of html elements|typescript boilerplate needed for creating a table
• Easy and precise column mapping with class decorators
• Advanced column filtering
• Loading / Empty Data Templates
• All MatTable features included (Pagination, Sorting, Search...)

Installation

1. Install using npm

   npm i mat-advanced-table

Demo

View demo

API

@Column

verboseName: string The column label to be displayed

key: string; the column key: By default it's the same as the attribute name

order: number The displayed order of the column

propertyType: "String" | "Date" | "Number" | "Object" The popriety primitive type collected from the ProprietyDescriptor and can be overriden by setting a value

canSort: boolean Whether this column is sortable

sortBy: "asc" | "desc" The default sorting order

visible: boolean Whether the column is visible by default

format: string | false Date|number format as in Angular format pipe

sortByAccessor: (instance) => any Callback used for sorting the complex object

propertyAccessor: (obj: any, thisRef?) => any Callback used for accessing complex object primitives

eg:

 @Column({ propertyAccessor: (obj:UserModel, thisRef) => obj.role.name })
 rolename :string

MatAdvancedTableComponent

@Input() columns: ColumnModel[] (Required) : The table column array definition. it comes from the @Column decorator

@Input() data: any[] (Optional) : The data to be displayed

@Input() loading: boolean (Optional) : Whether data is loading

@Input() legend: TemplateRef<any> (Optional) : The legend template

@Input() noDataTemplate: TemplateRef<any> (Optional) : The empty data template

@Input() loadingTemplate: TemplateRef<any> (Optional) : The loading data template

@Input() selection: SelectionModel (Optional) : The table initial selection

@Input() rowNgClassFun: (item: any) => string (Optional) : A helper function to returns a row dependant class string

@Input() options:NgxMatTableOptions (Optional) : The table options with it's defaults values : NgxMatTableOptionsDefaults

Option	Definition	Type	Default
minCellWidth	The table cell's min-width style attribute in px	number	80
maxCellWidth	The table cell's max-width style attribute in px	number	200
classList	a list of classes to add to the table (eg: ['table-responsive','compact']...	string[]	[]
title	The table header title	string	null
styles: NgxMatTableStyleOptions	The table custom styles attributes	{ denseDisplay: false, selectedRowClass: "ngx-mat-selected", tableHeaderClass: "ngx-thead", tableRowHeight: "1rem", },
actions	Whether to show the actions column (Template is issued with the MatCellTemplate Directive)	boolean	false
actionsLabel	The actions column header label	string	Actions
paging	Whether to show the MatPaginator	boolean	true
search	Whether to show the Search bar and activate the advanced filter	boolean	true
selection	whether to show the selection column	boolean	false
placeholder	Empty value placeholder	string	N/A
emptyDataText	The no data message to be displayed under the table columns	string	No Data available
loadingText	The loading text to be displayed when data is loading	string	Please wait

MatCellTemplateDirective (Selector : matATCellTemplate)

@Input('matATCellTemplate') name:string (Required) : The column cell template name and it must be present in the @Table definition

Usage

Quick usage

import the MatAdvancedTableModule to the modules you are using it in

import { MatAdvancedTableModule } from "mat-table-advanced";

@NgModule({
  declarations: [AppComponent],
  imports: [CommonModule, MatAdvancedTableModule],
})
export class AppModule {}

Use @Table and @Column decorators to define table columns

export enum UserRoles {
  Moderator,
  Guest,
}
@Table
export class UserModel {
  @Column({
    verboseName: "User ID",
    canSort: true,
    sortBy: "desc",
  })
  id: number;
  @Column({ verboseName: "User name", canSort: true })
  username: string;
  @Column({ verboseName: "Role", canSort: true })
  role: UserRoles;
}

then load the columns in your host component ts file

import {MatAdvancedTableService} from 'mat-advanced-table';
 constructor(
    private tableService: MatAdvancedTableService
  ) {}
  users$: Observable<UserModel[]>;
  userModelColumns: ColumnModel[];
  ngOnInit() {
    this.users$ = of([
        userId: 1,
        username: "admin",
        displayName: "Admin ",
        isAdmin: true,
        role: UserRoles.Moderator,
    ])
    this.userModelColumns = this.tableService.getColumnsOfType(
      UserModel
    );
  }

after that you're ready to use it in the component template as

<mat-table-advanced
  [columns]="userModelColumns"
  [data]="users$ | async"
></mat-table-advanced>

Advanced usage

1. Using actions cell with a template cell directive:

CAUTION: Use actions as the template name to allow the table to bind correctly to the actions column, if another column in your defined table contains the same key, pray to change it in the ColumnModel.key option.

@Component({
  selector: "app-component",
  template: `<mat-advanced-table
    [data]="data"
    [columns]="columns"
    [options]="{ actions: true }"
  >
    <ng-template [matATCellTemplate]="'actions'">
      <button mat-button (click)="deleteUser($event)">delete</button>
    </ng-template>
  </mat-advanced-table>`,
  styles: [``],
})
export class AppComponent implements OnInit {
  constructor(private matAdvancedService: MatAdvancedTableService) {}
  columns;
  data;
  ngOnInit(): void {
    this.columns = this.matAdvancedService.getColumnsOfType(MockClass);
    this.data = [
      {
        // some mock data
      },
    ];
  }
  deleteUser(user) {
    console.log("User Deleted", user);
  }
}

2. Using custom data loader

@Component({
  selector: "app-component",
  template: `<mat-advanced-table
    [data]="data"
    [columns]="columns"
    [loadingTemplate]="loadingTmp"
    [loading]="isLoading"
  >
    <ng-template #loadingTmp>
      <your-custom-loader [text]="'Please wait...'"></your-custom-loader>
    </ng-template>
  </mat-advanced-table>`,
  styles: [``],
})
export class AppComponent implements OnInit {
  constructor(private matAdvancedService: MatAdvancedTableService) {}
  columns;
  data;
  isLoading = false;
  ngOnInit(): void {
    this.columns = this.matAdvancedService.getColumnsOfType(MockClass);
    this.loadData();
  }
  loadData(user) {
    this.isLoading = true;
    setTimeout(() => {
      this.data = [
        {
          // some mock data
        },
      ];
      this.isLoading = false;
    }, 5000);
  }
}

License

MIT