Press "Enter" to skip to content

Angular 4 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:


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> {

    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>;


angular 4 material table component Plugin/Github

See Demo And Download

Official Website(irossimoline): Click Here

This superior jQuery/javascript plugin is developed by irossimoline. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.