0

Due to styling contraints I am unable to use the standard lightning-datatable in my LWC. I had tried creating a custom type and extending those using a custom lightning-datatable but we have too many unique use cases regarding Icons and being able to disable checkboxes to proceed with the standard approach.

I've created a standard table using the SLDS styling and I'm looping through data provided from a Wire method.

I know this is a relatively straightforward ask but the Proxy object returned is confusing my understanding of what to loop through to get the Wrapper Data from the Selected Rows on the custom table. I tried using the Closest function but it appears I'm looking in the wrong area. I'm still expanding my LWC knowledge and I've always used the standard lightning-datatable before.

What I need is to be able to loop through all selected rows when a button is clicked, then pass the Wrapper class behind that row to an Apex Method which will do the back end updates needed on the Salesforce side.

Any help would be greatly appreciated. Thank you so much.

Below is my table

<table class="slds-table slds-table_cell-buffer slds-table_bordered">
                      <thead>
                        <tr class="slds-line-height_reset">
                          <th class="" scope="col">
                            <div class="slds-truncate">
                              <lightning-input onchange={allSelectedOriginal} type="checkbox">
                              </lightning-input>
                            </div>
                          </th>
                          <th class="" scope="col">
                            <div class="slds-truncate" title="Description"></div>
                          </th>
                          <th class="" scope="col">
                            <div class="slds-truncate" title="Name">Name</div>
                          </th>
                          <th class="" scope="col">
                            <div class="slds-truncate" title="Permission Set Group Details"></div>
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        <template for:each={originalUserPermissionSetOutput} for:item="perm">
                          <tr key={perm.outputUniqueId} style="height: 30px">
                            <th scope="col">
                              <template if:false={perm.hideRow}>
                                <div>
                                  <lightning-input class="originalUserCheckbox" type="checkbox"
                                    value={perm.outputName} data-id={perm.outputUniqueId}></lightning-input>
                                </div>
                              </template>
                            </th>
                            <th scope="col">
                              <div>
                                <template if:false={perm.hideRow}>
                                  <template if:true={perm.displayDescription}>
                                    <lightning-helptext content={perm.outputDescription}>
                                    </lightning-helptext>
                                  </template>
                                </template>
                              </div>
                            </th>
                            <th scope="col">
                              <template if:false={perm.hideRow}>
                                <div>{perm.outputName}
                                </div>
                              </template>
                            </th>
                            <th scope="col">
                              <div>
                                <template if:false={perm.hideRow}>
                                  <template if:true={perm.displayPSDescription}>
                                    <lightning-helptext icon-name="utility:groups"
                                      content={perm.parentPermissionSetGroupName}>
                                    </lightning-helptext>
                                  </template>
                                  <template if:true={perm.displayPsStar}>
                                    <lightning-helptext icon-name="utility:favorite">
                                    </lightning-helptext>
                                  </template>
                                </template>
                              </div>
                            </th>
                          </tr>
                        </template>
                      </tbody>
                    </table>

Function being called:

assignselected() {

//Get all selected records across the tabs
//Display records to be selected to user
//Create the necessary records
let allRows = this.template.querySelectorAll(".originalUserCheckbox");
let selectedRows = [];

for (let i = 0; i < allRows.length; i++) {

  if (allRows[i].checked === true) {

    //Get our row Data
    let trData = allRows[i].closest("template > tr");

    //Loop through our Original Records
    for (let record of this.originalUserPermissionSetOutput) {
      if (trData.dataset.id === record.outputUniqueId) {
        selectedRows.push(record);
      }
    }
  }

}

console.log(selectedRows);
console.log(selectedRows.length);

assignPermissionRecords({ permsToAssign: JSON.stringify(selectedRows) })
  .then((results) => {
    console.log('Entered Assign Function');

  })
  .catch((error) => {
    console.log('Into Errors');
    this.notifyUser(
      "Error working on the Assignment Process",
      "Error working on the Assignment Process",
      "info"
    );
    // eslint-disable-next-line no-console
    console.error("Lookup error", JSON.stringify(error.body.message));
    this.errors = [error];
  });

}

10
  • don't you have all your row data stored in an array of rows? originalUserPermissionSetOutput so, when you select your row, you can simply use the find function to get the data you need from originalUserPermissionSetOutput ?
    – glls
    Commented Feb 8, 2022 at 17:55
  • @glls how would I get the Id from the TR to use in the find function? At least that's how I assume it would need to be done. Thanks!
    – cloudcap
    Commented Feb 8, 2022 at 18:16
  • add a data attribute to your row, or whatever element it is you are clicking
    – glls
    Commented Feb 8, 2022 at 18:29
  • so in the assignselected() function - I am finding all the selected Checkboxes and I believe it returns a NodeList. How do I get the Id from the parent ID (the TR) from that point to loop through the originalUserPermissionSetOutput records? I have tried a few variations and reviewing the Proxy Object in the Chrome devtools but I have been unable to find what I need. Thanks @glls
    – cloudcap
    Commented Feb 8, 2022 at 18:37
  • 1
    console.log(JSON.parse(JSON.stringify(proxyObject)));
    – iLLin
    Commented Feb 8, 2022 at 19:12

1 Answer 1

0

An easier approach would be to and add an extra attribute to your array of objects returned from (or use an existing one - boolean that indicates what should be checked or not). Ex:

const newOriginalUserPermissionSetOutput = originalUserPermissionSetOutput.map( data => { return {...data, selected: false} })

Now you have a new array with objects +1 property (boolean) and you will need to modify your checkbox to have a handler.

So, on click of your input, you will can check against the ID of the selected row vs the one in your array.

return { ...data, selected: (event.target.data.id === data.id) ? !data.outputChecked : data.outputChecked }
or even better: return { ...data, selected: (event.target.data.id === data.id) ? target.event.checked : data.outputChecked }

and when you click your assign button, you just do

const checkedData = newOriginalUserPermissionSetOutput.filter( data => data.selected === true)

which should return an array of all objects that are selected, you can then pass that to whatever function you need to process selected rows.

You must log in to answer this question.

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