angular-dyn-table v0.0.5

Dynamic Table

This component lets you display data and style your data table the way you like.

Configuration

1- You have to pass the columnsProperties array which contains the config of the columns to be displayed. Each column is defined by :

• prop The key to select the value to be displayed.
• title The header value.
• sort ( optional ) Column's sort direction.
• hidden ( optional ) Hide the column.
• class ( optional ) Column's class.

2- Pass data in form of an array of objects. Each object should have the structure

{prop1: value1, prop2: value2, ...}

3- ( optional ) Specify the table's css class.

Your html should now look like

<dynamic-table
  class="my-custom-table-class"
  [columnsProperties]="columnsProperties"
  [rows]="data"
></dynamic-table>

How to use

1- Import DynamicTableModule into your module.

import { DynamicTableModule } from "angular-dyn-table";

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

2- Prepare config to use the component

import { Component, ViewChild } from "@angular/core";
import { Column, DynamicTableComponent } from "angular-dyn-table";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild(DynamicTableComponent, { static: false })
  table: DynamicTableComponent; 

  columns: Column[] = [
    { prop: "name", title: "Name" },
    { prop: "lastName", title: "Last Name" },
    { prop: "age", title: "Age" }
  ];

  rows = [
    { name: "John", lastName: "Doe", age: 25 },
    { name: "Mister", lastName: "X", age: 35 }
  ];
}

3- Use the component inside HTML:

<dynamic-table
  class="table"
  [rows]="rows"
  [columnsProperties]="columns"
></dynamic-table>

4- Specify style via css class table.

API

This component emits events on sort change. To handle sort change you can do as follows:

import { Column, DynamicTableComponent, Sortable } from "angular-dyn-table";
import { AfterViewInit, Component, ViewChild } from "@angular/core";

@Component({
  selector: "app-library",
  templateUrl: "./library.component.html",
  styleUrls: ["./library.component.css"]
})
export class LibraryComponent implements AfterViewInit {
  @ViewChild(DynamicTableComponent, { static: false })
  dataTable: DynamicTableComponent;

  handleSort(sortable) {
    // sort data either from server or client side.
  }

  ngAfterViewInit() {
    this.dataTable.sortChange.subscribe({
      next: (sortable: Sortable) => this.handleSort(sortable)
    });
  }
}