How to generate Pivot Table with multi-level headers from Object?

Question

I want to generate HTML table from given 2 objects, but it has too many nested headers and I can't seem to manage.

Here is what the final result should look like:

And here is the data I am given to create the table:

var columnData = [  {Col001: "1",Col002: "John Barnes",Col003: "Martha Hall",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Dustin Kensrue", ScorePct: "84.7"},
                {Col001: "2",Col002: "John Barnes",Col003: "Martha Hall",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Dustin Kensrue", ScorePct: "93.8"},
                {Col001: "2",Col002: "John Barnes",Col003: "Martha Hall",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Ninja Koto", ScorePct: "87.5"},
                {Col001: "3",Col002: "Russell Montgomery",Col003: "Judith Rodriguez",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Dustin Kensrue", ScorePct: "90.3"},
                {Col001: "4",Col002: "Russell Montgomery",Col003: "Judith Rodriguez",Col004: "Small",Col005: "Has a Drive-Thru",Col006: "Ninja Koto", ScorePct: "83.3"},
                {Col001: "5",Col002: "Russell Montgomery",Col003: "Alice Butler",Col004: "Medium",Col005: "Has a Drive-Thru",Col006: "Ed Waves", ScorePct: "90.3"},
                {Col001: "6",Col002: "Russell Montgomery",Col003: "Alice Butler",Col004: "Medium",Col005: "Has a Drive-Thru",Col006: "Ed Waves", ScorePct: "87.5"},
                {Col001: "7",Col002: "Russell Montgomery",Col003: "Stephen Peterson",Col004: "Medium",Col005: "No Drive-Thru",Col006: "Dustin Kensrue", ScorePct: "90.6"},
                {Col001: "7",Col002: "Russell Montgomery",Col003: "Stephen Peterson",Col004: "Medium",Col005: "No Drive-Thru",Col006: "Ed Waves", ScorePct: "68.8"},
                {Col001: "7",Col002: "Russell Montgomery",Col003: "Stephen Peterson",Col004: "Medium",Col005: "No Drive-Thru",Col006: "Ninja Koto", ScorePct: "83.3"},
                {Col001: "8",Col002: "John Barnes",Col003: "Stephen Peterson",Col004: "Large",Col005: "No Drive-Thru",Col006: "Ninja Koto", ScorePct: "80.0"},
                {Col001: "8",Col002: "John Barnes",Col003: "Stephen Peterson",Col004: "Large",Col005: "No Drive-Thru",Col006: "Veela Faint", ScorePct: "96.9"},
                {Col001: "9",Col002: "John Barnes",Col003: "Russell Taylor",Col004: "Large",Col005: "No Drive-Thru",Col006: "Ninja Koto", ScorePct: "88.9"},
                {Col001: "10",Col002: "Russell Montgomery",Col003: "Carl Perry",Col004: "Large",Col005: "No Drive-Thru",Col006: "Ed Waves", ScorePct: "87.5"},
                {Col001: "10",Col002: "Russell Montgomery",Col003: "Carl Perry",Col004: "Large",Col005: "No Drive-Thru",Col006: "Veela Faint", ScorePct: "93.8"}];

var rowData = [ {ColID:"0",ColValue:"101",RowID:"1"},
            {ColID:"1",ColValue:"Varna",RowID:"1"},
            {ColID:"0",ColValue:"102",RowID:"2"},
            {ColID:"1",ColValue:"Dobrich",RowID:"2"},
            {ColID:"0",ColValue:"103",RowID:"3"},
            {ColID:"1",ColValue:"Plovdiv",RowID:"3"},
            {ColID:"0",ColValue:"104",RowID:"4"},
            {ColID:"1",ColValue:"Montana",RowID:"4"},
            {ColID:"0",ColValue:"105",RowID:"5"},
            {ColID:"1",ColValue:"Sofia",RowID:"5"},
            {ColID:"0",ColValue:"106",RowID:"6"},
            {ColID:"1",ColValue:"Sliven",RowID:"6"},
            {ColID:"0",ColValue:"107",RowID:"7"},
            {ColID:"1",ColValue:"Pomorie",RowID:"7"},
            {ColID:"0",ColValue:"108",RowID:"8"},
            {ColID:"1",ColValue:"Albena",RowID:"8"},
            {ColID:"0",ColValue:"109",RowID:"9"},
            {ColID:"1",ColValue:"Bourgas",RowID:"9"},
            {ColID:"0",ColValue:"110",RowID:"10"},
            {ColID:"1",ColValue:"Bansko",RowID:"10"}];

About columnData object:

columnData. Col001 represents each row number of the table.

columnData. Col002 to columnData. Col005 are the headers of the table, where 001 is the highest level, 005 the lowest level.

columnData. ScorePct the corresponding values for each row

About rowData object:

rowData. RowID - number of the row

rowData. ColID - number of the column

rowData. ColValue - the corresponding value

Here is the solution I came up with so far:

https://jsfiddle.net/u5c21mg3/1/

I managed to build another object from this two (you will see it in the console from the jsfiddle) but i cannot print it properly. Or maybe there is better way to build the third object? Any help will be appreciated!

Answer 1

https://fiddle.jshell.net/jddz3jgz/2/

Here is my partial solution - grouping by points. I'll be glad if I was able to help but unfortunately I wasn't able to come up with a solution for the headings

UPDATE:

Full solution:

https://fiddle.jshell.net/jddz3jgz/3/