0

Say I have a LWC with a Datatable that displays the values of field A in Column 1, and field B in Column 2.

Now I want Column 3 to display the value of Column 1 + Column 2. How would I go about this?

Context

  • I query a bunch of fields (aggregate results) from an object in an Apex class
  • I want to display these values in a datatable's columns, but I also want to display custom columns whose values are math operations based on the field values (like field 1 + field 2)

1 Answer 1

0

You can do any calculations you want in the wire handler:

this.data = result.map(
  value => ({ 
    ...value, // Copy all existing values
    customPercentageOfTrade: value.roundedFeeUnits / value.totalUnitsRequstedDisinvestment,
    // more calculations here
  })
);

Note that you're going to want to alias all your calculations and fields, as you cannot traverse field relationships in a lightning-data-table.

For example, this is not allowed:

{label: 'Fund Name',fieldName: 'Fund__r.Name', sortable: true, type: 'text'},

Because the table is going to look for a field like:

{ "Fund__r.Name": "Sample" }

And not:

{ "Fund__r": { "Name": "Sample" } }

You can use the map technique from above to flatten your objects so that all the fields are in a flattened object.

12
  • @user256515 The spread operator lets you copy one object's values to another, new object, via {...value}, and the extra fields thereafter are additions to the new object we're creating.
    – sfdcfox
    Commented May 12, 2021 at 17:01
  • @user256515 Yes, you can call it flattening or aliases, the mapping process is the same as what we'd define in math: "associate each element of (a set) with an element of another set." The act of mapping is transforming one value into another. See Array.prototype.map for more information on that, too.
    – sfdcfox
    Commented May 12, 2021 at 17:03
  • @user256515 value contains whatever came by the server (by default); we're defining additional attributes to include in the new clone of the server data.
    – sfdcfox
    Commented May 12, 2021 at 18:18
  • @user256515 That looks good to me. Any issues?
    – sfdcfox
    Commented May 12, 2021 at 22:57
  • @user256515 wire methods don't fire until after the first render() cycle, so it's your template that's causing an issue. add if:true={partnerships.data} and you should be fine.
    – sfdcfox
    Commented May 14, 2021 at 12:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .