Angular material table (Angular 10+)

Forked from angular4-material-table

This project extends @angular/cdk data-table, also used in @angular/material table.

It extends @angular/cdk/collections DataSource in order to include a row structure, allowing row creation, inline row edition, deletion and validation.

Supported angular versions:
- Angular 17 (v17.x)
- 17.3 (v17.3.x)
- 17.2 (v17.2.x)
- Angular 16 (v0.16.0)
- Angular 15 (v0.15.0)
- Angular 14 (v0.14.0)
- Angular 11 (v0.11.0 and v0.12.0)
- Angular 10 (v0.10.0)
- Angular <= 9: Please use angular4-material-table

!@e-is/ngx-material-table

Installation

To install the package run:

npm install @e-is/ngx-material-table

Example

Example of using @e-is/ngx-material-table:

!@e-is/ngx-material-table

!Other example

Use

$3

To use this table, first of all you must check how use angular @angular/cdk data-table.

$3

Using this extension, you can set CDK data-table datasource with an instance of TableDataSource.

Using TableDataSource allows you to have some row related methods and data to implement add/edit/remove elements:
``typescript
class TableElement {
id: number;
editing: boolean;
currentData?: T;
originalData?: T;
source: TableDataSource;
validator: FormGroup; // Used only in reactive forms.

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

`typescript
class TableDataSource {

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

datasourceSubject: Subject;

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

createNew(): void;

getRow(id: number): AsyncTableElement;
}
`

$3

Angular material table use example:
!Example of @e-is/ngx-material-table use

See this package in action

#### Optional libraries
Optional libraries used in the example:
`
"@angular/material": "16.2.11",
"@angular/forms": 16.2.12", // <- For inline validation
"material-design-icons": "^3.0.1"
`

#### person-list-reactive-forms.component.html


`html


Name







Age












edit


done


undo
delete







`

#### person-list-template-driven.component.html


`html


Name







Age












edit


done


undo
delete







`

#### person-list.component.ts
`typescript
@Component({
selector: 'app-person-list',
providers: [
{provide: ValidatorService, useClass: PersonValidatorService }
],
templateUrl: './person-list.component.html',
})
export class PersonListComponent implements OnInit {

constructor(private personValidator: ValidatorService) { }

displayedColumns = ['name', 'age', 'actionsColumn'];

@Input() personList;
@Output() personListChange = new EventEmitter();

dataSource: TableDataSource;


ngOnInit() {
this.dataSource = new TableDataSource(this.personList, Person, this.personValidator);

this.dataSource.datasourceSubject.subscribe(personList => this.personListChange.emit(personList));
}
}

class Person {
name: string;
age: number;
}

@Injectable()
class PersonValidatorService implements ValidatorService {
getRowValidator(): FormGroup {
return new FormGroup({
'name': new FormControl(null, Validators.required),
'age': new FormControl(),
});
}
}

``

Contributions

Any suggestion or contribution will be appreciated.

Change log

See Change log