ngx-custom-data-table v0.0.4

NgxCustomDataTable

This library is used to generate dynamic custom tables for angular application.

Demo

Please follow this Demo url

Features

Based on the json input we can do the following:

• Add/delete/update a table row
• Selecting a table row
• Multiple selection of table rows
• Sorting based on table column
• Capturing actions on link click or row click
• Hiding columns that are not necessary

Installation

• Run npm install ngx-custom-data-table to install the package.
• The package has primeng modules as peer dependencies. So, please install below as a dependencies in your package.json file.

• @angular/cdk
• primeicons
• primeng
• primeflex

• Add the following import statements in your styles.scss file

• @import '../node_modules/primeng/resources/primeng.min.css';
• @import "../node_modules/primeicons/primeicons.css";
• @import "../node_modules/primeflex/primeflex.css";
• @import "../node_modules/primeng/resources/themes/nova-light/theme.css"

• Add then include the library module in your module (app.module.ts)

import { NgxCustomDataTableModule } from 'ngx-custom-data-table';
// ...

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     // ...
     NgxCustomDataTableModule
   ],
   // ...
 })
 
 export class AppModule { }

Usage

import { Component } from '@angular/core';

export class AppComponent {
  public itemObj: any = [{
    key: 'name',
    value: 'Name',
    searchPlaceholder: 'Search By User Name'
  }, {
    key: 'age',
    value: 'Age'
  }];
  public uniqParam = 'name';
  public items: any = [];

  constructor() {
    this.items = [
      {
        name: 'Niranjan',
        age: 24
      }, {
        name: 'Sai kumar',
        age: 27
      }
    ];
  }
  addNewItem(value) {
    console.log(value);
  }

  updateItem(value) {
    console.log(value);
  }

  deleteItem(value) {
    console.log(value);
  }

  radioSelectedValue(value) {
    console.log(value);
  }

  choosenValues(values) {
    console.log(values);
  }

  unSelectChosenValues() {
    console.log('Do some resetting here');
  }

  linkClick(value) {
    console.log(value);
  }

  showInfoDetails(details) {
    console.log(details);
  }

<ngx-custom-data-table 
  [uniqKey]="uniqParam" 
  [tableList]="items" 
  [tableKeysList]="tableKeysList"
  (confirmAdd)="addNewItem($event)" 
  (confirmUpdate)="updateItem($event)" 
  (confirmDelete)="deleteItem($event)">
</ngx-custom-data-table>

Settings

btnContents:

Please find below example btnContents for reference.

public btnContents: any = [{
    btnName: 'Save',
    styleClass: 'primary',
    width: 'small'
  }, {
    btnName: 'Cancel',
    styleClass: 'default',
    width: 'small',
    cancel: true
  }];

tableKeysList:

Please find below example tableKeysList for reference.

public tableKeysList: any = [{
    key: 'referenceId',
    value: 'Reference Id',
    hide: true
  },
  {
    key: 'name',
    value: 'Name'
  },
  {
    key: 'website',
    value: 'website',
    link: true,
    action: true
  },
  {
    key: 'createdDate',
    value: 'Created date',
    date: true
  }, {
    key: 'createdBy',
    value: 'Created by'
  }];

Callback Methods

• selectedValueEmit - return the selected row in the table
• selectedLinkEmit - return selected row on link click
• closeDialog - callback invoked on click of cancel button in the table which is configured using btnContents
• saveChoosenValues - callback invoked on click of a button in the table which is configured using btnContents to retrieve the choosen mutliple values
• confirmAdd - return new row added to the table
• confirmUpdate - return row that was updated with new values
• confirmDelete - return row that needs to be deleted from the table

Note: Please find above example code in usage section where callback methods were used.

Run locally

• Run npm install
• Run ng serve for a dev server
• Navigate to http://localhost:4200/