format-style="percent" should mimic Standard UI functionality instead of being 2 decimals off

[JimBTek]

Description

Everything that relies on the "percent" style in LWC has to use their own math to divide and multiply by 100 to match the Salesforce database.

Steps to Reproduce

In the Salesforce database you have the value of 1 for 1%:

In standard UI a user sees it and edits it as 1.00%:

in any LWC datatable or otherwise that relies on the "percent" format or type has it automatically interpreted as 1 = 100% and .01 should be 1%.

Unfortunately if you use "Percent-fixed" not only are you messing with the core functionality but it takes away the % field icon in a data table. While everyone trying to use LWC on Salesforce could work around this, It greatly slows down the adoption of LWC components by Admins to use alongside Standard UI and database functionality.

Version

LWC on Salesforce

Possible Solution https://developer.salesforce.com/docs/component-library/bundle/lightning-formatted-number/documentation

Specify format-style="percent" to display the value multiplied by 100 as a percent value. Percentages default to 0 decimal places, with rounding. In this example, the formatted number displays as 50%.

<template>
    <lightning-formatted-number
            value="0.503"
            format-style="percent">
    </lightning-formatted-number>
</template>

To display the value as-is without multiplying it by 100, specify format-style="percent-fixed". In this example, the formatted number displays as 1% because decimal places are not displayed by default and the value is rounded.

<template>
  <lightning-formatted-number
            value="0.503"
            format-style="percent-fixed">
  </lightning-formatted-number>
</template>

adding the "%" symbol into percent-fixed would help, and perhaps a way to determine if you are on platform or not to leverage percent-fixed by default

[uip-robot-zz]

This issue has been linked to a new work item: W-9342025

[jhilyard]

Totally agree and wanted to highlight specifically that with datatable, a column "type" of percent should behave like the "percent-fixed" display format, data types and number display formats being different things. When doing math in JavaScript with the underlying data for a percent field, it is reasonable to expect to have to divide a percent value by 100. Having to translate it back and forth to a "number" when communicating with Salesforce is not the expected developer experience, and particularly having inline edit suddenly switch formats is jarring for end users, particularly if the percent field is also sometimes edited in the Salesforce UI outside of a datatable.

While a fix is in the works (fingers crossed), it would be great if the datatable documentation for the "percent" column type could have a more detailed description of the existing behavior when working with Salesforce percent fields, so developers don't spend time looking for non-existent bugs in their own code related to loading/saving Salesforce data.

Thank you!

[jhilyard]

Also my experience is that datatable doesn't implement type="percent-fixed" at all, it silently ignores the type property and typeAttributes and treats it as the default type="text" with left alignment, no validation, etc. The documentation, again, is correct but unhelpfully sparse on this.

[jmsjtu]

Closing this as this is an issue with Lightning Base Components, please open a Salesforce Stack Exchange question or Salesforce Case if you're still experiencing this issue.

[mplaaguilera]

How is this closed? Lightning Datatable keeps managing percent columns wrong. Is there a related issue to track this problem?

[nolanlawson]

@mplaaguilera I'm sorry you ran into this issue, but this repo is for the open-source LWC framework rather than the Lightning Base Components which use LWC. The best way to track this would be to post this issue on Salesforce Stack Exchange or open a Salesforce case.

[IshitaGhosh621]

formatStyle: "percent-fixed" is not a valid attribute in datatable,so this cannot be used