Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Andrew Aldis 15Andrew Aldis 15 

How can I stop a Lightning DataTable from showing the WrapText/ClipText drop down

Is there a way to stop the drop down that give and option to wrap or clip text in a lightning data table?

User-added image
Raj VakatiRaj Vakati
 No, as per official documentation there is no options to change the default drop-down action
Andrew Aldis 15Andrew Aldis 15
I was able to hide it with CSS 
.THIS .slds-button_icon-bare{
    display: none;
}
Balaji Srinivasan 1Balaji Srinivasan 1
@andrew aldis15

Just curious - when I looked at the inspect window, I did not find this class .SLDS-BUTTON_ICON-BARE

However, I found .slds-dropdown-trigger class

Can you advise where are you seeing the button_icon-bare class?

Thx.
RyanCoxRyanCox
I was able to hide it with 

.THIS .slds-th__action .slds-th__action-button { display: none; }
Ronald PayneRonald Payne

   

.THIS lightning-primitive-header-actions {
    display: none;
}
 

 

This has worked for me in the past, but does not work on LWC data tables. this will hide the headers drop down for the whole table - if you have more than 1 table and want to do this to seelct tables, add a style class to the table and modify this to be 

.THIS .mySpecificTable lightning-primitive-header-actions { display: none; }
Pramod MangalorePramod Mangalore
This is what specifically worked for me!
@Ronald Payne: Thanks! 
.THIS lightning-primitive-header-actions {
    display: none;
}
.THIS lightning-primitive-icon {
    display: none;
}
Sara GarridoSara Garrido
How change css of this page?
Admin 3 4Admin 3 4
You can change it on your .css file (style part) and paste what @Ronald Payne post.
Sander de Jong (1966)Sander de Jong (1966)
@Pramod Mangalore When I try your answer, I get the error: No MODULE named primitiveIcon found
Sander de Jong (1966)Sander de Jong (1966)
@RyanCox That doesn't do anything at all in my case. You just put it in the CSS file of the LWC?
RyanCoxRyanCox
@Sander de Jong my css here is for the aura lightning data table, not LWC. 
Saravanan @CreationSaravanan @Creation
Hello Everyone,

I have used all the CSS and nothing has worked then I started dig into the documentation and there is a attribute called 'hideDefaultActions' on the columns. When you are defining the column you need to specify this attribute. 

Sample code:

const columns = [
{
label: 'Name',
fieldName: 'urlval',
type: 'url',
typeAttributes: {label: { fieldName: 'opportunityName' },
target: '_blank', tooltip: { fieldName: 'opportunityName' } },
sortable: true,
hideDefaultActions: "true"
}, 
];

This has worked as expected. 
Jorge GómezJorge Gómez
You are an MVP Saravanan, you cant do this shenanigans with CSS on LWC just on aura, but your awnser was perfect on LWC, thank you so much!!
Arindam KarmakarArindam Karmakar
To hide the drop down in LWC the following CSS is enough. 
.slds-has-button-menu .slds-th__action-button {
	display: none;
}
But you have to upload the CSS file in Static Resource and then load it in your JS file using 
import { loadStyle } from 'lightning/platformResourceLoader';
import myStyle from '@salesforce/resourceUrl/myCustomStyleResource'
and call it just after the connectedCallback() as below: 
connectedCallback() {
        loadStyle(this, myStyle);
        //your code here...
}
Akinsola Jegede 23Akinsola Jegede 23
Saravanan @Creation Answer works just fine
.12.12
I just need to disable the particular column based on picklist value in datatable can anyone please help me out for this 
Ron Gong 15Ron Gong 15
For anyone still looking for a solution to this you can add the "hideDefaultActions" on to the specific column that you'd like to remove these actions for.  

Check the "Working with Column Properties" section in the documentation, https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/documentation
Shristi Mishra 3Shristi Mishra 3
Hi Andrew Aldis 15,

you can use hideDefaultActions : true attribute in your datatable columns.

User-added image