AngualrTable

This library was generated with Angular CLI version 8.2.14.

Code scaffolding

Run ng generate component component-name --project angualrTable to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project angualrTable.

Note: Don't forget to add --project angualrTable or else it will be added to the default project in your angular.json file.

Build

Run ng build angualrTable to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build angualrTable, go to the dist folder cd dist/angualr-table and run npm publish.

Running unit tests

Run ng test angualrTable to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

Usage

1.Import the AngualrTableModule from the 'angualr-table' in app.module.ts.

import {AngualrTableModule } from 'angualr-table';

2.Add the imported module inside the import in app.module.ts

imports: [
    ....
    AngualrTableModule,
  ],

3.Now use the below code in hmtl use to use the table

<app-table-list *ngIf="table" [tableColumnName]="tableColumnName" [displayedColumns]="displayedColumns" [dataList]="users" [editable]="true"></app-table-list> 

tableColumnName -- Filed Name to be displyed in the table for the key in objects.

tableColumnName = {'name' : 'Name',
  'age' : 'Age',
  'subtitle' : 'Subtitle',
  'team':'Team'

};

displayedColumns -- keys which showed as cloumn

displayedColumns = [   
'name',
'age', 
'subtitle',
'team'
];

users -- The list of objects.

users=[
  {
    "name": "Chetan",
    "age": "10",
    "subtitle": "NINTEDANIB ESYLATE",
    "team":"Skylander"
  },
  {
    "name": "Jitendra Patel",
    "age": "10",
    "subtitle": "NINTEDANIB ESYLATE",
    "team":"HackTheCode"
  },
  {
    "name": "Amit ",
    "age": "17",
    "subtitle": "NINTEDANIB ESYLATE",
    "team":"Skylander"
  },
  {
    "name": "Atis",
    "age": "12",
    "subtitle": "NINTEDANIB ESYLATE",
    "team":"HackTheCode"
  },
  {
    "name": "Rajdeep",
    "age": "14",
    "subtitle": "NINTEDANIB ESYLATE",
    "team":"HackerGroup"
  }
]

Pre-Requestive

Please insatall the angular materil using the below command

ng add @angular/material

Please install the bootstarp/jquery with the below command and add them to the scrips and styles as in angular.json

npm install bootstrap

Add the below code in the angular.json

"styles": [
          .....
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
        ],

"scripts": [
          .....
          "./node_modules/jquery/dist/jquery.js",
          "./node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]
      },