Tips for incorporating buttons into columns on ng2-table within Angular 2

Question

Tips for incorporating buttons into columns on ng2-table within Angular 2

I am in need of a table with an edit button in every column using ng2. However, I have encountered an issue placing the buttons at the end of each column.

Here is my HTML code:

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

And here is my TypeScript code:

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

I wish to add an edit and delete button to each column. Can anyone provide guidance on how to achieve this?

angular typescript

Answer 1

Answer №1

To achieve this functionality, we can utilize Jquery library.

All we need to do is include an additional field named "Action" in the public column array.

Next, we append a new action which consists of a string of HTML code containing buttons.

constructor(private moduleviewservice:ModuleViewService,private _router:Router){
        this.moduleviewservice.getModule().subscribe(
            data=>{
                this.model=data;  
                  this.data=data;
                    for(let i=0;i<data.length;i++){
                        this.data[+i]["action"]="<a> <span class=\"viewEmployee\" data-id="+data[+i].moduleId+"> <i class=\"fa fa-file-text\"  ></i> </span> </a> <a > <span class=\"editEmployee\"  data-id="+data[+i].moduleId+"> <i class=\"fa fa-pencil\" ></i> </span> </a> <a > <span class=\"deleteEmployee\"  data-id="+data[+i].moduleId+"> <i class=\"fa fa-trash-o\" ></i> </span> </a>";
                    }
                    this.length = this.data.length;  
                    this.data=data;                 
                    console.log(this.data);
                    
                    this.onChangeTable(this.config);            
        });   
    }
    /*NG@ TABLE */

   public columns:Array<any> = [
        {title: 'Module Name', name: 'moduleName'},
        {title: 'Module Description', name: 'moduleDesc',},            
        {title: 'Action',   name:'action', sort:false},   
  ];
  
  /*IN NG ON INIT I have used this to call in (jquery)*/
  
   ngOnInit(){
        let route=this._router;
            let moduleviewservice=this.moduleviewservice;
            $(document).on('click','.viewEmployee',function(data:any){
              
              let j=$(this).attr('data-id');
              moduleviewservice.putSingleId(j);
               route.navigate( ['/home', {outlets: {'menu': 'home/singleViewModule'}}]);
            });
            $(document).on('click','.editEmployee',function(data:any){
              let j=$(this).attr('data-id');
              moduleviewservice.putSingleId(j);
               route.navigate( ['/home', {outlets: {'menu': 'home/editModule'}}]);
            });
            $(document).on('click','.deleteEmployee',function(data:any){
              let j=$(this).attr('data-id');
              moduleviewservice.putSingleId(j);
               route.navigate( ['/home', {outlets: {'menu': 'home/deleteModule'}}]);
            }); 
    }

This implementation will ensure proper display and functioning of the actions. https://i.sstatic.net/AKZuo.png

Answer 2

To achieve this functionality, we can utilize Jquery library.

All we need to do is include an additional field named "Action" in the public column array.

Next, we append a new action which consists of a string of HTML code containing buttons.

