Angular Material Table with Edit and Delete Button | ng-editable-table

ng-editable-table is a dynamic angular table, you can add, edit or delete rows without any style sheet.

inline editable table angular 8, angularmaterial editable table, angularmaterial table with edit and delete button, angularmaterial table editable row

How to make use of it:

Installation:

npm install ng-editable-table --save

1. You will need to add the EditableTableModule to your application module.

import { EditableTableModule } from 'ng-editable-table/editable-table/editable-table.module';
    @NgModule({
      imports: [
        EditableTableModule
      ],
      declarations: [
        AppComponent
      ],
      providers: [],
      bootstrap: [AppComponent]
      export class AppModule {}
})

2. You need to create an array of headers and rows to use the ng-editable-table directive.

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tableHeaders = ['Header 1', 'Header 2', 'Header 3'];
  tableRows = [
    ['Cell', 'Cell', 'Cell'],
    ['Cell', 'Cell', 'Cell'],
    ['Cell', 'Cell', 'Cell']
  ];
    constructor() {}
  ...
}

3. Finally, add this directive to your html:

<nv-editable-table [table-headers]="tableHeaders" [table-rows]="tableRows" ></nv-editable-table>

Directive Options

You can customize the table options by the nv-editable-table the directive, the available options are:

You can catch the edit and delete events using the directive outputs:

angular editable table component, ng-editable-table Plugin/Github, angular editable table row, angular material inline editable table

See Demo And Download

Official Website(BennyFranco): Click Here

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