CODEWITHSUNDEEP
angulartypescript
MMR
MMR

Reputation: 3039

How to use editable table in angular2

I am trying to use editable table in angular but didnt found any good articles,can anyone suggest some.Thanks. I tried this,

<ng-table [config]="config.sorting"
          (tableChanged)="onChangeTable(config)" 
          [rows]="rows" [columns]="columns" >
</ng-table>

This is my columns and rows,

 rows: Array<any> = [];
  columns: Array<any> = [
    {title: 'Name', name: 'accountname'},
    {title: 'Email', name: 'email', sort: false},
    {title: 'Phone', name: 'phone', sort: 'asc'},
  ];

but i want edit and delete buttons on each column.How can i get that?

Upvotes: 1

Views: 7054

Answers (2)

N. berouain
N. berouain

Reputation: 1321

can you take a look at this link, its a good example using directives!

this is the directive that he used:

@Directive({
selector: '[contenteditableModel]'
})
export class ContenteditableModelDirective implements OnChanges {

  @Input('contenteditableModel')
  public model: any;

  @Output('contenteditableModelChange')
  public update = new EventEmitter();

  private _lastViewModel: any;

  constructor(private elRef: ElementRef) {}

  public ngOnChanges(changes: SimpleChanges): void {
     if(this._lastViewModel !== changes['model'].currentValue){
        this._lastViewModel = this.model;
        this._refreshView();
     }
  }

  @HostListener('blur')
  public onBlur() {
    var value = this.elRef.nativeElement.innerText;
    this._lastViewModel = value;
    this.update.emit(value);
  }

  private _refreshView() {
    this.elRef.nativeElement.innerText = this.model;
  }
}

and this is how to use it:

<h2 contenteditable="true" [(contenteditableModel)]="text"></h2>

Upvotes: 2

Webking
Webking

Reputation: 1862

If you want a good datatable plugin for angular2 i can recommend PrimeNG, they have a datatable that we are using in our projects that are really good with support for editable, sorting, filtering. PrimeNG is a collection of rich UI components for Angular 2. http://www.primefaces.org/primeng/#/datatableeditable

enter image description here

Upvotes: 2

Related Questions