public class RadioAccRelatedConC {
    
    @AuraEnabled
    public static List<Account> getAccounts() {
        List<Account> accList=new List<Account>();
        accList=[SELECT Id, Name, Phone FROM Account LIMIT 20];
        return accList;
    }
    
    @AuraEnabled
    public static List<Contact> getCon(List<String> accId) {
        return [SELECT Id, Name, Phone FROM Contact WHERE AccountId=:accId];
    }
}

<aura:component controller="RadioAccRelatedConC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <!-- attributes -->
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="data1" type="Object"/>
    <aura:attribute name="columns1" type="List"/>
    <aura:attribute name="selectedRowsCount" type="Integer" default="0"/>
    <aura:attribute name="maxRowSelection" type="Integer" default="5"/>
    <aura:attribute name="isButtonDisabled" type="Boolean" default="true" access="PRIVATE"/>
    
    <!-- handlers-->
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <!-- the container element determine the height of the datatable -->
    <div style="height: 300px">
        <lightning:datatable
                             columns="{! v.columns }"
                             data="{! v.data }"
                             keyField="id"
                             maxRowSelection="{! v.maxRowSelection }"
                             onrowselection="{! c.updateSelectedText }"/>
    </div>
    
    <br/><br/>
    
    <div style="height: 300px">
        <lightning:datatable
                             columns="{! v.columns1 }"
                             data="{! v.data1 }"
                             keyField="id"
                             hideCheckboxColumn="true"/>
    </div>
</aura:component>

({
    init: function (component, event, helper) {
        component.set('v.columns', [
            {label: 'Account Name', fieldName: 'Name', editable: true, type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'phone'}
        ]);
        
        component.set('v.columns1', [
            {label: 'Contact Name', fieldName: 'Name', editable: true, type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'phone'}
        ]);
        
        var action=component.get('c.getAccounts');
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var rows = response.getReturnValue();
                component.set("v.data", rows);
            }
        });
        $A.enqueueAction(action);    
        
        component.set('v.maxRowSelection', 1);
        component.set('v.isButtonDisabled', true);
    },
    
    updateSelectedText: function (cmp, event) {
        
        var selectedRows = event.getParam('selectedRows');
        var aId = [];
        for (var i = 0; i < selectedRows.length; i++){
            aId.push(selectedRows[i].Id);
        }
        
        var action=cmp.get('c.getCon');
        action.setParams({accId : aId});
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var rows1 = response.getReturnValue();
                console.log('rows1 ->> ' + rows1);
                cmp.set("v.data1", rows1);
            }
        });
        $A.enqueueAction(action);    
    },
})