Lightning Web Component - How to use the Lightning "Data Table" with "Input" elements

Hello Guys, hope you are doing well.

We might come across the situation where we need to show input fields along with lightning data table. So here we are going to see an example of how to achieve that in Lightning Web Component.

For simplicity here, I am taking an example of marking attendance for Students.

So Lets start the implementation.

First, consider adding one input field on your HTML page in LWC.

   <lightning-input type="date" onchange={datechangeevent} label="Select Date" value={selecteddate} required>  
   </lightning-input>  

Then add the lightning data table.

   <lightning-datatable data={students} columns={columns} key-field="Id" onrowselection={getSelectedName}>  
   </lightning-datatable>  

Add one button This button will be called to save the selected records in the data table along with the selected date in the date picker. showConfirmation action will just show the popup to confirm the action. Once the user hits the Yes on popup, addAttendance method will be called.

      <lightning-button label="Save" variant="brand" onclick={showConfirmation} class="slds-m-top_medium">  
      </lightning-button>  

Here are the details of the js side

This change event will capture the changed date in the date-picker into selecteddate variable.

   @track selecteddate;  
  datechangeevent(event) {  
   this.selecteddate = event.target.value;  
  }  

The following code will fetch the default data to be shown on the data table.

 @track students;  
 getStudents(data) {  
 this.selecteddate = null;  
 getContacts({  
 opportunityId: this.opportunityId  
 })  
 .then(result => {  
 this.students = result;  
 })  
 .catch(error => {  
 this.error = error;  
 });  
 }  

Following code will be used to call the controller method and pass on the selected date and records in the data table.

  addAttendance() {  
   this.popup = false;  
   fireEvent(this.pageRef, "loadingAction", true);  
   console.log("this.selecteddate==>" + this.selecteddate);  
   console.log("this.selectedContacts==>" + this.selectedContacts);  
   createNewAttendanceDetails({  
    attendanceDate: this.selecteddate,  
    opportunityId: this.opportunityId,  
    contactList: this.selectedContacts  
   })  
    .then(result => {  
     console.log(result);  
     this.dispatchEvent(  
      new ShowToastEvent({  
       title: "Success",  
       message: "Attendance Created Successfully.",  
       variant: "success"  
      })  
     );  
    })  
    .catch(error => {  
     this.error = error;  
    });  
  }  

Following Apex controller method will be accepting the parameters sent by java-script lwc.

   public static Boolean createNewAttendanceDetails(Date attendanceDate, String opportunityId, List<String> contactList){  
      //We have all the data available in this function, we can take an action based on our requirements  
     return true;  
   }  

So that's it, we are ready with our sample use case.

I hope you liked the post and it helped. Please let me know your suggestions and feedback. 

Thank you so much for visiting.