a4-pivot-table

a4-pivot-table

Angular 7 Pivot Table

How-To

Install

npm install a4-pivot-table

app.module.ts

• Add PivotTableModule to imports.

...
import { PivotTableModule } from 'a4-pivot-table';
...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...,
    PivotTableModule,
    ...
  ],
  ...
})

your.component.html

<pivot-table [data]="data"
  [x]="x" [y]="y" [renderCell]="renderCell">
</pivot-table>

example

<pivot-table [data]="[{a: 'A1', b:'B1', c:'C3', d:1}, {a: 'A1', b:'B2', c:'C3', d:2}, {a: 'A2', b:'B2', c:'C2', d:3}, {a: 'A3', b:'B2', c:'C2', d:4}]"
  [x]="['b', 'c']" [y]="['a']" [renderCell]="renderCell">
</pivot-table>

your.component.ts

interface IData {
  a: string;
  b: string;
  c: string;
  d: number;
}

@Component({
  ...
  ...
})
export class YourComponent {
  ...
  data: IData[] = [
    {a: 'A1', b:'B1', c:'C3', d:1},
    {a: 'A1', b:'B2', c:'C3', d:2},
    {a: 'A2', b:'B2', c:'C2', d:3},
    {a: 'A3', b:'B2', c:'C2', d:4}
    ];
  ...
  ...
  renderCell(x: IData[]): string {
    return x.reduce((r, c) => r + c['d'], 0);
  }
  ...
  ...
}