-1

I have created a data table with Multiple table by iterating it. I have to select only one row per data table using checkbox by checking one the other one automatically remove just like radio button. Please help me

<template for:each={oppList} for:item="table">
  <div class="slds-m-bottom_large" key={table.category}>
    <!-- <div class="table-header">
      <h2>{table.category}</h2> 
    </div> -->
    <lightning-card key={table.category} icon-name="custom:custom11">
        <h1 slot="title">{table.category}</h1>
        </lightning-card>
    <lightning-datatable
      data-id={table.category}
      key-field="Id"
      selected-rows={preSelectedRows}
      onsave={handleSave}
      onrowselection={handleRowSelection}
      suppress-bottom-bar="true"
      draft-values={draftValues}
      data={table.data}
      columns={column}
      
    >
    </lightning-datatable>
  </div>

  
</template>

JS code:

handleRowSelection = event => {
        var selectedRows=event.detail.selectedRows;
        if(selectedRows.length>1)
        {
            var el = this.template.querySelector('lightning-datatable');
            selectedRows=el.selectedRows=el.selectedRows.slice(1);
            event.preventDefault();
            return;
        }
}

How to achieve this ? [![enter image description here][1]][1]

1
1

I have something already implemented like this as an example for your use case:

<template if:true={contact}>
<lightning-datatable key-field="Id"
    data={contact}
    onrowselection={handleRowSelection}
    columns={columns}>
</lightning-datatable>
</template>

JS Code:

import { LightningElement, wire } from 'lwc';
import getContactList from '@salesforce/apex/ContactController.getContactList';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

const columns = [
{ label: 'First Name', fieldName: 'FirstName' },
{ label: 'Last Name', fieldName: 'LastName' },
{ label: 'Title', fieldName: 'Title' },
{ label: 'Phone', fieldName: 'Phone', type: 'phone' },
{ label: 'Email', fieldName: 'Email', type: 'email' }
];
export default class SingleSelectDatatable extends LightningElement {
error;  
columns = columns;
contact=[];
connectedCallback()
{
    getContactList()
    .then((result,error) => {
        if (result) {
           this.contact=result;
        } else if (error) {
            console.error(error);
        }
    })
}
handleRowSelection = event => {
    var selectedRows=event.detail.selectedRows;
    if(selectedRows.length>1)
    {
        var el = this.template.querySelector('lightning-datatable');
        selectedRows=el.selectedRows=el.selectedRows.slice(1);
        this.showNotification();
        event.preventDefault();
        return;
    }
}
showNotification() {
    const event = new ShowToastEvent({
        title: 'Error',
        message: 'Only one row can be selected',
        variant: 'warning',
        mode: 'pester'
    });
    this.dispatchEvent(event);
  }
}

You can make it work for Opportunity record list in the same way..

lighting-datatable has property max-row-selection will restrict maximum number of records can be selected. If we set 1 as value then instead of checkbox it will be show radio.

8
  • i have multiple table by iterating you code won't work for me . i have tried – grey 123 May 5 at 7:16
  • I found this thread, which provided hints about usage with multiple tables but with Aura component, see if it helps. – Shivankur Naikwade May 5 at 7:25
  • I have tried its not working – grey 123 May 5 at 7:51
  • @sfdcfox please help this question – grey 123 May 5 at 7:52
  • Please someone helps me – grey 123 May 5 at 8:07

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