ngpq-table

Angular Table for large and small projects

ngpq-table Component

Installation

npm install ngpq-table

Minimal Usage Example

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { NgPqTableModule } from 'ngpq-table';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgPqTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { Settings } from 'ngpq-table';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  settings: { [key: string]: Settings; } = {
    id: {
      title: 'ID'
    },
    name: {
      title: 'Name'
    },
    Email: {
      title: 'Email'
    }
  };
  
  data = [
    {
      "id": 1,
      "name": "id labore ex et quam laborum",
      "email": "[e-mail]"
    },
    {
      "id": 2,
      "name": "quo vero reiciendis velit similique earum",
      "email": "[e-mail]"
    },
    ...
  ];
}

app.component.html

<ngpq-table 
   [data]="data" 
   [settings]="settings">
</ngpq-table>

Features

• Flexible possibility of using sync. or async. data
• Filtering (Smart or Basic)
• Sorting (asc, desc, original position)
• Pagination
• Resizing
• Actions (Inline Add/Edit at your service)
• Multiple (Select) Actions

All Features and Example can be viewed here Here