Super simple HTML table generator for Agular

Live example

Installation

npm i cp-table -S

Usage

Once you import CpTableModule to your app.module.ts you can add CpTables to your template.

<cp-table [dataSource]="dataSource">
  <cp-table-column key="id"></cp-table-column>
  <cp-table-column key="name"></cp-table-column>
</cp-table>

Setting column title

CpTable allows to set a different title to your columns. By default the column header will be the key name with a capital letter (ej: name will be Name). In some cases you want to use a different name for the table column. To achieve this you can add the title attribute to cp-table-column.

<cp-table [dataSource]="dataSource">
  <cp-table-column key="id"></cp-table-column>
  <cp-table-column key="name" title="Product"></cp-table-column>
</cp-table>

Using default values

Not every column must have a value and sometimes you might want to use a default value for an specific table. You can do that using empty attribute.

<cp-table [dataSource]="dataSource">
  <cp-table-column key="id"></cp-table-column>
  <cp-table-column key="name" empty="(No name)"></cp-table-column>
</cp-table>

Formatting columns

Some columns need special treatment. Imagine you want to format a column as a price using Angular CurrencyPipe. You can add an array of PipeTransform classes to the pipes property of the column.

// app.component.ts

import { CurrencyPipe } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  currencyPipes: PipeTransform[];

  constructor(private currency: CurrencyPipe) {
    this.currencyPipes = [currency];
  }
}

<cp-table [dataSource]="source">
  <cp-table-column title="#" key="id"></cp-table-column>
  <cp-table-column key="name"></cp-table-column>
  <cp-table-column [pipes]="currencyPipes" key="price"></cp-table-column>
</cp-table>

CpTable will run every pipe on every single row for that column.

Using custom classes

TableComponent and TableColumnDirective both accept [ngClass] and class as attributes, allowing you to style the table as you want.

<cp-table [dataSource]="source" [ngClass]="{ 'table': true }">
  <cp-table-column title="#" key="id"></cp-table-column>
  <cp-table-column key="name" class="font-italic"></cp-table-column>
  <cp-table-column [pipes]="currencyPipes" key="price" class="font-weight-bold"></cp-table-column>
</cp-table>

Listening to events

CpTables will trigger events on column click. CpTables has its own TableClickEvent that is an extension of MouseEvent.

import { TableColumnDirective } from '../table-column.directive';

export interface TableClickEvent extends MouseEvent {
  column: TableColumnDirective;
  rowClicked?: any; // All values of the clicked row
  rowIndex?: number;
}

Listening to events on row click

<cp-table [dataSource]="source" (rowClick)="onRowClicked($event)" class="table">
  <cp-table-column title="#" key="id"></cp-table-column>
  <cp-table-column key="name" empty="--" class="font-italic"></cp-table-column>
  <cp-table-column [pipes]="currencyPipes" key="price" class="font-weight-bold"></cp-table-column>
</cp-table>

Listening to events on header click

<cp-table [dataSource]="source" (headerClick)="onHeaderClicked($event)" class="table">
  <cp-table-column title="#" key="id"></cp-table-column>
  <cp-table-column key="name" empty="--" class="font-italic"></cp-table-column>
  <cp-table-column [pipes]="currencyPipes" key="price" class="font-weight-bold"></cp-table-column>
</cp-table>