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

| Setting | Type | Description | Default Value | | :----------------------------- | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------ | | tableKeysList | Array | tableKeysList should consist of set of objects with properties as mentioned in below table | Mandatory | | tableList | Array | List of dynamic items from server or by any other means | if empty, table will show No data available message | | uniqKey | string | primary key in the tableKeysList used to identify the rows in the table while performing an action on particular row | Mandatory | | showRadioInRows | boolean | to display radio buttons in each row | false | | showCheckBox | boolean | to display checkbox in each row | false | | noActions | boolean | to hide the actions column provided by the library | false | | enableSelection | boolean | Enabling a row to be selected which invokes a callback (selectedValueEmit) | | hideHeaderCheckBox | boolean | hiding header checkbox in the table | false | | btnContents | Object | to display the custom buttons for the table. Please refer below table for the properties | optional | | noHeaderDropdown | boolean | to hide the dropdown in the header | false |

btnContents:

| Property | Type| Use | | :----------------------------- | - | :---------| | btnName | string |Name of the button | | styleClass | string | to apply custom class to the button | | width | string | to adjust the width of the buttons | | cancel | boolean | if it is true (closeDialog) callback will be invoked or else always (saveChoosenValues) will be invoked on click of the button/buttons with selected rows in the table.

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:

| Property | Type| Use | | :----------------------------- | - | :---------| | key | string |refer the value in the items/data array | | value | string | column header name or the placeholder| | searchPlaceholder | string | custom placeholder to the search dropdown in the header | | hide | boolean | hides a particular column | | link | boolean | to display a particular column value as a link | | action | boolean | on using this flag, callback will be invoked on click of the link | | width | string | to adjust the width of the columns | date | boolean | if that particular key will be holding the date format

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/