I'm trying to build custom table in LWC ,When im trying to iterate through Data from Java script.It is some how not showing as expected.
Row that starts B5(row span of 5) should have nested rows with Beta,Gamma,Delta,Epsilon,Eta
Row that starts C1 should have Theta same like row A1 with Alpha
 
Im pasting my code here 
<template>
    <table>
        <tr>
            <th class="cellstyle">Business Area</th>
            <th class="cellstyle">Project</th>
            <th class="cellstyle">Jan</th>
            <th class="cellstyle">Feb</th>
            <th class="cellstyle">Mar</th>
            <th class="cellstyle">Apr</th>
            <th class="cellstyle">May</th>
            <th class="cellstyle">Jun</th>
            <th class="cellstyle">Jul</th>
            <th class="cellstyle">Aug</th>
            <th class="cellstyle">Sep</th>
            <th class="cellstyle">Oct</th>
            <th class="cellstyle">Nov</th>
            <th class="cellstyle">Dec</th>
            <th class="cellstyle">Status</th>
            <th class="cellstyle">Total HC In-Scope</th>
        </tr>
        <template for:each={data} for:item="project">
            <tr key={project.ba}>
                    <td class="cellstyle" rowspan={project.proj.length}>{project.ba}{project.proj.length}</td>
                        <template for:each={project.proj} for:item="proj"> 
                            <td key={proj.name}>{proj.name}</td>
                            <td key={proj.name}>{proj.jan}</td>
                            <td key={proj.name}>{proj.feb}</td>
                            <td key={proj.name}>{proj.mar}</td>
                            <td key={proj.name}>{proj.apr}</td>
                            <td key={proj.name}>{proj.may}</td>
                            <td key={proj.name}>{proj.jun}</td>
                            <td key={proj.name}>{proj.jul}</td>
                            <td key={proj.name}>{proj.aug}</td>
                            <td key={proj.name}>{proj.sep}</td>
                            <td key={proj.name}>{proj.oct}</td>
                            <td key={proj.name}>{proj.nov}</td>
                            <td key={proj.name}>{proj.dec2}</td>
                            <td key={proj.name}>{proj.status}</td>
                            <td key={proj.name}>{proj.hcscope}</td>
                        </template>
            </tr>
        </template>
    </table>
</template>
 
js 
 
import { LightningElement } from 'lwc';
export default class CustomTable extends LightningElement {
    data = [
        {
            ba: 'A',
            proj: [
                {
                    name: 'Alpha',
                    dec: '1',
                    jan: '2',
                    feb: '3',
                    mar: '4',
                    apr: '',
                    may: '',
                    jun: '',
                    jul: '',
                    aug: '',
                    sep: '',
                    oct: '',
                    nov: '',
                    dec2: '',
                    status: 'Completed',
                    hcscope: '2'
                }
            ],
            size : 0
 
        },
        {
            ba: 'B',
            proj: [
                {
                    name: 'Beta',
                    dec: '',
                    jan: '',
                    feb: '',
                    mar: '',
                    apr: '',
                    may: '',
                    jun: '',
                    jul: '',
                    aug: '',
                    sep: '',
                    oct: '',
                    nov: '',
                    dec2: '',
                    status: 'Completed',
                    hcscope: '2'
                },
                {
                    name: 'Gamma',
                    dec: '',
                    jan: '',
                    feb: '',
                    mar: '',
                    apr: '',
                    may: '',
                    jun: '',
                    jul: '',
                    aug: '',
                    sep: '',
                    oct: '',
                    nov: '',
                    dec2: '',
                    status: 'Ongoing',
                    hcscope: '3'
                },
                {
                    name: 'Delta',
                    dec: '',
                    jan: '',
                    feb: '',
                    mar: '',
                    apr: '',
                    may: '',
                    jun: '',
                    jul: '',
                    aug: '',
                    sep: '',
                    oct: '',
                    nov: '',
                    dec2: '',
                    status: 'Completed',
                    hcscope: '200'
                },
                {
                    name: 'Epsilon',
                    dec: '',
                    jan: '',
                    feb: '',
                    mar: '',
                    apr: '',
                    may: '',
                    jun: '',
                    jul: '',
                    aug: '',
                    sep: '',
                    oct: '',
                    nov: '',
                    dec2: '',
                    status: 'Ongoing',
                    hcscope: '122'
                },
                {
                    name: 'Eta',
                    dec: '',
                    jan: '',
                    feb: '',
                    mar: '',
                    apr: '',
                    may: '',
                    jun: '',
                    jul: '',
                    aug: '',
                    sep: '',
                    oct: '',
                    nov: '',
                    dec2: '',
                    status: 'Terminated',
                    hcscope: '30'
                }
 
            ],
            size : 4
        },
        {
 
            ba: 'C',
            proj: [
                {
                    name: 'Theta',
                    dec: '',
                    jan: '',
                    feb: '',
                    mar: '',
                    apr: '',
                    may: '',
                    jun: '',
                    jul: '',
                    aug: '',
                    sep: '',
                    oct: '',
                    nov: '',
                    dec2: '',
                    status: 'Completed',
                    hcscope: '2'
                }
            ],
            size : 0
        },
    ]
 
}
Let me know where i'm going wrong #Salesforce Developer #LWC Development #Salesforce Developers