I am relatively new to LWCs, so any help would be appreciated! :)
The project that I'm working on is a dictionary that pulls together terms and their definitions from my company's Salesforce org. Here's an example of a similar concept: https://docs.kumu.io/overview/collaboration.html  On the left, I have a sidebar table of contents which helps users navigate to the particular defintion they're looking for, which is displayed. 

I've created three Custom Objects Dictionary_Header__c, Dictionary_Section__c, and Dictionary_Term__c. Terms belong to a corresponding section, and each section belongs to a corresponding header (an example to illustrate: the structure of the dictionary is that Fruit would be a header, Citrus Fruit would be a section, and Lemon, Grapefruit, and Orange would all be terms underneath that section). 

Currently I am using Visual Studio Code to create the LWC. My JavaScript file looks like this: 

import { LightningElement, wire } from 'lwc';
 import getHeaderData from '@salesforce/apex/RetrieveDictionaryData.getHeaderData';
 import getSectionData from '@salesforce/apex/RetrieveDictionaryData.getSectionData';
 import getTermsData from '@salesforce/apex/RetrieveDictionaryData.getTermsData';


export default class Dictionary extends LightningElement {
 
  @wire(getHeaderData) header;
  @wire(getSectionData) section;
  @wire(getTermsData) term;

 }

My HTML file looks like this:

<template>
    <div id="top" class="slds-grid slds-wrap" style="padding: 10px;">
        <template if:true={header.data}>
            <div class="site-sticky-navbar site-sticky-navbar_docblock slds-col slds-large-size--2-of-12"
                style="padding: 10px;">
                <nav class="slds-nav-vertical" aria-label="Sub page">
                    <div class="slds-form-element slds-p-horizontal_large">
                        <label class="slds-form-element__label slds-assistive-text" for="input-id-01">Filter
                            navigation
                            items</label>
                        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left">
                            <span class="slds-icon_container slds-icon-utility-search">
                                <svg class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default"
                                    aria-hidden="true">
                                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
                                </svg>
                            </span>
                            <input type="search" id="input-id-01" placeholder="Type to search" class="slds-input" />
                        </div>
                    </div>

                    <div class="slds-nav-vertical__section">
                        <template for:each={header.data} for:item="h">
[ This is where I want the nested looping of headers, section titles, and dictionary terms ]
</nav>
 </div>
        </template>
    </div>
</template>

My Apex class looks like this:

public with sharing class RetrieveDictionaryData {
    @AuraEnabled(cacheable=true)
    public static List<Dictionary_Header__c> getHeaderData(){
         return [SELECT Id, Name FROM Dictionary_Header__c];   
    }
    @AuraEnabled(cacheable=true)
    public static List<Dictionary_Section__c> getSectionData(){
         return [SELECT Id, Name, Related_Dictionary_Header__c FROM Dictionary_Section__c];   
    }
    @AuraEnabled(cacheable=true)
    public static List<Dictionary_Term__c> getTermsData(){
         return [SELECT Id, Name, Related_Dictionary_Section__c, Definition__c FROM Dictionary_Term__c];   
    }
}

And my Visualforce page looks like this:

<apex:page showHeader="false">
    <apex:includeLightning />
    <div id="LightningComponentid" />    
    <script>
        $Lightning.use("c:MainDictionary", function() {
            $Lightning.createComponent("c:dictionary",
          { 
          },
          "LightningComponentid",
          function(cmp) {
             console.log('LWC Componenet added in VF page');
          });
    });
    </script>
</apex:page>

I'm able to succesfully bring the Custom Object records into Visual Studio Code, and I can display the headers so far. But now I want to correctly display all of the header, section, and term records. What I am confused about is how to use <template> in such a way that the correct section titles display under each header, and the correct terms display under each section title. Right now, the template for:each loops through and displays the headers okay, but I don't know how to go from there without having duplicates or having the wrong sections appear under the wrong headers. 

Does anyone know how to accomplish this? Thank you for your help! :)

I have created a lightning component
I am displaying my data in a Lightning data table format
Now, I want to create 3 tables to display these 3 records seperately.
i.e I want a table to show the details of Service Name A , And similary for Service Name B & C 
At the end of all the three tables I want to show the Sum of Total Cost & Effort.

How can I create 3 data table in a single component to display  3 records seperately

Apex Controller:

public with sharing class ASDcompanyapex
{
    @AuraEnabled
    public static List<Service_Line__c> getServiceLine(string recordId) 
    {
        List<Service_Line__c> ServiceLineList =[Select Name, Status__c, Line_Type__c, Total_Effort_Taken__c,Total_Line_Cost__c  from Service_Line__c where Service_Request__c =: recordId];
        system.debug(ServiceLineList);
            
            return ServiceLineList;
            
        
    }
}

Component:

<aura:component controller="ASDcompanyapex"  implements="force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes" access="global">
    
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute type="Service_Line__c" name="ServiceLineList"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:attribute name="data" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.servicelist}"/>
    
    
    <lightning:datatable data="{! v.data }"
                         columns="{! v.mycolumns }"
                         keyField="id"
                         hideCheckboxColumn="true"/>

</aura:component>

Controller:

({
    servicelist : function(component, event, helper) {
        var rid = component.get("v.recordId");
        
        helper.fetchServiceLineHelper(component, event, helper);
    }
})

Helper:

({
    fetchServiceLineHelper : function(component, event, helper) {
        debugger;
        var action = component.get("c.getServiceLine");
        var rec = component.get("v.recordId");
        action.setParams({
            "recordId": rec
        });
        action.setCallback(this, function(response){
            debugger;
            var state = response.getState();
            
            debugger;
            if (state === "SUCCESS") {
                
                component.set('v.mycolumns', [
                    {label: 'Service Line Name', fieldName: 'Name'},
                    {label: 'Status', fieldName: 'Status__c'},
                    {label: 'Line Type', fieldName: 'Line_Type__c'},
                    {label: 'Total Effort', fieldName: 'Total_Effort_Taken__c', type: 'number', cellAttributes: { alignment: 'left' }},
                    {label: 'Total Line Cost', fieldName: 'Total_Line_Cost__c', type: 'currency'},
                    
                ]);
                    
                    debugger;
                    var res = response.getReturnValue();
                    component.set("v.data" , res);
                    debugger;
                    
                    
                    }
                    
                    
                    });
                    $A.enqueueAction(action);
                    }
                    })