mh-prime-dynamic-table : Your Data, Your Rules!

Welcome to mh-prime-dynamic-table, where creating dynamic data tables in your Angular project has never been easier or more enjoyable! Powered by *PrimeNG's versatile p-table component, mh-prime-dynamic-table empowers you to effortlessly craft interactive data tables with features like filtering, sorting, and pagination. Let's dive in and unleash the magic of data visualization!

Quick Setup ⚙️

First things first, make sure you have the coolest data visualization toolkit - PrimeNG - on board anong with PrimeIcons and PrimeFlex. If not, let's get it installed:

npm install primeng
npm install primeicons
npm install primeflex

With PrimeNG ready to roll, now's the time to install mh-prime-dynamic-table:

npm install mh-prime-dynamic-table

Getting Started 🚀

Now that we're all set up, let's integrate mh-prime-dynamic-table into your Angular project:

1. Import the DynamicTableModule: Head over to your Angular module file and import the MhPrimeDynamicTableModule:

import { MhPrimeDynamicTableModule } from 'mh-prime-dynamic-table';

@NgModule({
  imports: [
    MhPrimeDynamicTableModule
  ]
})
export class YourModule { }

2.Use the mh-prime-dynamic-table Component: Drop the mh-prime-dynamic-table component into your component template. Flex your creative muscles by passing in your data and configuring your table:

<mh-prime-dynamic-table
  size="small"
  [numberRowsShown]="10"
  [rowsPerPageOptions]="[10, 30, 50]"
  [data]="tableData"
  rowSelectionMode="multiple",
  [isLoading]="isTableDataLoading"
  [actionButtons]="tableActionButton"
  [childActionButtons]="tableChildActionButton"
  (rowSelect)="handleRowSelection($event)"
  (actionButtonClicked)="handleButtonClick($event)"
  (queryParameterChange)="handQueryParameterChange($event)",
  (searchKeyChange)="handsearchKeyChange($event)",
>
</mh-prime-dynamic-table>

3. Handle the Magic: Handle the output emitted by mh-prime-dynamic-table and let your imagination run wild with the endless possibilities:

handleTableOutput(output: any) {
  // Let your data dance to the tunes of user interactions
}

Properties & Emitters: Your Playground 🔣

• Properties:

Name	Type	Default	Description
data	any[]	null	An array of objects to display.
numberRowsShown	number	10	Number of rows to display per page.
rowsPerPageOptions	any[]	[10,20,30]	Array of integer/object values to display inside rows per page dropdown of paginator
rowSelectionMode	"none" | "single" | "multiple"	"none"	Specifies the selection mode, valid values are "single" and "multiple".
selectedRow	any[]	"none"	Array of selected rows passed from the parent component.
size	"small" | "normal" | "large"	"normal"	Specifies the table size, valid values are "small","normal" and "large".
actionButtons	ActionButtonConfig[]	null	Array of object to display action buttons inside rows
childActionButtons	ActionButtonConfig[]	null	Array of object to display action buttons inside child rows
showPaginator	boolean	false	Show or hide the paginator.
disableSorting	boolean	false	Disable sorting.
disableFiltering	boolean	false	Disable filtering.
isLoading	boolean	false	Displays a loading placeholder to indicate data load is in progress.
showTopMenubar	boolean	false	Show or hide top menubar.
showGlobalSearch	boolean	false	Show or hide global search.

• Emitters:

Name	Parameters	Description
queryParameterChange	event : TableFilterEvent	Callback to invoke when data is filtered.
actionButtonClicked	event : ActionButtonEvent	Callback to invoke when action button clicked.
rowSelect	event : any	Callback to invoke on selection changed.
searchKeyChange	event : string	Callback to invoke on search key changed.

Example Time! 🌟

• AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MhPrimeDynamicTableModule } from 'mh-prime-dynamic-table';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MhPrimeDynamicTableModule,
    HttpClientModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• Component:

