Multi Generic Table Library

Description

Multi Generic Table is a customizable Angular library for creating advanced tables with sorting, searching, pagination, and action buttons.

Installation

To use Multi Generic Table in your Angular application, follow these steps:

1. Install the library using npm:

   npm install multi-generic-table

2. Import MultiGenericTableModule in your app.module.ts file:

   import { MultiGenericTableModule } from "multi-generic-table";
   
   @NgModule({
     declarations: [
       // your components
     ],
     imports: [
       // other imports
       MultiGenericTableModule,
     ],
     providers: [],
     bootstrap: [AppComponent],
   })
   export class AppModule {}

Usage

app.component.ts

import { Component } from "@angular/core";
import { SortEvent } from "multi-generic-table/lib/sortable.directive";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  data = [
    {
      id: 1,
      Name: "name 1",
      age: 10,
      sex: "male",
    },
    {
      id: 2,
      Name: "name 2",
      age: 14,
      sex: "female",
    },
  ];

  columns: any[];
  pageSizeOptions: number[] = [10, 25, 50, 100];

  constructor() {
    this.initTableConfig();
  }

  initTableConfig(): void {
    if (this.data.length === 0) {
      return;
    }

    const obj = this.data[0];
    const columns = Object.keys(obj).map((key) => ({
      name: key,
      label: key.charAt(0).toUpperCase() + key.slice(1),
      formatter: (record: any) => record[key],
    }));

    this.columns = columns;
  }

  compare(v1: string | number, v2: string | number): any {
    return v1 < v2 ? -1 : v1 > v2 ? 1 : 0;
  }

  onSort(event: SortEvent): void {
    if (event.direction === "") {
      // handle no sorting
    } else {
      this.data = [...this.data].sort((a, b) => {
        const res = this.compare(a[event.column], b[event.column]);
        return event.direction === "asc" ? res : -res;
      });
    }
  }

  matches(tables: any, term: string): boolean {
    const keys = Object.keys(tables);
    for (const key of keys) {
      const value = tables[key];
      if (typeof value === "string" && value.toLowerCase().includes(term.toLowerCase())) {
        return true;
      } else if (typeof value === "number" && String(value).includes(term)) {
        return true;
      }
    }
    return false;
  }

  searchData(searchTerm: string): void {
    if (searchTerm === "") {
      this.initTableConfig();
    } else {
      let updatedData = this.data;
      updatedData = updatedData.filter((record) => this.matches(record, searchTerm));
      this.data = updatedData;
    }
  }

  actionButtonResponse(event: any): void {
    const actionType = event.actionType.charAt(0).toUpperCase() + event.actionType.slice(1);

    const index = event.index;
    const rowData = this.data[index];

    if (actionType === "edit") {
      // handle edit action
    } else if (actionType === "delete") {
      // handle delete action
    }
  }
}

app.component.html

<generic-table [tableData]="data" [columns]="columns" [pagination]="true" [pageSizeOptions]="pageSizeOptions" [hasRowSelection]="true" [isSearchable]="true" [isServerSidePagination]="false" (search)="searchData($event)" [isSortable]="true" (sort)="onSort($event)" [actionField]="true" [duplicateButton]="true" tableClasses="table-striped" (actionButtonResponse)="actionButtonResponse($event)"></generic-table>

Replace pageSizeOptions, handle edit action, and handle delete action with your specific implementation.