constructor(private moduleviewservice:ModuleViewService,private _router:Router){
        this.moduleviewservice.getModule().subscribe(
            data=>{
                this.model=data;  
                  this.data=data;
                    for(let i=0;i<data.length;i++){
                        this.data[+i]["action"]="<a> <span class=\"viewEmployee\" data-id="+data[+i].moduleId+"> <i class=\"fa fa-file-text\"  ></i> </span> </a> <a > <span class=\"editEmployee\"  data-id="+data[+i].moduleId+"> <i class=\"fa fa-pencil\" ></i> </span> </a> <a > <span class=\"deleteEmployee\"  data-id="+data[+i].moduleId+"> <i class=\"fa fa-trash-o\" ></i> </span> </a>";
                    }
                    this.length = this.data.length;  
                    this.data=data;                 
                    console.log(this.data);
                    
                    this.onChangeTable(this.config);            
        });   
    }
    /*NG@ TABLE */

   public columns:Array<any> = [
        {title: 'Module Name', name: 'moduleName'},
        {title: 'Module Description', name: 'moduleDesc',},            
        {title: 'Action',   name:'action', sort:false},   
  ];
  
  /*IN NG ON INIT I have used this to call in (jquery)*/
  
   ngOnInit(){
        let route=this._router;
            let moduleviewservice=this.moduleviewservice;
            $(document).on('click','.viewEmployee',function(data:any){
              
              let j=$(this).attr('data-id');
              moduleviewservice.putSingleId(j);
               route.navigate( ['/home', {outlets: {'menu': 'home/singleViewModule'}}]);
            });
            $(document).on('click','.editEmployee',function(data:any){
              let j=$(this).attr('data-id');
              moduleviewservice.putSingleId(j);
               route.navigate( ['/home', {outlets: {'menu': 'home/editModule'}}]);
            });
            $(document).on('click','.deleteEmployee',function(data:any){
              let j=$(this).attr('data-id');
              moduleviewservice.putSingleId(j);
               route.navigate( ['/home', {outlets: {'menu': 'home/deleteModule'}}]);
            }); 
    }

This implementation will ensure proper display and functioning of the actions. https://i.sstatic.net/AKZuo.png

Answer 3

Answer №2

To easily add a button, simply insert it into the rows[] array:

rows = [{
  id: '1',
  title: 'title test1 <button type="button" class="btn btn-primary">Test Button in ng2-table</button>'
}, {
  id: '2',
  title: 'title test2'
}, {
  id: '3',
  title: 'title test3'
}]

The button will be displayed in the second column of the first row. Check out a live demo here:

You can actually insert any component into your table using this method (as long as it works with angular!)

Answer 4

To easily add a button, simply insert it into the rows[] array:

rows = [{
  id: '1',
  title: 'title test1 <button type="button" class="btn btn-primary">Test Button in ng2-table</button>'
}, {
  id: '2',
  title: 'title test2'
}, {
  id: '3',
  title: 'title test3'
}]

The button will be displayed in the second column of the first row. Check out a live demo here:

You can actually insert any component into your table using this method (as long as it works with angular!)

Answer 5

Answer №3

After encountering the same issue, I eventually discovered a solution. If you're looking for the best data table to use with angular 2, I highly recommend checking out PRIMENG.

This powerful tool offers a wide range of features, including pagination, search, filtering, sorting, and the ability to add custom actions to each row. I urge you to give it a try!

Answer 6

After encountering the same issue, I eventually discovered a solution. If you're looking for the best data table to use with angular 2, I highly recommend checking out PRIMENG.

This powerful tool offers a wide range of features, including pagination, search, filtering, sorting, and the ability to add custom actions to each row. I urge you to give it a try!

Tips for incorporating buttons into columns on ng2-table within Angular 2

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble with importing and receiving the error message "Module 'clone' not found."

Using Laravel 5.2 passport for secure authentication with Angular 2

Having trouble appending a new attribute to the Mongoose output

Issue with building Webpack React Router DOM configuration

Angular: Enable function to await Observable completion before returning result

Typescript causing undefined React Router match issue

Encountered an issue when attempting to access a user's full details page in Angular 14

Trigger a (click) event on the MatTab in Material design

Trouble with Displaying Events on React Big Calendar with Typescript

Searching for MongoDB / Mongoose - Using FindOneById with specific conditions to match the value of an array inside an object nestled within another array

Angular failing to render data in user interface

A guide on dynamically adding a CSS stylesheet to an Angular component during runtime

Testing Angular: Implementing Mock Classes and Services using the Any Data Type

Retrieving display format or formatted value from an object with Moment.js

Angular onscroll event creating a parallax effect

Steps for transferring an uploaded .CSV file to a Web service

The collaboration of React hooks, typescript, mongoose, express, and socket.io in perfect harmony

Analyzing the elements of an array in JavaScript and making modifications to it based on their values

Protractor's slow performance is due to continually checking for elements that do not exist

Update the color of the label on the ng2-charts/charts.js pie chart