angular-creating-Dynamic-table-with pagination-and searching

Angular creating table component for web applications. Easy to integrate and use.

Getting Started

Features

• create dynamic row and column of the table.
• you can give default sorting by any column.
• easily sort by any column dynamically.
• give searching dynamic.
• in searching you can give searching or not or default searching or search by
• in searching there is also give the placeholder
• there is also the pagination you can allow them or not
• in pagination you can set up how many pages you want to show
• in pagination there is also the select option in which you can how much items you want to show in the single page

Installation

```ts
import { DynamicTableModule } from 'ng-creating-dynamic-table';

// ...

@NgModule({
  imports: [
   DynamicTableModule
    // ...
  ]
  // ...
})
export class AppModule {}

Usage

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

export class AppComponent implements OnInit {
export class AppComponent {
  tableData: any[];
  pagination: object;
  searchData: object;
  headerData: any[];
  options: object;

  constructor() {

    this.tableData = [

   { Id: 4, FirstName: 'Narco', LastName: 'agrawal', email: '[email protected]' },
      { Id: 2, FirstName: 'Bombasto', LastName: 'sharma', email: '[email protected]' },
      { Id: 34, FirstName: 'Celeritas', LastName: 'asdasd', email: '[email protected]' },
      { Id: 44, FirstName: 'Magneta', LastName: 'verma', email: '[email protected]' },
      { Id: 5, FirstName: 'RubberMan', LastName: 'asdasd', email: '[email protected]' },
      { Id: 644, FirstName: 'Dynama', LastName: 'mandoi', email: '[email protected]' },
      { Id: 7, FirstName: 'Dr IQ', LastName: 'mandoi', email: '[email protected]' },
      { Id: 64, FirstName: 'Dynama', LastName: 'asdasd', email: '[email protected]' },
      { Id: 7, FirstName: 'Dr IQ', LastName: 'asdasd', email: '[email protected]' },
      { Id: 84, FirstName: 'Magma', LastName: 'asdasd', email: '[email protected]' },
      { Id: 92, FirstName: 'Tornado', LastName: 'asdasd', email: '[email protected]' },
      { Id: 64, FirstName: 'Dynama', LastName: 'mandoi', email: '[email protected]' },
      { Id: 7, FirstName: 'Dr IQ', LastName: 'mandoi', email: '[email protected]' },
      { Id: 64, FirstName: 'Dynama', LastName: 'asdasd', email: '[email protected]' },
      { Id: 7, FirstName: 'Dr IQ', LastName: 'asdasd', email: '[email protected]' },
      { Id: 84, FirstName: 'Magma', LastName: 'asdasd', email: '[email protected]' },

    ];
    this.pagination = {

      isPagination: false,// this is for allow paginatin
      showEntries: [3, 4], // how many items you want to show on per page 
     

    };
    this.searchData = {
      'isSearching': true,// this is for if you want to search allow
      'searchBy': ['FirstName', 'LastName'], // this is for choice  by the column name searching
      'searchTitle': 'search by  name or lastName', // this is the placeholder which you want to show
      'noRecord': 'no record found' // this is for the msg if records does not found
    };
    this.headerData = [
      {
        'columnName': 'FirstName',// this is for the columnname   data
        'sortBy': 'FirstName',// this option for the givin sorting by column name
        'isSorting': true, // this is for the sorting i you want to sort true
        'keyName': 'FirstName', // this is for the arranging the column data and row data in same place
        'defaultSorting': 'FirstName' // this is for default sorting
      },
      {
        'columnName': 'Ids',
        'sortBy': 'Id',
        'isSorting': true,
        'keyName': 'Id',
      },
      {
        'columnName': 'LastName',
        'sortBy': 'LastName',
        'isSorting': true,
        'keyName': 'LastName',
      },
      {
        'columnName': 'email',
        'sortBy': 'email',
        'isSorting': true,
        'keyName': 'email',
      }
     
     
    ];
    this.options = {

      headerData: this.headerData, // this is for the header of the table
      tableData: this.tableData,// this is for the data of the table
      footerData: true,//this will show the footer of the table    i you allow true and if you give false then it will remove
      searchData: this.searchData,// this is for search data into table
      pagination: this.pagination // this is for the pagination
    };
  }

//this is for the to get the value of the row of table
  receiveRowValue(event) {
    console.log(event);
  }

}  
 

```html

<ng-dynamic-Table [options] = options  (changeEvent)="receiveRowValue($event)"></ng-dynamic-Table> 


## Run locally

* Clone the repository or downlod the .zip,.tar files.
* Run `npm install`
* Run `ng serve` for a dev server
* Navigate to `http://localhost:4200/`

## Library Build / NPM Package

Run `yarn build:lib` to build the library and generate an NPM package. The build artifacts will be stored in the dist-lib/ folder.

## Running unit tests

Run `yarn test` to execute the unit tests.

## Development

This project was generated with Angular CLI version 1.7.1.

## Contributions

Contributions are welcome, please open an issue and preferrably file a pull request.

### Opening Issue

Please share sample code using codesandbox.com or stackblitz.com to help me re-produce the issue.

## License

MIT License.