@angular-generic-table/core

angular-generic-table

A generic table for Angular 2+. This project is a re-write of this project for AngularJS, the idea is to have support for the same features and that the configuration should be the same. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values. View demo

Features

• Uses standard HTML tables (no divs etc.)
• Markup uses Twitter bootstrap class names
• Client and server-side pagination, sorting and filtering
• Lazy-loading of data from server
• Expanding rows with custom component
• Use custom functions for sorting, exporting and rendering of data
• Configure table using json object (add columns etc.)
• Toggle column visibility
• Export to CSV

Installation and usage

Run npm install @angular-generic-table/core --save

Include generic table module in your project, for example if you want to add it to your app module:

App Module

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

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

Configure the table in your component, in this case we're adding a basic example with static data to a component called StaticComponent.

Static Component

import { Component } from '@angular/core';
import { GtConfig } from '@angular-generic-table/core';

@Component({
  selector: 'app-static',
  templateUrl: './static.component.html'
})
export class StaticComponent {

  public configObject: GtConfig<any>;

  public data:Array<{
    id:number,
    name:string,
    lucky_number:number
  }> = [];

  constructor() {

    this.configObject = {
      settings:[{
        objectKey:'id',
        sort:'desc',
        columnOrder:0
      },{
        objectKey:'name',
        sort:'enable',
        columnOrder:1
      },{
        objectKey:'lucky_number',
        sort:'enable',
        columnOrder:2
      }],
      fields:[{
        name:'Id',
        objectKey:'id'
      },{
        name:'Name',
        objectKey:'name'
      },{
        name:'Lucky number',
        objectKey:'lucky_number'
      }],
      data:[{
        "id": 1,
        "name": "Anna",
        "lucky_number": 63
      }, {
        "id": 2,
        "name": "Julie",
        "lucky_number": 8
      }, {
        "id": 3,
        "name": "Lillian",
        "lucky_number": 30
      }, {
        "id": 4,
        "name": "Norma",
        "lucky_number": 13
      }, {
        "id": 5,
        "name": "Ralph",
        "lucky_number": 28
      }, {
        "id": 6,
        "name": "Benjamin",
        "lucky_number": 66
      }, {
        "id": 7,
        "name": "George",
        "lucky_number": 66
      }, {
        "id": 8,
        "name": "Ryan",
        "lucky_number": 65
      }, {
        "id": 9,
        "name": "Martha",
        "lucky_number": 57
      }, {
        "id": 10,
        "name": "Todd",
        "lucky_number": 65
      }]
    };
  }
}

Usage

<generic-table [gtSettings]="configObject.settings" [gtFields]="configObject.fields" [gtData]="configObject.data"></generic-table>

Changelog

[4.14.0] - 2018-04-30

This release might not include a lot of new features or fixes, but under the hood many of the dependencies have been bumped/removed and a lot things related to packing, linting and code styles have been refactored as a step towards making it easier to contribute (thanks for helping out @mklein994).

Added

• Support for row click events from drilldown component #218
• Support for setting initial state for expanding row #217

Fixed

• Preserve original order for sort, sort will now go from ascending to descending and then back to enabled instead of just switching between ascending/descending #230
• Checkboxes now uses new markup for bootstrap
• Library is now packaged using ng-packagr 3.0.0-rc.2

Added

• Support for conditional inline edit #122
• Support for toggling inline edit and using observable for options #141

Fixed

• Fixed table info when lazy loading and totals are enabled #203
• Table sort order #206
• Use ng-packagr for bundling #207