You need to sign in to do that
Don't have an account?
Sainath 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
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); } })
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.
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
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.
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
Just want to ask, is it possible to change the colour of column tabs using the same css?
I want to change the background colour of column headers over here
<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:
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
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.
my code is as follows:
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
This css colours the whole cell but the line-height only affects the text. 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}