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
Guilherme_MonteiroGuilherme_Monteiro 

<lightning-datatable> - Remove Wrap Text/Clip Text Options Lightning Web Components (LWC)

Hi, folks!

Could you please help me with the following scenario?

I have created a <lightning-datatable> tag in my <template> and I need to hidden the dropdown list with the options Wrap Text and Clip Text.

Screenshot:

As far as I know, there isn't any OOTB class that could help me with that.

When trying to apply a custom style, nothing happens:

.THIS slds-button slds-button_icon-baree{
    display: none ;
}

Has anyone any idea of how to solve that?

Thanks in advance.

 
Maharajan CMaharajan C
HI Guilherme,

As of now you can't directly add this Style in Css File of the DataTable Component in LWC. 

But we have one workaround for this. Import the Style in JS file with the help of Static Resource.

1. Create the CSS file with the below style: 
      (Name the file as : hideWrapText)

.slds-button_icon-bare{
    display: none !important;
}


2. Compress the above created CSS file into ZIP file.         (Name of the ZIp File : hideWrapText)

3. Upload the Zip File in Static Resorce.This Static Resource should be Public.    (  Name the Static Resorce as : datatablelwc ).  

4. Import the Static Resource in JS file of datatable Component as like below.


import {LightningElement, wire, track} from 'lwc';
import datatablelwc from '@salesforce/resourceUrl/datatablelwc'
import { loadStyle } from 'lightning/platformResourceLoader';


5. use the Connected call back method to load the style.

    connectedCallback() {
        alert(' ** connectedCallback  ** ');
       Promise.all([
           loadStyle(this, datatablelwc + '/hideWrapText.css')
        ])
        .then(() => {
            alert('Files loaded.');
        })
        .catch(error => {
             console.log(error);
        }); 
    }

6. Deploy the change now the component will work properly .

==============================================


I have created the below sample component to test this and it's working:


Component:

<template>
    <lightning-card title="Sorting Data in Lightning Datatable in LWC" icon-name="standard:contact" > <br/>
        <div style="width: auto;">
            <template if:true={data}>
                <lightning-datatable data={data}
                                     columns={columns}
                                     key-field="id"
                                     sorted-by={sortBy}
                                     sorted-direction={sortDirection}
                                     onsort={handleSortdata}
                                     hide-checkbox-column="true"></lightning-datatable>
            </template>
        </div>
    </lightning-card>
</template>


JS:

/* eslint-disable no-console */
/* eslint-disable-next-line no-console */
/* eslint-disable no-alert */
import {LightningElement, wire, track} from 'lwc';
import datatablelwc from '@salesforce/resourceUrl/datatablelwc'
import { loadStyle } from 'lightning/platformResourceLoader';

// importing apex class methods
import getContacts from '@salesforce/apex/LWCExampleController.getContacts';
// datatable columns with row actions
const columns = [
    {
        label: 'FirstName',
        fieldName: 'FirstName',
        sortable: "true"
    }, {
        label: 'LastName',
        fieldName: 'LastName',
        sortable: "true"
    }, {
        label: 'Phone',
        fieldName: 'Phone',
        type: 'phone',
        sortable: "true"
    }, {
        label: 'Email',
        fieldName: 'Email',
        type: 'email'
    },
];
export default class DataTableWithSortingInLWC extends LightningElement { 
    // reactive variable
    @track data;
    @track columns = columns;
    @track sortBy;
    @track sortDirection;

    connectedCallback() {
        alert(' ** connectedCallback 1 ** ');
       Promise.all([
           loadStyle(this, datatablelwc + '/hideWrapText.css')
        ])
        .then(() => {
            alert('Files loaded.');
        })
        .catch(error => {
             console.log(error);
             
        }); 
    }

    // retrieving the data using wire service
    @wire(getContacts)
    contacts(result) {
        if (result.data) {
            this.data = result.data;
            this.error = undefined;
        } else if (result.error) {
            this.error = result.error;
            this.data = undefined;
        }
    }
    handleSortdata(event) {
        // field name
        this.sortBy = event.detail.fieldName;
        // sort direction
        this.sortDirection = event.detail.sortDirection;
        // calling sortdata function to sort the data based on direction and selected field
        this.sortData(event.detail.fieldName, event.detail.sortDirection);
    }
    sortData(fieldname, direction) {
        // serialize the data before calling sort function
        let parseData = JSON.parse(JSON.stringify(this.data));
        // Return the value stored in the field
        let keyValue = (a) => {
            return a[fieldname];
        };
        // cheking reverse direction 
        let isReverse = direction === 'asc' ? 1: -1;
        // sorting data 
        parseData.sort((x, y) => {
            x = keyValue(x) ? keyValue(x) : ''; // handling null values
            y = keyValue(y) ? keyValue(y) : '';
            // sorting values based on direction
            return isReverse * ((x > y) - (y > x));
        });
        // set the sorted data to data table data
        this.data = parseData;
    }
}


Apex Class:
public inherited sharing class LWCExampleController {
    @AuraEnabled(Cacheable = true)
    public static List<Contact> getContacts(){
        return [SELECT Id, FirstName,LastName, Phone, Email FROM Contact limit 15];
    }
}



My Static resource CSS File is:

.slds-button_icon-bare{
    display: none !important;
}
.slds-card__header{
    color: red !important;
}



LoadStyle from Static Resource in JS:
https://coderoom.in/apply-css-in-lwc-with-best-possible-way/
https://sfdchelper.com/how-to-use-static-resource-to-style-lightning-web-components/
https://newstechnologystuff.com/2019/03/16/use-static-resource-in-lightning-web-component/
https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-resource-loader/documentation

Thanks,
Maharajan.C
ChrisYazChrisYaz
Thanks @Maharajan C! This little trick just helped me
aarti garg 15aarti garg 15
just add hideDefaultActions: 'true' for every column.
const columns = [
    { label: 'First Name', fieldName: 'Name', hideDefaultActions: 'true'}, 
    { label: 'Phone', fieldName: 'Phone__c', hideDefaultActions: 'true'}, 
    { label: 'Email', fieldName: 'Email__c', hideDefaultActions: 'true'}, 
]