CODEWITHSUNDEEP
angularng2-smart-table
iPatz
iPatz

Reputation: 47

How can I implement table footer of ng2-smart-table?

I’m now implementing ng2-smart-table in my application. I want to display table footer below the table for additional information such as Sum Amount, Discount Amount and so on. enter image description here

This is my code in typescript file

settings = {
    columns: {
      seq: {
        title: '#',
        editable: false,
        width: '10%'
      },
      productName: {
        title: 'Product Name',
        editable: false
      },
      qty: {
        title: 'Qty.',
        width: '10%'
      },
      uom: {
        title: 'Uom',
        width: '10%'
      },
      price: {
        title: 'Price',
        valuePrepareFunction: (price) => {
          var formatted = this.thbCurrencyPipe.transform(price, 2);
          return formatted;
        }
      },
      discount: {
        title: 'Disc.'
      },
      amount: {
        title: 'Amount'
      }
    }
  };

And I load data in ngOnInit() method

ngOnInit() {
    this._utilityService.LoadPosDummyData().subscribe(data => {
      console.log(data);
      this.datas = data;
    });
  }

This is ng2-smart-table tag I used in Html

<ng2-smart-table [settings]="settings" [source]="datas"></ng2-smart-table>

Upvotes: 0

Views: 2115

Answers (1)

hamilton.lima
hamilton.lima

Reputation: 1920

I would create a separated component to show the Sum information you want, listen to data updates on the main table and update the footer component.

On your html

<ng2-smart-table #grid

On your component 

@ViewChild('grid')
table;

Subscribe for the on changed source observable from the smart-table

ngAfterViewInit(): void {
    this.table.grid.source.onChangedSource.subscribe(() => {
        // update other component with the SUM
    });
}

Upvotes: 1

Related Questions