Dynamic Action Buttons

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:

1. 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:

1. Each row in the data array can specify its own set of actions.
2. The template dynamically checks the actions array for each row to determine which buttons to display.
3. 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.

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);