Angular Table Structure To Allow Row Insertion, Edition, Validation and Deletion

Angular4 Table of Materials DataSource to include a row structure, allowing row creation, embedded row versioning, deletion, and validation.

angular material table example, angular material table dynamic columns, angular material table with multiple expandable rows, angular material table style

How to make use of it:

Installation:

npm install angular4-material-table

Using TableDataSource allows you to get some methods and data related to rows to implement add/edit/remove items:

class TableElement<T> {
  id: number;
  editing: boolean;
  currentData?: T;
  originalData: T;
  source: TableDataSource<T>;
  validator: FormGroup; // Used only in reactive forms.

  delete(): void;
  confirmEditCreate(): boolean;
  startEdit(): void;
  cancelOrDelete(): void;
  isValid(): boolean; // Used only in reactive forms.
}

class TableDataSource<T> {

  constructor(
    data: T[],
    dataType?: new () => T,
    validatorService?: ValidatorService,
    config = { prependNewElements: false, suppressErrors: false });

  datasourceSubject: Subject<T[]>;

  updateDatasource(data: T[], options = { emitEvent: true }): void;

  createNew(): void;

  getRow(id: number): TableElement<T>;
}