how to add a button to smart table

[mariem11]

how can i add a button in smart table. i found this link https://akveo.github.io/ng2-smart-table/#/examples/custom-editors-viewers where they integrated the button inside the cell, but i couldn' find the code. i tried this code but it doesn't work ` columns:

{ stat: { title: 'stat', type: 'html', valuePrepareFunction: (value) => { return <button nbButton>bouton</button>; } }, }`

[mohammad0omar]

Hey this is the link for the code

https://github.com/akveo/ng2-smart-table/blob/master/projects/demo/src/app/pages/examples/custom-edit-view/basic-example-button-view.component.ts

[mariem11]

@mohammad0omar thank you very much. how do i do to create 3 buttons with each a different function

[mohammad0omar]

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; import { ViewCell } from 'ng2-smart-table';

@Component({ selector: 'button-view', template: <button (click)="onClickOne()">{{ renderValue }}</button> <button (click)="onClickTwo()">{{ renderValue }}</button> <button (click)="onClickThree()">{{ renderValue }}</button>, }) export class ButtonViewComponent implements ViewCell, OnInit { renderValue: string;

@Input() value: string | number; @Input() rowData: any;

@Output() clickOne: EventEmitter = new EventEmitter(); @Output() clickTwo: EventEmitter = new EventEmitter(); @Output() clickThree: EventEmitter = new EventEmitter(); ngOnInit() { this.renderValue = this.value.toString().toUpperCase(); }

onClickOne() { this.clickOne.emit(this.rowData); } onClickTwo() { this.clickTwo.emit(this.rowData); } onClickThree() { this.clickThree.emit(this.rowData); } }

@Component({ selector: 'basic-example-button-view', template: <ng2-smart-table [settings]="settings" [source]="data"></ng2-smart-table>, }) export class BasicExampleButtonViewComponent implements OnInit {

settings = { columns: { id: { title: 'ID', }, name: { title: 'Full Name', }, username: { title: 'User Name', }, email: { title: 'Email', }, button: { title: 'Button', type: 'custom', renderComponent: ButtonViewComponent, onComponentInitFunction(instance) { instance.clickOne.subscribe(row => { alert(${row.name} saved!) }); instance.clickTwo.subscribe(row => { alert(${row.name} saved!) }); instance.clickThree.subscribe(row => { alert(${row.name} saved!) }); } }, }, };

data = [ { id: 1, name: 'Leanne Graham', username: 'Bret', email: '[email protected]', button: 'Button #1', }, { id: 2, name: 'Ervin Howell', username: 'Antonette', email: '[email protected]', button: 'Button #2', }, { id: 3, name: 'Clementine Bauch', username: 'Samantha', email: '[email protected]', button: 'Button #3', }, { id: 4, name: 'Patricia Lebsack', username: 'Karianne', email: '[email protected]', button: 'Button #4', }, { id: 5, name: 'Chelsey Dietrich', username: 'Kamren', email: '[email protected]', button: 'Button #5', }, ];

constructor() { }

ngOnInit() { }

}

[mariem11]

@mohammad0omar thank you . is there a way to have the nbbutton style. i put it but it didn't work. it shows a button without style <button nbButton outline status="primary" (click)="onClick()" >Edit</button>

[mohammad0omar]

your code should work, I do not know why no style is applied, this needs you to debug.

[rami-alloush]

@mariem11, you have to add the BasicExampleButtonViewComponent to the declarations part of the module for the styles to apply

[rami-alloush]

I'm facing a problem that when I click the button the (userRowSelect) hook is also activated .. any suggestions?