Automatic summary row basing on given function

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior Currently, the only way to make some kind of summary is to add some manually calculated metrics to a footer of a table.

Expected behavior I want to have a separate row for a summary like here: https://imgur.com/a/2VziI. A width of each cell should be the same as rest of table. In addition, it should act as a regular row and as a user, I want to define a function which will compute a value for each cell in such row. That will be nice if I will be able to set a position of summary row: either top or bottom of a page.

Reproduction of the problem

What is the motivation / use case for changing the behavior? The current solution is unreadable in case of a table with many columns.

Please tell us about your environment: Arch Linux, Node 9.3.0, Angular 5

• Table version: 11.1.7

• Angular version: 5.0.3

• Browser: [all]

• Language: [all]

[SirWojtek]

Hello again, I think I figure out how to implement that feature and I want to share some kind of the feature specification.

Introduction

The main purpose of the summary row is to improve readability of the aggregated data. Each column can have its own cell which shows generally defined “summary” - it can be just a sum of all cells in the column, a user-defined text or even a custom template.

Position

According to many popular websites, the position of the row can be changed and could be:

• on top, right below the headers row,
• on bottom, right above footer

Interface

There are many aspects of the row which can be configured. Basically, you can enable the summary using a new ngx-datatable HTML attribute:

<ngx-datatable [summaryRow]="true"></ngx-datatable>

That line will enable the summary row with the basic configuration:

• standard HTML template
• summary at the bottom of the table
• + operator as the summary function

The position of the summary row can be modified via summaryPosition input:

<ngx-datatable [summaryRow]="true" [summaryPosition]="'top'"></ngx-datatable>

Correct values are top and bottom (the default value).

The standard behaviour can be overridden by column definition which will be extended by new field summaryFunc:

HTML

<ngx-datatable [summaryRow]="true" [columns]="columns"></ngx-datatable>

TS

columns = [
  # basic sum function
  { name: 'Column1', summaryFunc: (cells) => cells.reduce((sum, cell) => sum += cell) },
  # more sophisticated example
  { name: 'Column2', summaryFunc: (cells) => 'First row have value ' + cells[0] },
];

The users which want to take a full control of rendered content can use field summaryTemplate which will take ElementRef as a value:

HTML

<ngx-datatable [summaryRow]="true" [columns]="columns"></ngx-datatable>
<ng-template #customSummaryCell let-cells="cells">
  <div class="super-custom-style">{{ customFunc(cells) }}</div>
</ng-template>

TS

@ViewChild('customSummaryCell')
customSummaryCell: TemplateRef<any>;
columns = [];

ngOnInit() {
  columns = [
    { name: 'With custom template', summaryTemplate: customSummaryCell }
  ];
}

customFunc(cells: any[]) {
  return 'Some kind of magic ' + Math.random() + cells[0];
}

Thanks to @farhanmughal222 summary row works also with inline HTML syntax:

HTML

<ngx-datatable [summaryRow]="true" [rows]="rows">
  <ngx-datatable-column prop="prop1" [summaryFunc]="summaryForProp1"></ngx-datatable-column>
  <ngx-datatable-column name="Prop2" [summaryTemplate]="templateForProp2"></ngx-datatable-column>
</ngx-datatable>
<ng-template #templateForProp2>
  <div class="custom-template-body">
    {{ summaryForProp2() }}
  </div>
</ng-template>

TS

rows = [ // data ];
// no columns definition!

summaryForProp1(cells: any[]) {
  return 'Inline summary: ' + cells[0];
}

summaryForProp2() {
  return this.rows.map(row => row['Prop2'])
    .reduce((res, cell) => res += cell, 0);
}

In case of some basic styling, you can hook to standard summary row classes which will be:

• .datatable-summary-row .datatable-body-row - for whole row
• datatable-summary-row .datatable-body-cell - for single summary cell

Summary row a pagination

In the case of client site sorting, summaryFunc will receive values from all pages which are different from server-side sorting: in that case, you will receive only data from the current page. The solution is to plug your own fetch login to summaryFunc.

I’ll start implementation in the next week. I’d like to hear your thoughts about this piece of specification guys.

[SirWojtek]

@farhanmughal222 Good news! Now a summary row works with inline HTML syntax:

<ngx-datatable [summaryRow]="true" [rows]="rows">
  <ngx-datatable-column prop="prop1" [summaryFunc]="summaryForProp1"></ngx-datatable-column>
  <ngx-datatable-column name="Prop2" [summaryFunc]="summaryForProp2"></ngx-datatable-column>
</ngx-datatable>

Link to commit: https://github.com/swimlane/ngx-datatable/pull/1233/commits/ec98687d9f56b8097c08d4325275903b4e65ed81