Albix Generic Table Library

Description

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

Installation

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

1. Install the library using npm:

   npm install albix-generic-table

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

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

Usage

app.component.ts

import { Component } from '@angular/core';
import { SortEvent } from 'albix-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

<lib-albix-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"
            tableClasses="table-striped" (actionButtonResponse)="actionButtonResponse($event)"></lib-albix-generic-table>

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