Format a CURRENCY type field in a datatable in LWC

apexjavascriptlightning-web-componentslwc-domsalesforcedx

How to format a CURRENCY type field (named "Amount") in a datatable so that there are only 2 digits at the end of the number after the dot (in the fractional part)? The table displays an object received from salesforce via apex in lwc.

description of columns in js file:

...
const COLUMNS_FOR_ACC = [
    {
        label: 'View',
        type: 'button-icon',
        initialWidth: 75,
        typeAttributes: {
            iconName: 'action:preview',
            title: 'Detail',
            variant: 'border-filled',
            alternativeText: 'View'
        }
    },
    { label: 'Name', fieldName: 'Name', wrapText: true, hideDefaultActions: true },

    //Problem field below
    { label: 'Amount', fieldName: 'Amount', type: 'Currency', wrapText: true, hideDefaultActions: true },
    { label: 'CreatedDate', fieldName: 'CreatedDate', type: 'date', wrapText: true, hideDefaultActions: true, typeAttributes:{day:'numeric',month:'short',year:'numeric',
    hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:true}},
    { label: 'CloseDate', fieldName: 'CloseDate', type: 'date', wrapText: true, hideDefaultActions: true }
];

...

export default class AccordionEx extends LightningElement
{
    columnsForAcc=COLUMNS_FOR_ACC;
    
...

using datatable in html file:

...
<lightning-accordion allow-multiple-sections-open={multiple}>
        <template if:true={accountsOnThisPage}>
            <template for:each={accountsOnThisPage} for:item="acc">
                <lightning-accordion-section name={acc.Name} label={acc.ServiceText__c} key={acc.Id}>
                    <!-- The table is here -->
                    <lightning-datatable key-field="Id" data={acc.Opportunities} columns={columnsForAcc} onrowaction={handleRowAction} hide-checkbox-column="true" ></lightning-datatable>
                </lightning-accordion-section>
            </template>
        </template>
    </lightning-accordion>
...

This is what I get as a result:

Best Answer

According to the documentation currency field displays a currency using lightning-formatted-number, so you can set minimumFractionDigits and maximumFractionDigits properties to the typeAttributes object.
I.E. typeAttributes: { minimumFractionDigits: 0, maximumFractionDigits: 2 }

By the way, type: 'Currency' is wrong. It's type: 'currency'. Javascript is case sensitive. I updated the code below.

const COLUMNS_FOR_ACC = [
    {
        label: 'View',
        type: 'button-icon',
        initialWidth: 75,
        typeAttributes: {
            iconName: 'action:preview',
            title: 'Detail',
            variant: 'border-filled',
            alternativeText: 'View'
        }
    },
    { label: 'Name', fieldName: 'Name', wrapText: true, hideDefaultActions: true },
    { label: 'Amount', fieldName: 'Amount', type: 'currency', wrapText: true, hideDefaultActions: true, typeAttributes: { minimumFractionDigits: 0, maximumFractionDigits: 2 } },
    { label: 'CreatedDate', fieldName: 'CreatedDate', type: 'date', wrapText: true, hideDefaultActions: true, typeAttributes:{day:'numeric',month:'short',year:'numeric',
    hour:'2-digit',minute:'2-digit',second:'2-digit',hour12:true}},
    { label: 'CloseDate', fieldName: 'CloseDate', type: 'date', wrapText: true, hideDefaultActions: true }
];

Related Solutions

[SalesForce] How to set typeattribute in LWC datatable

It seems like you are trying to hide the button wherever SME_Document_Collection_Mode__c is Login via link. Modifying the columns will affect the whole table as each object in columns define the structure of whole column and not single cell in column.

You can implement one more column at run time which will decide which class to append. Below is the sample:

@track columns = [
    { label: 'Name', fieldName: 'Name' },
    { label: 'Mode', fieldName: 'SME_Document_Collection_Mode__c' },
    {
        label: 'FCU Trigger', type: "button",
        typeAttributes: {
            label: 'Initiate',
            name: 'initiate',
            title: 'View',
            disabled: false,
            value: 'view',
            iconPosition: 'left',
            variant: "brand",
            class: { fieldName: 'ModeClass' }
        }
    }
];

connectedCallback() { // or wire service or any other method where you are getting data
    this.data = this.data.map(record => {
        record.ModeClass = (record.SME_Document_Collection_Mode__c === 'Login via link') ? 'slds-hidden' : 'slds-visible';
        return record;
    });
}

Notice the way class is getting its value - from another field called ModeClass which is being created at run time depending on the field SME_Document_Collection_Mode__c.

Playground link output:

[SalesForce] Pre selected Rows with Pagination not working in Datatable in Saleforce LWC

You need to keep a separate list of all selections in one variable, then update this variable accordingly as you navigate pages (and also keep track of any changes).

allSelectedRows = [];
preselectedRows = [];
changePage(pageNumber) {
    let pageData = this.getPageData();
    this.allSelectedRows = this.allSelectedRows
        .filter((rowId) => !pageData.find((record) => record.UserId === rowId)) // Preserve rows outside current page
        .concat(this.template.querySelector('lightning-datatable').selectedRows); // and add rows from current page
    this.page = pageNumber;
    pageData = this.getPageData();
    this.preslectedRows = this.allSelectedRows.filter(
        (rowId) => pageData.find((record) => record.UserId === rowId) // And now find records in current page
    );
}
onFirst() {
    this.changePage(1);
}
onNext() {
    this.changePage(this.page + 1);
}
// ... etc ...

Also, some general notes...

First, don't use await and then() together:

try {
// other code here
  let userList = await getUserList();
  // rest of code here
} catch(error) {
  this.error = error;
}
this.showLoadingSpinner = false;

Or:

getUserList().then(
  userList => {
    // success logic here
  })
  .catch(error => this.error = error)
  .finally(() => this.showLoadingSpinner = false);

Second, you really didn't need to JSON.serialize and JSON.parse, you can return the wrappers directly.

Best Answer

Related Solutions

[SalesForce] How to set typeattribute in LWC datatable

Playground link output:

[SalesForce] Pre selected Rows with Pagination not working in Datatable in Saleforce LWC

Related Topic