LWC Exchange – Scenario 7

Add new row in Lightning Datable from another Lightning Web Component on Button Click

This scenario has been designed for developer who possess Intermediate skills in Lightning Web Component.

Problem Statement

• Create a Lightning Web Component named dataFiller
• The html file of the dataFiller component should have three lightning-input
  • Name
  • Phone
  • Country
• dataFiller should also have a lightning-button with label Pass Data
• Create a another Lightning Web Component named personTable
  • The html file of the personTable component should have a lightning datatable
  • there should be three column of the table
    • Name
    • Phone
    • Country
• Create a Lightning App Page named Dynamic Table Page
• Place dataFiller and personTable component on the Dynamic Table Page
• Whenever users click the pass data button in dataFiller component, a new row should been added in data table of personTable component
• The newly added row should have the same value user entered in lightning-input fields in dataFiller component

Wireframe

Do you need help?

Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.

Do not forget to paste your code in comment. It would help others in case they get stuck. Also check out https://salesforcediaries.com/category/lightning-web-component/ to learn more on LWC.