Dynamic Action Buttons

Question

Hi

I am passing below 2 columns to dynamic table. I want 1 more column = Actions. In some components i may have Edit..Delete.

In some components i may have 3 like Edit,Delete,View. How this can be done dynamically

this.columns = [
      { title: "Type", name: "name" , visible: true },      
      { title: "Description", name: "description" , visible: true },

Thanks

Prasad Raveendran · Answer

To make the dynamic table more flexible in terms of adding multiple actions, you can define a more generic approach where each row's actions can be specified individually. Here's how you can achieve this: Define a Row Actions Array in the Data : Each row in your data can have its own array of actions. this.data = [ { name: 'Type1', description: 'Description1', actions: ['Edit', 'Delete'] }, { name: 'Type2', description: 'Description2', actions: ['Edit', 'View'] } // Add more rows as needed ]; 2. Update the Template to Use Row-Specific Actions : Modify the template to use the actions array from each row. {{ column.title }} {{ row.name }} {{ row.description }} Edit Delete View 3. Component Code : Update the component to include the row-specific actions. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-dynamic-table', templateUrl: './dynamic-table.component.html', styleUrls: ['./dynamic-table.component.css'] }) export class DynamicTableComponent implements OnInit { columns = [ { title: "Type", name: "name", visible: true }, { title: "Description", name: "description", visible: true }, { title: "Actions", name: "actions", visible: true } ]; data = [ { name: 'Type1', description: 'Description1', actions: ['Edit', 'Delete'] }, { name: 'Type2', description: 'Description2', actions: ['Edit', 'View'] } // Add more rows as needed ]; ngOnInit(): void { // Any initialization logic if needed } edit(row: any): void { // Edit action logic console.log('Edit', row); } delete(row: any): void { // Delete action logic console.log('Delete', row); } view(row: any): void { // View action logic console.log('View', row); } } With this approach: Each row in the data array can specify its own set of actions. The template dynamically checks the actions array for each row to determine which buttons to display. The component methods ( edit , delete , view ) handle the respective actions for the rows. This setup makes it easy to add or remove actions for each row individually, providing a more dynamic and flexible solution.

Jayraj Chhaya · Answer

To dynamically add an "Actions" column with varying actions to a table in Angular, you can modify the this.columns array by adding a new object for the "Actions" column. You can then conditionally populate this column based on the component requirements. // Define the columns array with initial columns this.columns = [ { title: "Type", name: "name", visible: true }, { title: "Description", name: "description", visible: true }, ]; // Add a dynamic "Actions" column based on component requirements const actionsColumn = { title: "Actions", name: "actions", visible: true }; if (/* condition for Edit */) { actionsColumn.actions = ['Edit']; } if (/* condition for Delete */) { actionsColumn.actions = actionsColumn.actions ? [...actionsColumn.actions, 'Delete'] : ['Delete']; } if (/* condition for View */) { actionsColumn.actions = actionsColumn.actions ? [...actionsColumn.actions, 'View'] : ['View']; } // Push the dynamic "Actions" column to the columns array this.columns.push(actionsColumn);