Ngx-datatable: Make possible create footer columns that follows header columns

[calebeaires]

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

ngx-datatable give us an free template to footer

Expected behavior

Keep it free, but let us create columns based on header so we can make calcs on each column and show relevants information about then (ex.: totals, aggregations totals, others)

The image above shows the example that we could generate if we find a way to generate columns (with the same size of header columns) on footer too.

• ngx-datatable version: 11.1.4
• angular-cli: 1.5

[ondrejsv]

Are you considering this feature? Because without this, neither #115 nor #694 should have been closed as the custom footer template cannot solve the mentioned requests for a "total" or "summary" row. Having such a row is a quite rudimentary requirement for any solid data table.

[roblawford]

Any updates to this feature? Any complex configurations makes the custom footer unusable.

[beaulac]

This would also be useful in a group-row context.

If it were possible to access the column-styling functions in the row component, we could set matching widths per column on elements inside the footer or group row.

EDIT: I've managed to achieve this (in a very inelegant way) by intercepting the recalculateColumns results.

In component .ts

@ViewChild('theNgxDatatable')
table: DatatableComponent;
columnSizes: number[];

// ...

ngOnInit() {
    // Ugly hack: Hook into the recalculate calls to extract the widths.
    const oldRecalculate = this.table.recalculateColumns;
    this.table.recalculateColumns = (...args) => {
      const sizedColumns = oldRecalculate.apply(this.table, args);
      if (sizedColumns) {
        this.columnSizes = sizedColumns.map(c => c.width);
      }
      return sizedColumns;
    };
}

In component .html

<ngx-datatable-group-header [rowHeight]="50" (toggle)="onDetailToggle($event)">
    <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
        <div class="datatable-body-row">

            <div class="datatable-row-group datatable-row-center">
                <div *ngFor="let w of columnSizes; index as colIdx" class="datatable-body-cell" [style.width.px]="w">
                    <div class="datatable-body-cell-label">Content for column: {{colIdx}}</div>
                </div>
            </div>

        </div>
    </ng-template>
</ngx-datatable-group-header>

This strategy also works in footer templates!

[elielia]

Any news with this one? In terms of data tables its as basic as ABC

[jvasekpn]

It has been a couple years; is this feature planned for implementation yet?