You need to sign in to do that
Don't have an account?
Prasan De Alwis
How to Add Toggle Button for LWC lightning-datatable?
I am loading the user table data to datatable using LWC. I wanted to add toggle button for each record row to active and inactive some feature. Currently, I have added lightning-datatable's checkbox option as well for update selected rows as bulk using the button. I have search on the toggle button in datatable in lwc but could not found a direct method for add the toggle button option for lightning-datatable in LWC. Is there is way to do it? Could you help me?
HTML Code
HTML Code
<template> <lightning-card> <lightning-layout multiple-rows="true"> <lightning-layout-item size = "12" > <div> <div style="float: right;"> <ul class="slds-button-group-row"> <li class="slds-button-group-item" > <template if:true={showToggle} style="float: right;"> <lightning-input type="toggle" label="Enable Process" onchange ={deactivateProcess} checked= "{ToggleChecked}" class="slds-m-right_xx-small slds-m-left_xx-large" > </lightning-input> </template> </li> <li class="slds-button-group-item" > <lightning-button class="slds-m-right_xxx-small slds-m-top_none slds-m-bottom_xxx-small" slot="actions" label="Exclude from De-activation" onclick={updateRecords}> </lightning-button> </li> <li class="slds-button-group-item" > <lightning-helptext class="slds-m-top_none slds-m-right_small" content="The users that will exclude from the de-activation."></lightning-helptext> </li> </ul> </div> </div> </lightning-layout-item> </lightning-layout> <div> <div class="slds-col slds-size_12-of-12 slds-p-top_x-small"> <div class="lgc-bg"> <lightning-datatable key-field="UserId" columns={columns} data={currentPageData} selected-rows= {selectedRows} onrowselection= {rowSelection} sorted-by={sortBy} sorted-direction={sortDirection} onsort={handleSortdata} > </lightning-datatable> </div> <div class="slds-col sldss-size_10-of-12 slds-p-top_medium"> <lightning-layout multiple-rows="true"> <lightning-layout-item size = "12" margin= "around-small"> <div class="slds-align_absolute-center"> <ul class="slds-button-group-row"> <li class="slds-button-group-item" > <button class="slds-button slds-button_neutral" onclick ={onFirst} disabled={disabledConditionFirst}> First </button> </li> <li class="slds-button-group-item" > <button class="slds-button slds-button_neutral" disabled={disabledConditionPrev} onclick ={onPrev}> Prev </button> </li> <li class="slds-button-group-item" > <button class="slds-button slds-button_neutral" disabled={disabledConditionNext} onclick={onNext} >Next</button> </li> <li class="slds-button-group-item" > <button class="slds-button slds-button_neutral" onclick ={onLast} disabled={disabledConditionLast}> Last </button> </li> </ul> </div> </br> <div class="slds-align_absolute-center" > <span disabled={disabledCondition}>Total Records: {totalRecordCount} </span> </div> <div class="slds-align_absolute-center" > <span disabled={disabledCondition}>Page ({page} of {numberOfPages}) </span> </div> </lightning-layout-item> </lightning-layout> </div> </div> </div> <div if:true={showLoadingSpinner}> <lightning-spinner alternative-text="Loading" size="large"></lightning-spinner> </div> </lightning-card> </template>
Sample UI screenshot
Try Below Link
Toggle Button In DataTable (https://devlife.tech/lwc/how-to-create-a-custom-column-in-datatable-lwc/)
Please Mark It As Best Answer If It Helps Thank You!