+ Start a Discussion
Prasan De AlwisPrasan 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
 
<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

User-added image

CharuDuttCharuDutt
Hii Prasan De alwis
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!