7

When working on a bug, I just noticed that lighting:input now supports two percentage formatters, where the older one percent expects the user to know to enter e.g. 0.5 for 50%:

<lightning:input
        type="number"
        label="Percentage"
        formatter="percent"
        step="0.0001"
        />

and the newer (better) one percent-fixed allows the user to enter 50 for 50%:

<lightning:input
        type="number"
        label="Percentage"
        formatter="percent-fixed"
        step="0.01"
        />

Thought I was on to a quick win here, but the edited value ends up displayed in a lightning:datatable and no such luck there with only type: 'percent' supported (and no documented options in this area via typeAttributes) resulting in e.g. 50% getting displayed as 5000%.

What is the best approach to deal with percentages using these two components?

(I've just added the truly ugly workaround of an additional property that I put the percentage value divided by 100 in. So two properties for one value - a recipe for bugs in the future... Hope there is a good reason that lightning:datatable doesn't allow a custom formatter to be wired in.)

  • I am sorry I cannot answer your question, but from my experience with the lightning:datatable component, Salesforce only add a very specific set of typeAttributes that this component supports in every release. Maybe in the next release.... – Itai Shmida Oct 25 '18 at 6:16
  • @ItaiShmida thanks. Yes hopefully it will get addressed eventually. Seems like a case where being “open for extension” would be appropriate though. – Keith C Oct 25 '18 at 7:36
0

Almost one year later and I have tha same issue.

The only solution I can think is divide the table field value per 100.

getFiltersByParentId: function(component, selectedParentId){
        var action = component.get('c.getFiltersByParentId'); 

        action.setParams({
            "parentId" : selectedParentId 
        });

        action.setCallback(this, function(response){
            var state = response.getState(); // get the response state
            if(state == 'SUCCESS') {
                var filtersList = new Array();
                var data = response.getReturnValue();

                data.forEach(function(row){
                    var filter = new Object();
                    filter.Name = row.Name;
                    filter.MaxPercent = row.MaxPercent/100;
                    filter.MinPercent = row.MinPercent/100;
                    filter.MaxAmount = row.MaxAmount__c;
                    filter.MinAmount = row.MinAmount__c;
                    filtersList.push(filter);
                });
                component.set('v.filtersList', filtersList);
            }else {
                console.log("Failed with state: " + state);
            }
        });

        $A.enqueueAction(action);
    },

But this solutions carries a new one issue. The table does not want to show percent with decimals and rounds the value.

  • Yes, it rounds the value and doesn't show any decimal. – itzmukeshy7 Jul 18 at 2:02
  • do you know any way to show decimals in percent type? – Martin Larizzate Jul 18 at 20:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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