How can I get my table to display grouped data properly?
You needed to two level of nesting group program then company and modify the template a little bit as well, added a property companies in every program
<div id="app"> <table border="1"> <tr> <td>Program </td> <td></td> <td>Company</td> <td>Expected Fund</td> <td>Fund on IKNS</td> <td>Total Count</td> </tr> <template v-for="(value) in companiesSummary"> <tr style="text-align:left"> <th colspan="6">{{value.program}}</th> </tr> <template v-for="(value) in value.companies"> <tr> <td></td> <td></td> <td>{{value.company}}</td> <td>{{value.totalCount}}</td> <td>{{value.expectedFunding}}</td> <td>{{value.fundedOnIKNS}}</td> </tr> </template> </template></div>The JS
new Vue({ el: "#app", data: { test: 'hello', myData: myData, companiesSummary: {}, myObjData: '' }, created: function () { this.buildSummary(); }, methods: { groupData: function (d, mode) { return _.groupBy(d, mode); }, buildSummary: function () { let programGroup = this.groupData(this.myData, 'program'); let programCompanyGroup = null; let companies = []; let summary = {}; for (const program of Object.keys(programGroup)) { programCompanyGroup = this.groupData(programGroup[program], 'company'); for (const company of Object.keys(programCompanyGroup)) { summary = { program, company, totalCount: 0, expectedFunding: 0, fundedOnIKNS: 0 }; for (const data of programCompanyGroup[company]) { summary.totalCount += data.TotalCount; summary.expectedFunding += data.expectedFunding === "Yes"; summary.fundedOnIKNS += data.fundedOnIKNS === "Yes"; } companies.push(summary); } this.companiesSummary[program] = { companies, program }; companies = []; } console.table(this.companiesSummary) } }})Updated Pen https://codepen.io/joyblanks/pen/oNvdgqL
You can use reduce() method to group the data by program and company.
var myData = [{program: "DARC",company: "company E",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "BBO",company: "company B",TotalCount: 2,expectedFunding: "Expected",fundedOnIKNS: "Yes",billingToIKNS: "IKNS",IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "BBRC",company: "company D",TotalCount: 2,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: "IKNS",IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "CCTG",company: "company C",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "C2",company: "company A",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "ERI",company: "company C",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "IIRC",company: "company F",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "BBO",company: "company G",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "DARC",company: "company E",TotalCount: 3,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "BBO",company: "company B",TotalCount: 3,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "BBRC",company: "company A",TotalCount: 3,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "CCTG",company: "company C",TotalCount: 3,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: "IKNS",IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "C2",company: "company A",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: "IKNS",IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "ERI",company: "company E",TotalCount: 1,expectedFunding: "Expected",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "IIRC",company: "company F",TotalCount: 1,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "BBO",company: "company G",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: "IKNS",IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23}, {program: "DARC",company: "company D",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: "IKNS",IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "BBO",company: "company B",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: "IKNS",IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "BBRC",company: "company A",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "CCTG",company: "company A",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "C2",company: "company D",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: "IKNS",IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "ERI",company: "company C",TotalCount: 3,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: "IKNS",IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "IIRC",company: "company A",TotalCount: 3,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: "IKNS",IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "BBO",company: "company C",TotalCount: 3,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "ERI",company: "company E",TotalCount: 3,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "DARC",company: "company D",TotalCount: 3,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23},{program: "BBO",company: "company B",TotalCount: 5,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "BBRC",company: "company B",TotalCount: 5,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "CCTG",company: "company A",TotalCount: 5,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "C2",company: "company B",TotalCount: 5,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23},{program: "ERI",company: "company C",TotalCount: 5,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23},{program: "IIRC",company: "company F",TotalCount: 5,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23},{program: "BBO",company: "company G",TotalCount: 5,expectedFunding: "No",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "DARC",company: "company D",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23},{program: "BBO",company: "company B",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23},{program: "BBRC",company: "company C",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "CCTG",company: "company B",TotalCount: 2,expectedFunding: "Yes",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "C2",company: "company B",TotalCount: 2,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "ERI",company: "company E",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "IIRC",company: "company F",TotalCount: 1,expectedFunding: "Yes",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "BBO",company: "company G",TotalCount: 1,expectedFunding: "Yes",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "DARC",company: "company C",TotalCount: 1,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "BBO",company: "company B",TotalCount: 4,expectedFunding: "Yes",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "BBRC",company: "company C",TotalCount: 4,expectedFunding: "No",fundedOnIKNS: "No",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "CCTG",company: "company D",TotalCount: 4,expectedFunding: "Expected",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "C2",company: "company B",TotalCount: 4,expectedFunding: "Yes",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 21},{program: "ERI",company: "company B",TotalCount: 4,expectedFunding: "No",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: 34,FilledDeparting: 23},{program: "IIRC",company: "company A",TotalCount: 4,expectedFunding: "Yes",fundedOnIKNS: "Yes",billingToIKNS: 95,IKNSSWO: 23,AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23},{program: "BBO",company: "company C",TotalCount: 4,expectedFunding: "No",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 23},{program: "ERI",company: "company E",TotalCount: 1,expectedFunding: "Expected",fundedOnIKNS: 'Yes',billingToIKNS: 95,IKNSSWO: "OVER",AcceptedTotal: 45,VacanRecruiting: "RECRUIT",FilledDeparting: 232}];let result = myData.reduce((arr, currentValue) => { let item = arr.find(item => item.program === currentValue.program && item.company === currentValue.company); if (item) { item.expectedFunding += (currentValue.expectedFunding === "Yes" ? 1 : 0); item.fundedOnIKNS += (currentValue.fundedOnIKNS === "Yes" ? 1 : 0); item.TotalCount += currentValue.TotalCount; } else { arr.push({ "program": currentValue.program, "company": currentValue.company, "TotalCount": currentValue.TotalCount, "expectedFunding": (currentValue.expectedFunding === "Yes" ? 1 : 0), "fundedOnIKNS": (currentValue.fundedOnIKNS === "Yes" ? 1 : 0), }); } return arr;}, []);var summary = result.reduce((obj, currentValue) => { var program = currentValue.program; if(!obj.hasOwnProperty(program)) { obj[program] = []; } delete currentValue.program; obj[program].push(currentValue); return obj;}, {});console.log(summary);