6

I'm able to apply color or make the column heading text bold, but I can't center align the text for some reason.

<lightning:datatable data="{! v.data }"
        columns="{! v.columns }"
        keyField="id"
        resizeColumnDisabled="true"
        hideCheckboxColumn="true"/>

.THIS table thead th {
   color: red;
   font-weight:bold;
}

Putting text-align: center in the css doesn't seem to have any effect on the column text. Even directly altering the div surrounding the lightning:datatable with a style tag doesn't work.

Any help would be great.

2
  • Can you try enclosing the lightning:datatable in a div and giving the div a class: slds-align_absolute-center
    – Sarang
    Dec 11, 2018 at 12:55
  • @Sarang this didn't work. That doesn't seem to affect text.
    – Franz
    Dec 11, 2018 at 15:31

2 Answers 2

5

I just add css that below this and worked.

for column .THIS .slds-th__action{ justify-content: center !important; }

for body .THIS .slds-grid_align-end { justify-content: center !important; }

7
  • Would you please add more explanation to your answer that would clarify why it worked.
    – Eduard
    Feb 7, 2019 at 9:05
  • Sorry Eduard that css for table's body. For Column you must add css that below this. ' .THIS .slds-th__action{ justify-content: center !important; }' Feb 7, 2019 at 10:25
  • Please, edit your question and provide details there
    – Eduard
    Feb 7, 2019 at 10:29
  • This worked! The column headers centered with .THIS .slds-th__action{ justify-content: center; }
    – Franz
    Feb 7, 2019 at 19:49
  • If you want the header to be right-aligned: .THIS .slds-th__action{ justify-content: flex-end; }
    – apz
    Feb 12, 2021 at 1:59
0

you can try this code :

<div  class="myUniqueTable">
    <lightning:datatable aura:id="accountContacts-list"
                         data="{!v.data}"
                         columns="{!v.columns}"
                         keyField="id"
                         maxRowSelection="1"
                         selectedRows="{!v.selectedIds}" />
</div>

and in css add this:

.THIS .myUniqueTable th {
    text-align: center !important;
}
2
  • This doesn't work unfortunately. In fact, my font weight attribute stopped working with this code.
    – Franz
    Dec 10, 2018 at 14:38
  • Using !important is never the answer Feb 7, 2019 at 11:23

You must log in to answer this question.

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