import { Component, OnInit } from '@angular/core';
import { ActionButtonConfig, DynamicTable, DynamicTableQueryParameters } from 'mh-prime-dynamic-table';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'Dynamic Table Example';
  tableData: DynamicTable<userDetils> | any;
  tableQueryParameters: DynamicTableQueryParameters | any;
  tableActionButton: ActionButtonConfig[] = [];
  isTableDataLoading!: boolean;
  constructor(private http: HttpClient) { }
  ngOnInit(): void {
    this.tableActionButton = [
      {
        buttonIdentifier: 'view',
        class: 'p-button-rounded p-button-raised',
        icon: 'pi pi-eye',
        lable: 'View',
      },
      {
        buttonIdentifier: 'active',
        class: 'p-button-success p-button-rounded p-button-raised',
        icon: 'pi pi-trash',
        lable: 'Active',
        renderButton: (rowData) => {
          return rowData.status==='deactivated';
        }
      },
      {
        buttonIdentifier: 'deactive',
        class: 'p-button-danger p-button-rounded p-button-raised',
        icon: 'pi pi-trash',
        lable: 'Deactive',
        renderButton: (rowData) => {
          return rowData.status==='active';
        }
      },
    ];
    this.tableQueryParameters = {
      pageSize: 10,
      pageIndex: 0,
    };
    this.getData();
  }
  handleButtonClick(event: any) {
    console.log(event);
  }
  getData() {
    this.isTableDataLoading = true;
    this.http
      .post<DynamicTable<userDetails>>("api-url", this.tableQueryParameters)
      .subscribe((response) => {
          this.tableData = response.result;
          this.isTableDataLoading = false;
      });
  }
}

• Template:

<mh-prime-dynamic-table
  size="small"
  [numberRowsShown]="10"
  [rowsPerPageOptions]="[10, 30, 50]"
  [data]="tableData"
  rowSelectionMode="multiple",
  [isLoading]="isTableDataLoading"
  [actionButtons]="tableActionButton"
  (rowSelect)="handleRowSelection($event)"
  (actionButtonClicked)="handleButtonClick($event)"
  (queryParameterChange)="handQueryParameterChange($event)",
  (searchKeyChange)="handsearchKeyChange($event)",
>
</mh-prime-dynamic-table>

• Interface:

export interface DynamicTable<T> {
    headers: TableHeader[];
    childHeaders: TableHeader[];
    data: T[];
    dataCount: number;
}

export interface TableHeader {
    name: string;
    dataType: string;
    fieldName: string;
    collapsible: boolean | null;
    filterField: string;
    isSortable: boolean;
    isFilterable: boolean;
    filterEnums?: FilterEnum[];
    objectTypeValueField?: number;
}
export interface HeaderGroups {
    headers: TableHeader[];
    collapsibleHeaders: TableHeader[];
}
export interface ExpandedRows {
    [key: string]: boolean;
}
export interface FilterEnum {
    value: Number
    label: string
    styleClass: string
}
export interface FilterParameter {
    field: string;
    value: string;
    operator: string;
}

export interface SortParameter {
    field: string;
    order: string;
}

export interface DynamicTableQueryParameters {
    // listType: string;
    pageSize: number;
    pageIndex: number;
    filterParameters: FilterParameter[];
    sortParameters: SortParameter;
}
export interface ActionButtonConfig<T = any> {
    lable: string,
    icon: string,
    class: string,
    buttonIdentifier: string,
    renderButton?: (data: T) => boolean,
}
export interface ActionButtonEvent {
    rowData: any,
    buttonIdentifier: string
}

Contribute & Share the Joy! 🌈

Feel the urge to sprinkle some extra magic dust? We'd love to have you on board! Contributions are more than welcome. Open issues, submit pull requests, and let's make data visualization an even more delightful experience together!

License: Spread the Love ❤️

mh-prime-dynamic-table is licensed under the MIT License. Share the love, share the code! For more information, check out the LICENSE file.

Connect with Us! 📡

For more fun-filled adventures with mh-prime-dynamic-table, visit our GitHub repository. Let's build something amazing together!

Author: The Dreamweavers ✨

Crafted with love by @manwar and a sprinkle of stardust.

Special Thanks! 🙏

Hats off to the incredible PrimeNG team for their stellar p-table component. You rock!