1

So I've tried both of the solutions posted here: Lightning datatable column value misaligned and neither of them are working for what I have.
Visual of percentage cutoff


The column above is the only sortable column in the datatable and is also the only one displaying a percent. The other columns are all text or integers. Below are the snippets from my .js and .css documents:

percentMissedAssessmentQuestions.js - column specs

    const columns = [
    {label: 'Question', fieldName: 'question', type: 'text'},
    {label: 'Red Rating', fieldName: 'redRating', type: 'integer'},
    {label: 'Yellow Rating', fieldName: 'yellowRating', type: 'integer'},
    {label: 'Green Rating', fieldName:'greenRating', type:'integer'},
    {label: 'Percentage Missed', fieldName: 'percentageMissed', type: 'percent', sortable: true,
    typeAttributes: {
        step: '0.01',
        alignment: 'left'
    }
},
]

percentMissedAssessmentQuestionsCSS.css

 .THIS .slds-grid_align-end
{
    justify-content: left !important; 
    text-align: left !important;
}
.slds-grid
{
    justify-content: left !important;
    text-align: left !important;
}

In addition, I inspected the page and found that the class containing the percentages is indeed .slds-grid_align-end, so I have no clue why my code isn't overriding it. It should also be noted that I have tried adding the .THIS prefix to both of the CSS classes to no avail. The data in the table is being returned via JSON. If anyone has any suggestions, they would be extremely appreciated. Thank you in advance, Asmo

1
  • alignment is an attribute of cellAttributes, but you put it in typeAttributes, is it a typo? It should be typeAttributes: { step: '0.01' }, cellAttributes: { alignment: 'left' }
    – RubenDG
    May 21 at 15:59
1

The alignment should be in cellAttributes not typeAttributes.

  const columns = [
    {label: 'Question', fieldName: 'question', type: 'text'},
    {label: 'Red Rating', fieldName: 'redRating', type: 'integer'},
    {label: 'Yellow Rating', fieldName: 'yellowRating', type: 'integer'},
    {label: 'Green Rating', fieldName:'greenRating', type:'integer'},
    {label: 'Percentage Missed', fieldName: 'percentageMissed', type: 'percent', sortable: true,
    cellAttributes: {
        alignment: 'left'
    },
    typeAttributes: {
        step: '0.01',
    }
},
]

enter image description here

2
  • OMG thank you so much! It would be something so small lol
    – Asmodahlia
    May 21 at 16:09
  • If you see Shamina's answer in the link you provided, it already mentions this.
    – manjit5190
    May 21 at 16:10

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.