0

I created a data table using a LWC. But my table is behaving weird when the user write big text see example below enter image description here

As you can see the table is out of the card giving a very bad user experience Would it be possible to or break line according to the column size or to hide some of the text ???

here is my html code:

    <div class="slds-p-around_x-small">
            <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                <thead>
                    <tr class="">
                        <th class="slds-size_3-of-12" scope="col">
                            <div class="slds-truncate" title="Name">Name</div>
                        </th>
                        <th class="slds-size_1-of-12" scope="col">
                            <div class="slds-truncate" title="Number_of_Keys">Number of keys</div>
                        </th>
                        <th class="slds-size_3-of-12" scope="col">
                            <div class="slds-truncate" title="Neighbourhood">Neighbourhood</div>
                        </th>
                        <th class="slds-size_2-of-12" scope="col">
                            <div class="slds-truncate" title="LeadSource">LeadSource</div>
                        </th>
                        <th class="slds-size_3-of-12" scope="col">
                            <div class="slds-truncate" title="Status">Status</div>
                        </th>
                    </tr>
                </thead>
            <tbody>
                <template for:each = {myList} for:item = "item" for:index="indexVar">
                    <tr key={item.key} class="slds-hint-parent">
                        <td class="slds-size_3-of-12" data-label="Prospecting">
                            <div  title="Prospecting">
                                <template if:false={isEdited}>
                                    {item.Name}
                                   </template>
                                <template if:true={isEdited}>
                                    <lightning-input key={item.key} data-id={item.Id} name="input1" label="Name" value={item.Name} variant="label-hidden" onchange={handleNameChange}></lightning-input>
                                </template>
                            </div>
                        </td>
                        <td class="slds-size_1-of-10" data-label="Prospecting">
                            <div  title="Prospecting">
                                <template if:false={isEdited}>{item.Number_of_Keys__c}</template>
                                <template if:true={isEdited}>
                                    test
                                </template>
                            </div>
                        </td>
                        <td class="slds-size_3-of-12" data-label="Prospecting">
                            <div title="Prospecting">
                                <template if:false={isEdited}>{item.Neighbourhood__c}</template>
                                <template if:true={isEdited}>
                                    test
                                </template>
                            </div>
                        </td>
                        <td class="slds-size_2-of-12" data-label="Prospecting">
                            <div  title="Prospecting">
                                <template if:false={isEdited}> 
                                    {item.Neighbourhood__c}
                                </template>
                                <template if:true={isEdited}>
                                   test
                                </template>
                            </div>
                        </td>
                        <td class="slds-size_3-of-10" data-label="Prospecting">
                            <div  title="Prospecting">
                                <template if:false={isEdited}> 
                                    {item.Status}
                                </template>
                                <template if:true={isEdited}>
                                    <c-edit-picklist 
                                    unique-key={item.Id}
                                    object-api-name="Lead"
                                    selected-value={item.Status}
                                    onpicklistchange={handlePicklistChange}>
                                    </c-edit-picklist>
                                   test
                                </template>
                            </div>
                        </td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
0

The natural behavior of a HTML table is to expand the columns to fit the max width of the content.

To override this add this class to your table element:

slds-table_fixed-layout

The css style this class adds table-layout: fixed; is what stops it from expanding.

3
  • ok if I add slds-table_fixed-layout on my td I add slds-truncate it is now working is there a way to not have it truncate but break line?
    – Ben2pop
    Apr 20 at 11:26
  • You have to remove the slds-truncate class you have inside your td elements. Also, you would need to override some of the white-space styles on the default table. developer.mozilla.org/en-US/docs/Web/CSS/white-space
    – CyberJus
    Apr 20 at 12:51
  • you are the best working perfectly !
    – Ben2pop
    Apr 22 at 6:44
0

Use the SLDS Truncation if you want to truncate the extra text. For example you can add the class like slds-has-flexi-truncate.

Or if you want to wrap it using CSS.

overflow-wrap: break-word;
2
  • where should I put it slds-has-flexi-truncate ? I tried on every item nothing seems to work ...
    – Ben2pop
    Apr 19 at 13:55
  • @Ben2pop put it on <td> Apr 19 at 14:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.