Create a lightning component in Aura & LWC both, in Dev org to showcase table of contact records 
 - All contacts records should be listed based on selected Account
- where user can edit the contact record by clicking button
user
i cannot create code directly within our conversation, but i can guide you through the steps to create a lightning component in aura and lwc to showcase a table of contact records associated with an account.

1. **aura component:**

first, create an aura component:

- create a folder named `contactlist` in `force-app/main/default/aura` in your salesforce dx project.
- inside the folder, create three files: `contactlist.cmp`, `contactlistcontroller.js`, and `contactlisthelper.js`.

`contactlist.cmp`:

```xml
<aura:component implements="flexipage:availableforallpagetypes,force:hasrecordid" controller="accountcontactcontroller" access="global">
    <aura:attribute name="recordid" type="id"/>
    <aura:attribute name="contacts" type="object"/>
    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
    
    <lightning:datatable
        aura:id="contacttable"
        data="{!v.contacts}"
        columns="{!c.getcolumns()}"
        keyfield="id"
        hidecheckboxcolumn="true"
        onrowselection="{!c.handlerowclick}"
        onsave="{!c.handlesave}"
        showrownumbercolumn="true"
    />
</aura:component>
```

`contactlistcontroller.js`:

```javascript
({
    doinit: function(component, event, helper) {
        helper.getcontactsbyaccount(component);
    },
    
    getcolumns: function() {
        return [
            {label: 'first name', fieldname: 'firstname', editable: true},
            {label: 'last name', fieldname: 'lastname', editable: true},
            {label: 'email', fieldname: 'email', editable: true},
            {label: 'phone', fieldname: 'phone', editable: true}
        ];
    },
    
    handlerowclick: function(component, event, helper) {
        component.set('v.recordid', event.getparam('selectedrows')[0].id);
    },
    
    handlesave: function(component, event, helper) {
        helper.savecontacts(component, event.getparam('draftvalues'));
    }
})
```

`contactlisthelper.js`:

```javascript
({
    getcontactsbyaccount: function(component) {
        var action = component.get("c.getcontactsbyaccountid");
        action.setparams({ accountid: component.get("v.recordid") });
        
        action.setcallback(this, function(response) {
            var state = response.getstate();
            if(state === "success") {
                component.set("v.contacts", response.getreturnvalue());
            }
        });
            
        $a.enqueueaction(action);
    },
    
    savecontacts: function(component, draftvalues) {
        var action = component.get("c.savecontactlist");
        action.setparams({ contacts: draftvalues });
        
        action.setcallback(this, function(response) {
            var state = response.getstate();
            if(state === "success") {
                component.find("contacttable").set("v.draftvalues", null);
                this.getcontactsbyaccount(component);
            }
        });
        
        $a.enqueueaction(action);
    }
})
```

next, create an apex controller named `accountcontactcontroller`:

```java
public with sharing class accountcontactcontroller {
    @auraenabled
    public static list<contact> getcontactsbyaccountid(id accountid) {
        return [select id, firstname, lastname, email, phone from contact where accountid = :accountid];
    }
    
    @auraenabled
    public static void savecontactlist(list<contact> contacts) {
        update contacts;
    }
}
```

2. **lwc component:**

first, create a lightning web component:

- create a folder named `lwccontactlist` in `force-app/main/default/lwc` in your salesforce dx project.
- inside the folder, create three files: `lwccontactlist.html`, `lwccontactlist.js`, and `lwccontactlist.js-meta.xml`.

`lwccontactlist.html`:

```html
<template>
    <lightning-datatable
        key-field="id"
        data={contacts}
        columns={columns}
        onrowaction={handlerowclick}
        onsave={handlesave}
        draft-values={draftvalues}
        hide-checkbox-column
        show-row-number-column
    ></lightning-datatable>
</template>
```

`lwccontactlist.js`:

