function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sainath VenkatSainath Venkat 

css to lightning datatable tab

I am working on Lightning component and implementing the CSS but its not working. can anyone help me out in sorting out this issue.

In my below component, I want to change the colour and size of Label "Search Campaign by Name", my code is below
<aura:component Controller="CampaignMemberController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
	    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:attribute name="inputKey" type="String"/>
    <aura:attribute name="sortedBy" type="String"/>
    <aura:attribute name="sortedDirection" type="String"/>
    <aura:attribute name="defaultSortDirection" type="String"/>
  <form class="slds-form--inline">
      <div class="slds-form-element">
    <lightning:input aura:id="searchId" type="search" label="Search Campaign by Name" name="searchName" value="{!v.inputKey}"/>
          </div>
      <div class="slds-form-element">
        <lightning:button label="Search" onclick="{!c.doSearch}"/>
      </div>
    </form>
    <lightning:datatable class="{table-test}"
                         sortedBy="{! v.sortedBy }"
                         sortedDirection="{! v.sortedDirection }"
                         defaultSortDirection="{! v.defaultSortDirection }"
                         onsort="{! c.updateColumnSorting }"
                         data="{! v.mydata }" 
                         columns="{! v.mycolumns }" 
                         keyField="Id"
                         onrowaction="{! c.handleRowAction }"/>
</aura:component>
I also want to change the column header styling too.
({
    init: function (cmp, event, helper) {
        var actions = [{ label: 'Show details', name: 'show_details'}];
        
        cmp.set('v.mycolumns', [
            { type: 'action', typeAttributes: { rowActions: actions } },
            {label:"Campaign Name", fieldName:"Campaign_Name__c",class:"table-test",type:"Formula(Text)"},
            {label:"Last Activity Date", fieldName:"Last_Activity_Date__c",sortable:true, type:"Formula(Date)"},
            {label:"Name",sortable:true, fieldName: 'linkName', type: 'url', 
            typeAttributes: {label: { fieldName: 'LastName' }, target: '_blank'}},
            {label:"Phone", fieldName:"Phone", type:"phone"},
            {label:"Company(Account)", fieldName:"CompanyOrAccount", type:"Text(255)"},
            {label:"Email", fieldName:"Email", type:"Email",sortable:true},
            {label:"Status", fieldName:"Status", type:"Picklist"},
            {label:"Owner", fieldName:"Owner__c", type:"Formula(Text)"}
        ]);
    },
    
    handleRowAction : function(cmp,event,helper){
        var action = event.getParam('action');
        var row = event.getParam('row');
        // navigate to sObject detail page     
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": row.Id,
            "slideDevName": "detail"
        });
        navEvt.fire();
    },
    
    doSearch : function(cmp,event,helper){
        var src = cmp.get("v.inputKey");
        var action=cmp.get('c.getCampaignMember');
        if (src == '' || src == null) {
            // display error message if input value is blank or null
            alert('Enter search keyword');
        }
        action.setParams({Keys:src});
        action.setCallback(this,$A.getCallback(function(response){
            var state=response.getState();
            if(state==="SUCCESS"){
                var oResponse=response.getReturnValue();
                cmp.set("v.mydata",oResponse);
                                var records =response.getReturnValue();
                records.forEach(function(record){
                    record.linkName = '/'+record.Id;
                    cmp.set("v.mydata",records);
                })
            }else if(state==="ERROR"){
                var errors=response.getError();console.error(errors);
            }
        }
                                              ));
        $A.enqueueAction(action);
    },
        updateColumnSorting: function (cmp, event, helper) {
        var fieldName = event.getParam('fieldName');
        var sortDirection = event.getParam('sortDirection');
        cmp.set("v.sortedBy", fieldName);
        cmp.set("v.sortedDirection", sortDirection);
        helper.sortData(cmp, fieldName, sortDirection);
    }
    
})


 
Khan AnasKhan Anas (Salesforce Developers) 
Hi Sainath,

Greetings to you. It is a pleasure to be in touch with you again.

You can use below CSS to change the color and font-size of a label.
 
.THIS {
}

