How to show % values with decimals in LWC standard datatable

Question

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...

Answer 1

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.

Answer 2

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.

Answer 3

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.