function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Matyas CsabaMatyas Csaba 

lightning_datatable formatting Column header

Hello helpers

I am developig an applicatin isung lightning:datatable  and i  would  like to add some formatting to the data

I was able  to  format  the data rows  and data cells but I am not  able to influence how column header look  like
see below  how it looks like to better understand what I am lookign for.  As a minimum I would like  to have the column Names bold  and in different color like  the rest  of the table. 

User-added image
  
Thanks in advance
 
Best Answer chosen by Matyas Csaba
sfdcMonkey.comsfdcMonkey.com
Hi , i have a solution for you : add folloing CSS in lightning component CSS tab : 
.THIS table thead th {
   color: red;
   font-weight:bold;
}

User-added image

Kindly let us know if it helps you and mark as best answer if it helps you so it make proper solution for others 
Thanks 
sfdcmonkey.com

All Answers

sfdcMonkey.comsfdcMonkey.com
Hi , i have a solution for you : add folloing CSS in lightning component CSS tab : 
.THIS table thead th {
   color: red;
   font-weight:bold;
}

User-added image

Kindly let us know if it helps you and mark as best answer if it helps you so it make proper solution for others 
Thanks 
sfdcmonkey.com
This was selected as the best answer
Matyas CsabaMatyas Csaba
Hello Piyush

sorry  to  bother  you after closing the ticket. do  you have ide a why I cna not  set the background colr  for the datatable  column header?
I  added   background-color: #66ccff;   into the code section  you suggested
The  full styling code  lokks like below:

<head>
<style>

#dt1 
{
    border: 1px solid #ddd;
    border-collapse: collapse;
    width: 100%;
}

#dt1 td
{
    border: 1px solid #ddd;
    padding: 8px;
}

#dt1 tr:nth-child(even){background-color: #f2f2f2;}

#dt1 tr:hover {background-color: #ddd;}

#dt1 table thead th 
{   
   color: blue;
   font-weight:bold;
   background-color: #66ccff;
   border: 1px solid #ddd;
}

</style>
</head>

            <div id="dt1" >

            <lightning:datatable data="{!v.mydataLst}" 
            ......
            </lightning:datatable> 

            </div>
Akhil KunaAkhil Kuna
Hi Matyas,

Can you suggest me with how you formatted those cell, rows. They look very good. I want to implement it on my datatable.

Thanks,
Akhil