-2

Hi I'm new to LWC and I have worked on the data table where it's iterated one so its shows like multiple tables in real-time now in each table the user will pick only one option from the selection so I have used max-row-selection =1 but here the problem is how to deselect the rows in Programmatically in LWC?

<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"
          max-row-selection="1"
          draft-values={draftValues}
          data={table.data}
          columns={column}
          
        >
        </lightning-datatable>
      </div>

      
    </template>

and my js

 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;
        }
        
}

attached my sample screenshot. [![enter image description here][1]][1]

Thanks in Advance.

2
  • 1
    Please do not request help in the comments. If someone feels they can contribute or help, they will post an answer, and/or ask for clarification in the comments. Additionally, instead of asking "how to" if you were to clarify what problem you are facing, and point out where in the code you are having issues, your post is more likely to get an answer.
    – glls
    Commented May 5, 2021 at 12:54
  • @glls I have mutliple tables by iterting it if i use the above code selectedRows.length>1 it will work only for first table I need to edit for all the table in the datatable
    – grey 123
    Commented May 5, 2021 at 12:57

2 Answers 2

3

Your code has multiple issues. You're creating multiple lightning-data-tables, but then you only have a single preSelectedRows variable. You're assigning your slice to a local variable, not a variable bound to the table. Your slice method should use two parameters to get just the first entry (0,1).

I haven't built your entire thing of code, but the following changes may work:

      selected-rows={table.preSelectedRows}

And:

handleRowSelection = event => {
    var selectedRows = event.detail.selectedRows;
    const currentTable = this.oppList.find(table => table.cateogry === event.target.dataset.id);
    currentTable.preSelectedRows = selectedRows.length>1?selectedRows.slice(0,1):selectedRows;
}
2

Learning Resources

You should review the LWC documentation, JS, and Trailhead, as others have already pointed out multiple issues with your code:

Build LWC Trail in Trailhead

LWC Developer Guide

Single Selection LWC Lightning Datatable

You'll want to filter out the newly selected rows of the table using a previous selected variable. In order to choose the newly selected row (either from a row selection / table-wide selection) you can use the JS array filter method. As sfdcfox replied, you'll want to store the variables for EACH table in your iteration array oppList -- similar to how you are storing each table's data:

oppList = [
   { data: [...],
     category: '...',

     // Add the below for each element in oppList
     draftValues: [...],
     previous: '',
     preSelectedRows: [...]
   },
   ... ]
<!-- LWC.html -->
<template>
<lightning-datatable
    data-id={table.category}
    key-field="Id"
    data={table.data}
    draft-values={table.draftValues}
    selected-rows={table.preSelectedRows}
    onrowselection={handleRowSelection}
    columns={columns}>
</lightning-datatable>
</template>
// LWC.js
@track oppList;

handleRowSelection = event => {
    // Array of Row Objects
    let selectedRows = event.detail.selectedRows;

    const currentTable = this.oppList.find(table => table.cateogry === event.target.dataset.id);

    if(selectedRows.length) {
        if (!currentTable.previous) {
            currentTable.previous = selectedRows[0].Id;
            currentTable.preSelectedRows = [selectedRows[0].Id];
        } else {
            currentTable.preSelectedRows = [selectedRows.reduce((p,e) => {
                if (e.Id != currentTable.previous) {
                    p = e.Id;
                }
                return p;
            }, currentTable.previous)];
            currentTable.previous = currentTable.preSelectedRows[0];
        }
    } else {
        currentTable.previous = null;
        currentTable.preSelectedRows = [];
    }
}

Not the answer you're looking for? Browse other questions tagged .