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?
<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
