[Table] Add a full-featured but limited table component and array-based data source

Introduce a new table component that would use <mat-table> and come with built-in features including sorting, pagination, selection, etc. Would accept an array-based data input so users do not need to create a data source to use the table.

This would allow people to quickly use a table but would limit their ability to customize behavior and would be very opinionated on user experience.

Example concept:

<mat-simple-table #simpleTable [data]="_peopleDatabase.data" pageSize="25">
  <mat-simple-column headerText="User ID" property="id"></mat-simple-column>
  <mat-simple-column headerText="Name" property="name"></mat-simple-column>
  <mat-simple-column headerText="Progress" property="progress"></mat-simple-column>
  <mat-simple-column headerText="Color" property="color"></mat-simple-column>
</mat-simple-table>

Notes:

• Long column names should be truncated and display a tooltip on hover

[b-johnse]

@mykolav here’s an updated version as a angular 14 standalone component that I have working:

import { CommonModule } from '@angular/common';
import { Component, HostBinding, Input, OnDestroy, OnInit, Optional, ViewChild } from '@angular/core';
import { MatSortModule } from '@angular/material/sort';
import {
  MatCellDef,
  MatColumnDef,
  MatFooterCellDef,
  MatHeaderCellDef,
  MatTable,
  MatTableModule,
} from '@angular/material/table';

@Component({
  standalone: true,
  imports: [MatTableModule, CommonModule, MatSortModule],
  selector: 'evt-table-column-currency',
  template: `
    <ng-container matColumnDef>
      <th mat-header-cell *matHeaderCellDef>
        <span mat-sort-header> {{ label ?? capitalize(prop) }}</span>
      </th>
      <td mat-cell *matCellDef="let row">{{ row[prop] | currency }}</td>
    </ng-container>
  `,
})
export class TableCurrencyColumnComponent implements OnDestroy, OnInit {
  @Input() prop = '';
  @Input() label: string | undefined;

  constructor(@Optional() public table: MatTable<unknown>) {}

  @HostBinding('attr.ariaHidden') ariaHidden!: true;
  @HostBinding('class') classes!: 'column-template cdk-visually-hidden';

  @ViewChild(MatColumnDef, { static: true }) columnDef!: MatColumnDef;
  @ViewChild(MatCellDef, { static: true }) cellDef!: MatCellDef;
  @ViewChild(MatHeaderCellDef, { static: true }) headerCellDef!: MatHeaderCellDef;
  @ViewChild(MatFooterCellDef, { static: true }) footerCellDef!: MatFooterCellDef;

  ngOnInit(): void {
    if (this.table && this.columnDef) {
      this.columnDef.name = this.prop;
      this.columnDef.cell = this.cellDef;
      this.columnDef.headerCell = this.headerCellDef;
      this.columnDef.footerCell = this.footerCellDef;
      this.table.addColumnDef(this.columnDef);
    }
  }

  ngOnDestroy(): void {
    if (this.table) {
      this.table.removeColumnDef(this.columnDef);
    }
  }

  capitalize(value: string): string {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

[kussmaul]

FYI, I finally got this to work, by explicitly connecting the columnDef to its children. I don’t know if this happens later, or if it should happen sooner but doesn’t for some reason.

  @ViewChild(    MatColumnDef, { static : true })     columnDef ! :     MatColumnDef;
  @ViewChild(      MatCellDef, { static : true })       cellDef ! :       MatCellDef;
  @ViewChild(MatHeaderCellDef, { static : true }) headerCellDef ! : MatHeaderCellDef;
  @ViewChild(MatFooterCellDef, { static : true }) footerCellDef ! : MatFooterCellDef;

  ngOnInit() {
    if (this.table && this.columnDef) {
      this.columnDef.cell       = this.cellDef;
      this.columnDef.headerCell = this.headerCellDef;
      this.columnDef.footerCell = this.footerCellDef;
      this.table.addColumnDef(this.columnDef);
    }
  }