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
Hi,
May I also suggest visiting our Developer Community for any coding, apex, visualforce page, trigger, custom button, API or lightning component related questions at developer.salesforce.com/forums. You will get an answer much quicker if you post there. Thank you!
Regards,
