can not add independent cell of rows(received data from back) in ngx-datatable

Question

i have a ts file like this:

export class ListComponent implements OnInit {
  rows: any;
  columns = [
    { prop: 'name' },
    { name: 'Gender' },
    { name: 'Company' },
    { name: 'price' }
  ];

  constructor(
    private productService: ProductService,
  ) { }

  ngOnInit() {
    const v = this.productService.getProduct();
    this.rows = v;
  }
}

that productService.getProduct() return an array of Product.

and html file like this:

<div>
  <ngx-datatable class="material" [rows]="rows" [columns]="columns">
  </ngx-datatable>
</div>

so i want to add two cell for example Commission and FinalPrice that Commission cell will have an number input and FinalPrice be read only cell. if user change value of Commission input, FinalPrice change based on (rows.price - Commission). this functionality must be for each row independently.

please do me a favor to solve problem.

Answer 1

Try something like this

_rows: any;
const data: any[] = [];
productArticles.map(prdmArtEdit => { //your list
  const row = {};

  row['commission'] = prdmArtEdit.commission;
  row['finalPrice'] = prdmArtEdit.price-prdmArtEdit.commission;

  row['company'] = prdmArtEdit.company;
  row['gender'] = prdmArtEdit.gender;

  row['name'] = prdmArtEdit.name;
  data.push(row);
  }
  this._rows=data;