Skip to content

Latest commit

 

History

History
278 lines (250 loc) · 10.8 KB

README.md

File metadata and controls

278 lines (250 loc) · 10.8 KB
Raw

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