```javascript
import { lightningelement, api, track, wire } from 'lwc';
import getcontactsbyaccountid from '@salesforce/apex/accountcontactcontroller.getcontactsbyaccountid';
import savecontactlist from '@salesforce/apex/accountcontactcontroller.savecontactlist';

export default class lwccontactlist extends lightningelement {
    @api recordid;
    @track contacts;
    @track draftvalues = [];

    columns = [
        {label: 'first name', fieldname: 'firstname', editable: true},

assistant
I cannot create code directly within our conversation, but I can guide you through the steps to create a lightning component in Aura and LWC to showcase a table of contact records associated with an Account.

1. **Aura Component:**

First, create an Aura Component:

- Create a folder named `contactList` in `force-app/main/default/aura` in your Salesforce DX project.
- Inside the folder, create three files: `contactList.cmp`, `contactListController.js`, and `contactListHelper.js`.

`contactList.cmp`:

```xml
<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" controller="AccountContactController" access="global">
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="contacts" type="Object"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <lightning:datatable
        aura:id="contactTable"
        data="{!v.contacts}"
        columns="{!c.getColumns()}"
        keyField="Id"
        hideCheckboxColumn="true"
        onrowselection="{!c.handleRowClick}"
        onsave="{!c.handleSave}"
        showRowNumberColumn="true"
    />
</aura:component>
```

`contactListController.js`:

```JavaScript
({
    doInit: function(component, event, helper) {
        helper.getContactsByAccount(component);
    },
    
    getColumns: function() {
        return [
            {label: 'First Name', fieldName: 'FirstName', editable: true},
            {label: 'Last Name', fieldName: 'LastName', editable: true},
            {label: 'Email', fieldName: 'Email', editable: true},
            {label: 'Phone', fieldName: 'Phone', editable: true}
        ];
    },
    
    handleRowClick: function(component, event, helper) {
        component.set('v.recordId', event.getParam('selectedRows')[0].Id);
    },
    
    handleSave: function(component, event, helper) {
        helper.saveContacts(component, event.getParam('draftValues'));
    }
})
```

`contactListHelper.js`:

```JavaScript
({
    getContactsByAccount: function(component) {
        var action = component.get("c.getContactsByAccountId");
        action.setParams({ accountId: component.get("v.recordId") });
        
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS") {
                component.set("v.contacts", response.getReturnValue());
            }
        });
            
        $A.enqueueAction(action);
    },
    
    saveContacts: function(component, draftValues) {
        var action = component.get("c.saveContactList");
        action.setParams({ contacts: draftValues });
        
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS") {
                component.find("contactTable").set("v.draftValues", null);
                this.getContactsByAccount(component);
            }
        });
        
        $A.enqueueAction(action);
    }
})
```

Next, create an Apex Controller named `AccountContactController`:

```java
public with sharing class AccountContactController {
    @AuraEnabled
    public static List<Contact> getContactsByAccountId(Id accountId) {
        return [SELECT Id, FirstName, LastName, Email, Phone FROM Contact WHERE AccountId = :accountId];
    }
    
    @AuraEnabled
    public static void saveContactList(List<Contact> contacts) {
        update contacts;
    }
}
```

2. **LWC Component:**

First, create a Lightning Web Component:

- Create a folder named `lwcContactList` in `force-app/main/default/lwc` in your Salesforce DX project.
- Inside the folder, create three files: `lwcContactList.html`, `lwcContactList.js`, and `lwcContactList.js-meta.xml`.

`lwcContactList.html`:

```html
<template>
    <lightning-datatable
        key-field="Id"
        data={contacts}
        columns={columns}
        onrowaction={handleRowClick}
        onsave={handleSave}
        draft-values={draftValues}
        hide-checkbox-column
        show-row-number-column
    ></lightning-datatable>
</template>
```

`lwcContactList.js`:

```JavaScript
import { LightningElement, api, track, wire } from 'lwc';
import getContactsByAccountId from '@salesforce/apex/AccountContactController.getContactsByAccountId';
import saveContactList from '@salesforce/apex/AccountContactController.saveContactList';

export default class LwcContactList extends LightningElement {
    @api recordId;
    @track contacts;
    @track draftValues = [];

    columns = [
        {label: 'First Name', fieldName: 'FirstName', editable: true},

assistant