function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ShaikAShaikA 

How to implement show more button functionality in lightning data table

Hi All,

Please let me know how to implement show more button funtionaltiy with edit and delete buttons popup like below image in lightning component. 

User-added image

Regards,
Shaik
GulshanRajGulshanRaj
Hi,

We can build our own custom action and can use it in detail view. Unfortunately we can build custom action for list view. Please refer Salesforce documentation link for more details:
https://help.salesforce.com/articleView?id=actions_in_lex.htm&type=0

User-added image

Thanks
Gulshan Raj
 
Tanuj TyagiTanuj Tyagi
Hi Shaik ,
Below is the html code for action buttons .

I have kept onclick values on buttons empty , you can put your js controller method name which you want to call on the click of button.

<div class="slds-dropdown-trigger slds-dropdown-trigger--click">
                                       
                                        <button  onclick="" class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="Show More">
                                            <c:svgIcon svgPath="/resource/******__SLDS214/assets/icons/utility-sprite/svg/symbols.svg#down" category="standard" size="x-small" name="user" />
                                            <span class="slds-assistive-text">More options</span>
                                        </button>
                                        
    
                                        <div class="slds-dropdown slds-dropdown--right slds-dropdown--actions">
                                            <ul class="slds-dropdown__list" role="menu">
                                                <li class="slds-dropdown__item" role="presentation">
                                                    <a onclick="" id="{!eachCaseObj.Id}" data-record="" role="menuitem" tabindex="0">
                                                        Edit
                                                    </a>
                                                    <a onclick="" id="" data-record="" role="menuitem" tabindex="0">
                                                        <span class="slds-truncate">Delete</span>
                                                    </a> 
                                                </li>
                                            </ul>
                                        </div>
                                    </div>


Hope it helps.
Cheers!!
Tanuj