1

I have a Discount__c custom field with data type Percent(15, 3) and it has a values of 1.219%

I am trying to fetch and display the value 1.219% in standard datatable under "DISCOUNT" column.

{ label: 'DISCOUNT', fieldName: 'Discount__c', type: 'percent', cellAttributes: {alignment: 'center'}}

But my datatable playground displaying column value as 122% instead of 1.219%, which is multiplying the value with 100 and rounding the value.

If i give type: 'number' in JS my datatable playground is displaying correct value like 1.219 but i want to display the % symbol for each value in the "DISCOUNT" column along with 3 decimals like 1.219%.

Playground link :- https://developer.salesforce.com/docs/component-library/tools/playground/iBfK8QPn5/2/edit

HTML

    <template>
        <lightning-datatable
            data={data}
            columns={columns}
            key-field="id">
        </lightning-datatable>
    </template>

JS Code

    import { LightningElement } from 'lwc';

    const columns = [
         {label: 'Opportunity name', fieldName: 'opportunityName', type: 'text'},
         {label: 'DISCOUNT', fieldName: 'discount__c', type: 'percent', 
               cellAttributes:{ alignment: 'center'}},
         {label: 'Amount', fieldName: 'amount', type: 'currency', 
               cellAttributes:{ alignment: 'center'}, typeAttributes: { currencyCode: 'EUR', 
               alignment: 'center'}},];

    const data = [{
                    id: 'a',
                    opportunityName: 'Cloudhub',
                    discount__c: 1.219,
                    amount: 25000

                },
                {
                    id: 'b',
                    opportunityName: 'Quip',
                    discount__c: 1.219,
                    amount: 740000
                }];

    export default class DatatableExample extends LightningElement {
         data = data;
         columns = columns;
    }

He is the sample playground code link playground

Any suggestions please...

3 Answers 3

4

Percentage fields are always stored as a fraction of 1. "Per cent" literally means "one part per hundred", so 1% is actually 0.01. Storing the data this way simplifies calculations using the value (try a formula field on Opportunities Amount * Probability, you'll see what I mean).

If you have a value of 1.219%, it should be downloaded to the client as 0.01219. The value 1.219 means 121.9% in a percentage format. If not, there's something wrong with how you're retrieving the value. You should add a typeAttributes of maximumFractionDigits set to at least 3, in order to show all the fraction digits. I've updated your playground for you.

1

I do not like to change data so I add the datatable type percent-fixed.

Solution I have done: import percentfixed from './percentfixed.html';

export default class MyDatatable extends LightningDatatable {
    static customTypes = {
        percentfixed : {
            template : percentfixed,
        } 
    }
}

Then: percentFixed.html:

<template>
    <lightning-formatted-number value={value} format-style="percent-fixed" maximum-fraction-digits="2"></lightning-formatted-number>
</template>

then you can use you new datatable component with new type percentFixed on column.

0

The only solution I can think is dividing the table field(discount) value per 100.

const data = [{
        id: 'a',
        opportunityName: 'Cloudhub',
        discount__c: 1.219/100,
        amount: 25000

    },
    {
        id: 'b',
        opportunityName: 'Quip',
        discount__c: 1.219/100,
        amount: 740000
    }];
    console.log(data);

And then use type percent. Please let me know.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.