Enhancing Interactivity: Integrating Actions in Our Angular Data Table

Welcome to the fourth part of our series on crafting a dynamic and reusable Angular data table. Having successfully set up pagination and sorting, we now turn our attention to a feature that will significantly boost our table’s interactivity: custom actions. In this article, we will delve into the implementation and management of custom actions like add, edit, delete, and more.

Setting Up Action Triggers

First things first, we establish a channel for action triggers in generic-data-table component

@Output() actionTriggered = new EventEmitter<{ action: string, item: any }>();

This event emitter plays a crucial role, sending information about the action and the associated item to the parent component whenever a user interacts with our table.

Implementing Action Handlers in the Parent Component

The real magic unfolds in the parent component, where we define the response to these actions.

The actionsMap: A Dictionary of Action Handlers

We craft an actionsMap, a straightforward object mapping action names to their corresponding handler functions:

actionsMap = {
  'add': (item) => this.addItem(item),
  'delete': (item) => this.deleteItem(item),
  'edit': (item) => this.editItem(item),
  // ... other action handlers ...
};

Each action like add, delete, edit, etc., is linked to a specific function that outlines what to do with the item in question.

addItem(item: any) {
    console.log("Implement Your Logic");
  }
  deleteItem(item: any) {
    console.log("Implement Your Logic");
  }
  editItem(item: any) {
    console.log("Implement Your Logic");
  }
  saveItem(item: any) {
    console.log("Implement Your Logic");
  }
  cancelEdit(item: any) {
    console.log("Implement Your Logic");
  }
  someFun(item: any) {
    console.log("Implement Your Logic");
  }

Responding to Actions

When an action is triggered from our table, the onActionTriggered method in the parent component springs into action:

onActionTriggered(event: { action: string, item: any }) {
  console.log(event.action);
  const actionHandler = this.actionsMap[event.action];
  if (actionHandler) {
    actionHandler(event.item);
  } else {
    console.error(`No handler for action: ${event.action}`);
  }
}

This method employs the actionsMap to locate and execute the suitable handler based on the action name, offering a flexible and scalable approach to managing various interactions within our table.

Integrating Actions in the Parent Component

<app-generic-data-table 
  [dataSource]="dataSource" 
  [columns]="columns" 
  [totalItems]="totalItemCount"
  [isServerSidePagination]="false" 
  [isServerSideSorting]="false"
  (pageChanged)="pageChanged($event.pageIndex, $event.pageSize)" 
  (sortChanged)="onSortChanged($event)">
  </app-generic-data-table>

Conclusion: A Table That Responds

With the integration of custom actions and a robust handling mechanism in the parent component, our generic-data-table has evolved into a more interactive and functional entity. These actions empower users not just to view but to also manipulate and interact with the data, transforming our table into a potent tool in any Angular application.

As we continue our series, we’ll delve into more ways to enhance our table, layering additional functionality and refinement. Stay tuned for more Angular adventures, where we will uncover further potentials of this versatile framework!