add configurable buttons #11

Author: mickaelgudin

force-app/main/default/lwc/lwcRelatedList/lwcRelatedList.html

@@ -1,8 +1,41 @@
 <template>
   <!-- Main content -->
   <lightning-card variant="Narrow" title={titleFormatted} icon-name={iconName}>
-    <lightning-button label="New" title="Non-primary action" onclick={newRecord} class="slds-m-left_x-small"
+    <!--default button create -->
+    <template if:false={actionButtonsListNotEmpty}>
+      <lightning-button label="New" title="Non-primary action" onclick={newRecord} class="slds-m-left_x-small"
       slot="actions"></lightning-button>
+    </template>
+
+    <!-- custom buttons for list -->
+    <template if:true={actionButtonsListNotEmpty}>
+      <template for:each={actionButtonsList} for:item="actionButton" for:index="index">
+          <lightning-button if:true={actionButton.callApex}
+                            key={actionButton.label} 
+                            label={actionButton.label} 
+                            title={actionButton.label}
+                            variant={actionButton.variant} 
+                            onclick={callApexFromButton}
+                            class="slds-m-left_x-small"
+                            slot="actions"
+                            >
+          </lightning-button>
+
+          <lightning-button if:false={actionButton.callApex}
+                            data-index={index}
+                            key={actionButton.label} 
+                            label={actionButton.label} 
+                            title={actionButton.label}
+                            variant={actionButton.variant} 
+                            onclick={fireEventFromButton}
+                            class="slds-m-left_x-small"
+                            slot="actions"
+                            >
+          </lightning-button>
+
+      </template>
+    </template>
+    
     <!-- Error block -->
     <template if:true={error}>
       <div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
@@ -12,9 +45,26 @@
     </template>
     <!-- Data table  -->
     <template if:true={data}>
-      <lightning-datatable key-field="id" data={data} columns={columns} onrowaction={handleRowAction}
+      <!-- DATATALBE WITHOUT CHECKBOXES -->
+      <lightning-datatable 
+        if:false={showCheckboxes}
+        key-field="id" 
+        data={data} 
+        columns={columns} 
+        onrowaction={handleRowAction}
         hide-checkbox-column>
       </lightning-datatable>
+
+      <!-- DATATABLE WITH CHECKBOXES -->
+      <lightning-datatable 
+        if:true={showCheckboxes}
+        key-field="id" 
+        data={data} 
+        columns={columns} 
+        onrowaction={handleRowSelection}>
+      >
+      </lightning-datatable>
+
     </template>
     <!-- Pagination -->
     <div slot="footer" style="text-align: right;">

force-app/main/default/lwc/lwcRelatedList/lwcRelatedList.js

@@ -29,12 +29,15 @@ export default class LightningDatatable extends NavigationMixin(
   @api whereClause;
   @api limit = 10;
   @api isCounterDisplayed;
+  @api actionButtonsList; //buttons for the list
+  @api showCheckboxes;
   // Private Property
   @track data;
   @track soql;
   @track offSet = 0;
   @track totalRows = 0;
   @track error;
+  @track selectedRows;
 
   // Do init funtion
   connectedCallback() {
@@ -263,4 +266,31 @@ export default class LightningDatatable extends NavigationMixin(
   get titleFormatted() {
     return (this.isCounterDisplayed) ? this.title + ` (${this.totalRows})` : this.title;
   }
+
+  callApexFromButton(event) {
+    //add logic to call apex method based on button label (event.target.label)
+  }
+
+  fireEventFromButton(event) {
+    event.preventDefault();
+    console.log('fireEventFromButton');
+
+    const buttonEvent = new CustomEvent(
+      'action'+event.target.dataset.index, 
+      { }
+    );
+
+    // Dispatches the event.
+    this.dispatchEvent(buttonEvent);
+  }
+
+  handleRowSelection(event){
+    this.selectedRows = event.detail.selectedRows;
+    console.log('this.selectedRows ', JSON.stringify(this.selectedRows) );
+  }
+
+  get actionButtonsListNotEmpty() {
+    console.log('this.actionButtonsList ', this.actionButtonsList);
+    return this.actionButtonsList && this.actionButtonsList.length > 0;
+  }
 }