2

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, 2021 at 15:59

1 Answer 1

2

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

3
  • OMG thank you so much! It would be something so small lol
    – Asmodahlia
    May 21, 2021 at 16:09
  • If you see Shamina's answer in the link you provided, it already mentions this.
    – manjit5190
    May 21, 2021 at 16:10
  • step: '0.01' is not working for me. Alignment works fine Jan 14 at 9:23

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .