add dataTable component and demo page

projects/material-addons/src/lib/data-table/data-table-action.ts

@@ -0,0 +1,5 @@
+export interface DataTableAction {
+  label: string;
+  action: string;
+  outputRow?: any;
+}

projects/material-addons/src/lib/data-table/data-table-column-header.ts

@@ -0,0 +1,6 @@
+export interface DataTableColumnHeader {
+  label: string;
+  isSortable?: boolean;
+  dataPropertyName: string;
+  isRightAligned?: boolean;
+}

projects/material-addons/src/lib/data-table/data-table.component.html

@@ -0,0 +1,82 @@
+<!-- Table actions -->
+<div *ngIf="tableActions?.length">
+  <mad-primary-button class="table-action" *ngFor="let tableAction of tableActions" (click)="onTableAction(tableAction)">
+    {{ tableAction.label }}
+  </mad-primary-button>
+</div>
+
+<!-- Row action buttons -->
+<mat-menu #menu="matMenu">
+  <ng-template matMenuContent let-element="element">
+    <button *ngFor="let rowAction of rowActions" mat-menu-item class="row-action" (click)="onRowEvent($event, element, rowAction)">
+      {{ rowAction.label }}
+    </button>
+  </ng-template>
+</mat-menu>
+
+<!-- Table filter -->
+<mat-form-field *ngIf="isFilterEnabled">
+  <mat-label>{{ filterLabel }}</mat-label>
+  <input matInput autocomplete="off" (keyup)="onFilter($event?.target?.value)" placeholder="{{ filterPlaceholder }}" />
+</mat-form-field>
+
+<!-- Table -->
+<div *ngIf="dataSource?.data?.length > 0; else noData" class="mad-table">
+  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortingEvent($event)">
+    <!-- Row actions column -->
+    <ng-container [matColumnDef]="ACTION_COLUMN_NAME" *ngIf="rowActions?.length">
+      <th scope="col" mat-header-cell *matHeaderCellDef class="row-action-button"></th>
+      <td mat-cell *matCellDef="let element" class="row-action-button">
+        <mad-icon-button [matMenuTriggerData]="{ element: element }" [matMenuTriggerFor]="menu">
+          <mat-icon>more_vert</mat-icon>
+        </mad-icon-button>
+      </td>
+    </ng-container>
+    <!-- Columns with data -->
+    <ng-container *ngFor="let column of columns" [matColumnDef]="column.label">
+      <ng-container *ngIf="column.isSortable; else noSort">
+        <th
+          scope="col"
+          mat-header-cell
+          *matHeaderCellDef
+          mat-sort-header="{{ column.label }}"
+          [arrowPosition]="column.isRightAligned ? 'before' : 'after'"
+          [class.text-right]="column.isRightAligned"
+        >
+          {{ column.label }}
+        </th>
+      </ng-container>
+      <ng-template #noSort>
+        <th scope="col" mat-header-cell *matHeaderCellDef [class.text-right]="column.isRightAligned">
+          {{ column.label }}
+        </th>
+      </ng-template>
+      <td mat-cell *matCellDef="let element" [class.text-right]="column.isRightAligned">
+        {{ element[column.dataPropertyName] }}
+      </td>
+    </ng-container>
+    <tr mat-header-row *matHeaderRowDef="columnNames"></tr>
+    <tr
+      mat-row
+      [class.clickable-table-row]="isRowClickable"
+      (click)="onRowEvent($event, row)"
+      *matRowDef="let row; columns: columnNames"
+    ></tr>
+  </table>
+
+  <!-- Pagination -->
+  <mat-paginator
+    [style.display]="isPaginationEnabled ? 'block' : 'none'"
+    [pageSize]="defaultPageSize"
+    [pageSizeOptions]="pageSizeOptions"
+    showFirstLastButtons
+  >
+  </mat-paginator>
+</div>
+
+<!-- No data alert -->
+<ng-template #noData>
+  <div class="noDataText">
+    {{ noDataText }}
+  </div>
+</ng-template>

projects/material-addons/src/lib/data-table/data-table.component.scss