.THIS label.slds-form-element__label{
    
    font-size: 1.00rem;
    color: blue;
}

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Sainath VenkatSainath Venkat
Hello Khan Anas ,

I want to increase the size of text in my component code at line no.12 for label="Search Campaign by Name", can you please help me out for the same.
Khan AnasKhan Anas (Salesforce Developers) 
Yes, you can increase the size of that label through font-size: 2.00rem;

Just change the size according to your requirement. Refer above CSS.

I hope it helps you.

Kindly mark this as solved if the information was helpful. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Sainath VenkatSainath Venkat
Thanks, it worked but component is taking time to reflect the same.
Just want to ask, is it possible to change the colour of column tabs using the same css?
User-added image
I want to change the background colour of column headers over here
Khan AnasKhan Anas (Salesforce Developers) 
To change the color of datatable column headers, you need to use below CSS. Before that, give your datatable a class.

<lightning:datatable class="tablecol"
                             aura:id="CampaignMemberDataTable"
                             onsave ="{!c.onSave}"
                             data="{! v.mydata }" 
                             columns="{! v.mycolumns }" 
                             keyField="Id"
                             onrowaction="{! c.handleRowAction }"/>

Then, use below CSS:
 
.THIS {
}

.THIS label.slds-form-element__label{
    
    font-size: 1.00rem;
    color: blue;
}

.THIS .tablecol thead th span {
    background-color: #1589ee;
    color: white
}

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Sainath VenkatSainath Venkat
Hello Khan Anas,

Thanks for very quick reply.

I have tried with the that you have provided but the back bround colour of Column headers is not changing.
User-added image

my code is as follows:
<aura:component Controller="CampaignMemberController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
	    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:attribute name="inputKey" type="String"/>
    <aura:attribute name="sortedBy" type="String"/>
    <aura:attribute name="sortedDirection" type="String"/>
    <aura:attribute name="defaultSortDirection" type="String"/>
  <form class="slds-form--inline">
      <div class="slds-form-element">
    <lightning:input aura:id="searchId" type="search" label="Search Campaign by Name" name="searchName" value="{!v.inputKey}"/>
          </div>
      <div class="slds-form-element">
        <lightning:button label="Search" onclick="{!c.doSearch}"/>
      </div>
    </form>
    <lightning:datatable class="tablecol"
                         aura:id="CampaignMemberDataTable"
                         sortedBy="{! v.sortedBy }"
                         sortedDirection="{! v.sortedDirection }"
                         defaultSortDirection="{! v.defaultSortDirection }"
                         onsort="{! c.updateColumnSorting }"
                         data="{! v.mydata }" 
                         columns="{! v.mycolumns }" 
                         keyField="Id"
                         onrowaction="{! c.handleRowAction }"/>
</aura:component>
.THIS {
}

.THIS label.slds-form-element__label{
    
    font-size: 1.20rem;
    color: black;
}
.THIS .tablecol thead th span {
    background-color: #FF00FF;
    color: fuchsia;
}


 
Khan AnasKhan Anas (Salesforce Developers) 
Use this, it will work:
 
.THIS {
}

.THIS label.slds-form-element__label{
    
    font-size: 1.00rem;
    color: blue;
}

.THIS.tablecol thead th span {
    background-color: #FF00FF;
    color: fuchsia;
}

If datatable is a child of some other component, like lightning:card, then you need to give space after .THIS 
.THIS .tablecol thead th span

But, if it is a parent then no space is required after .THIS
.THIS.tablecol thead th span

I hope it helps you.

Kindly mark this as solved if the information was helpful. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
David Roberts 4David Roberts 4
I'm trying to hide the header of a lightning:datatable.
This css colours the whole cell but the line-height only affects the text.
.THIS .slds-th__action .slds-th__action-button { display: none; }

.THIS .tabStyle thead th span {
    background-color: red;
    color: white;
    line-height: 2px;
}
I can't find a way to reduce or make zero the height of the header row or to hide it completely.
This css is linked to the datatable by the class.
{The first line disables the WRAP dropdown in the header}
 
<lightning:datatable  class = "tabStyle" etc.../>

 
Dharanee KDharanee K
If we change the colors of header then if you want to add sort on the column on hover it changes everything and it looks bad.