@@ -0,0 +1,23 @@
+.text-right {
+  text-align: right !important;
+  padding-right: 24px !important;
+}
+
+.table-action {
+  margin-right: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.row-action-button {
+  width: 10px;
+}
+
+.noDataText {
+  width: 100%;
+  text-align: center;
+}
+
+.mad-table {
+  width: 100%;
+  overflow-x: auto;
+}

projects/material-addons/src/lib/data-table/data-table.component.ts

@@ -0,0 +1,104 @@
+import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort, Sort } from '@angular/material/sort';
+import { DataTableColumnHeader } from './data-table-column-header';
+import { DataTableAction } from './data-table-action';
+
+@Component({
+  selector: 'mad-data-table',
+  templateUrl: './data-table.component.html',
+  styleUrls: ['./data-table.component.scss'],
+})
+export class DataTableComponent implements OnInit, AfterViewInit {
+  readonly ACTION_COLUMN_NAME = '__action__';
+
+  @Input() columns: DataTableColumnHeader[] = [];
+  @Input() filterLabel = 'NOT SET';
+  @Input() filterPlaceholder = 'NOT SET';
+  @Input() noDataText: string;
+  @Input() pageSizeOptions = [5, 10, 15];
+  @Input() defaultPageSize = this.pageSizeOptions?.[0] || 10;
+  @Input() rowActions: DataTableAction[] = [];
+  @Input() tableActions: DataTableAction[] = [];
+
+  @Input() set displayedData(data: any[]) {
+    if (!this.dataSource) {
+      this.dataSource = new MatTableDataSource<any>(data);
+    } else {
+      this.dataSource.data = data;
+    }
+  }
+
+  @Input() set paginationEnabled(isPaginationEnabled: boolean) {
+    this.isPaginationEnabled = isPaginationEnabled;
+    // eslint-disable-next-line
+    const pageSize = this.isPaginationEnabled ? this.defaultPageSize : Number.MAX_VALUE;
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator._changePageSize(pageSize);
+    }
+  }
+
+  @Input()
+  set filterEnabled(isFilterEnabled: boolean) {
+    this.isFilterEnabled = isFilterEnabled;
+    this.setFilterValue(undefined);
+  }
+
+  @Output() tableAction = new EventEmitter<DataTableAction>();
+  @Output() rowAction = new EventEmitter<DataTableAction>();
+  @Output() sortEvent = new EventEmitter<Sort>();
+
+  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  dataSource: MatTableDataSource<any[]>;
+  columnNames: string[];
+  isRowClickable: boolean;
+  defaultAction: DataTableAction;
+  isFilterEnabled = false;
+  isPaginationEnabled = false;
+
+  ngOnInit(): void {
+    this.columnNames = this.columns.map(column => column.label);
+    this.isRowClickable = this.rowActions.length > 0;
+    if (this.isRowClickable) {
+      this.columnNames.unshift(this.ACTION_COLUMN_NAME);
+      this.defaultAction = this.rowActions[0];
+    }
+  }
+
+  ngAfterViewInit(): void {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+
+  }
+
+  onFilter(value: string): void {
+    this.setFilterValue(value);
+  }
+
+  onRowEvent(event: MouseEvent, row: any, action = this.defaultAction): void {
+    if (!!action && !this.isClickOnRowMenuIcon(event)) {
+      this.rowAction.emit({ ...action, outputRow: row });
+    }
+  }
+
+  onSortingEvent(sortingParams: Sort): void {
+    this.sortEvent.emit(sortingParams);
+  }
+
+  onTableAction(tableAction: DataTableAction): void {
+    if (!!tableAction) {
+      this.tableAction.emit(tableAction);
+    }
+  }
+
+  private setFilterValue(value: string): void {
+    this.dataSource.filter = value?.trim().toLowerCase();
+  }
+
+  private isClickOnRowMenuIcon(event: MouseEvent): boolean {
+    return (event?.target as HTMLElement)?.classList.contains('mat-icon');
+  }
+}

projects/material-addons/src/lib/data-table/data-table.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatTableModule } from '@angular/material/table';
+import { MatSortModule } from '@angular/material/sort';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { DataTableComponent } from './data-table.component';
+import { ButtonModule } from '../button/button.module';
+
+@NgModule({
+  declarations: [DataTableComponent],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatSortModule,
+    MatTableModule,
+    ButtonModule,
+  ],
+  exports: [DataTableComponent],
+})
+export class DataTableModule {}

projects/material-addons/src/lib/data-table/data-table.ts

@@ -0,0 +1,2 @@
+export { DataTableColumnHeader } from './data-table-column-header';
+export { DataTableAction } from './data-table-action';

projects/material-addons/src/lib/table/table.component.ts

@@ -73,7 +73,7 @@ export class TableComponent implements OnInit, AfterViewInit {
     this.dataSource.sort = this.sort;
     // set custom filter predicate to enable search for multiple search strings:
     // e.g. "one two three"
-    this.dataSource.filterPredicate = (data: any, filter: string) => 
+    this.dataSource.filterPredicate = (data: any, filter: string) =>
       !filter || filter.split(/\s+/).every(term => !!Object.keys(data).find(key => data[key].includes(term)));
   }
 

projects/material-addons/src/lib/table/table.module.ts

@@ -9,7 +9,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatSortModule } from '@angular/material/sort';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { TableComponent } from './table.component';
-import {ButtonModule} from "../button/button.module";
+import { ButtonModule } from '../button/button.module';
 
 @NgModule({
   declarations: [TableComponent],
@@ -23,7 +23,7 @@ import {ButtonModule} from "../button/button.module";
     MatPaginatorModule,
     MatSortModule,
     MatTableModule,
-    ButtonModule
+    ButtonModule,
   ],
   exports: [TableComponent],
 })

projects/material-addons/src/public-api.ts

@@ -17,6 +17,8 @@ export * from './lib/card/card.module';
 export * from './lib/quick-list/quick-list.module';
 export * from './lib/table/table';
 export * from './lib/table/table.module';
+export * from './lib/data-table/data-table';
+export * from './lib/data-table/data-table.module';
 export * from './lib/throttle-click/throttle-click.directive';
 export * from './lib/throttle-click/throttle-click.module';
 export * from './lib/stepper/stepper.component';

src/app/app-routing.module.ts

@@ -15,6 +15,7 @@ import { ThrottleClickDemoComponent } from './component-demos/throttle-click-dem
 import { StepperDemoComponent } from './component-demos/stepper-demo/stepper-demo.component';
 import { PageLayoutsComponent } from './component-demos/page-layouts/page-layouts.component';
 import { ExampleComponentsLayoutComponent } from './example-components-layout/example-components-layout.component';
+import { DataTableDemoComponent } from "./component-demos/data-table-demo/data-table-demo.component";
 
 const routes: Routes = [
   {
@@ -106,6 +107,14 @@ const routes: Routes = [
           i18n: 'components.demos.table',
         },
       },
+      {
+        path: 'data-table',
+        component: DataTableDemoComponent,
+        pathMatch: 'full',
+        data: {
+          i18n: 'components.demos.data-table',
+        },
+      },
       {
         path: 'stepper',
         component: StepperDemoComponent,