我想构建一个HTML组件，它将提供一个类似于pivottable的视图对我的数据，但是使用pivotarea内的自定义html元素而不是总数或计数;在下面的示例中，我将使用一串文本，但我希望它是任何HTML元素（img，div，文本等）。像HTML构造函数的数据透视类似于没有聚合来显示分组元素
我发现很难选择一个方向，编写我自己的代码来生成它（使用jQuery）或使用像Pivottable这样的库。我尝试过后者，但甚至找不到合适的方向w.r.t.定制聚合器功能。
我可以看到自己重新使用由js pivottable生成的html（使用简单的计数），然后在jQuery中追加项目，但这看起来像是一个相当冒险的解决方案，同时缺少自定义选项。这种方法的优点包括在某些时候我希望在web-ui中包含对colums的过滤/定制。
什么我找什么？给定一个JSON阵列与具有属性[Columngroup1，Columngroup2]和[Rowgroup 1，rowgroup2，rowgroup3]多行，我想它根据如下（建于的Tableau）来布置： 
在上面的例子中，[Businessline，Type，Product]是行组，[Active_or_roadmap，Roadmap Quarter]是列组。数据集的粒度更深一层，每个“产品”可以由多个子产品组成，这些子产品应放置在“活动”列（周期头）或路线图四分之一列中。这可以通过子产品15.03和15.01在视觉上被分组在相同的“行”中看出。
我面临什么困难？
- 我是否使用HTML表对于这一点，我应该去的div表示行/列，或两者的组合类？增加了复杂性：在某些时候，我希望非标题列水平滚动（如果太宽）。
- 在我想过滤掉一些行的情况下，我应该重新生成整个表还是（错误）使用可见性：隐藏？在后一种情况下：我将如何处理被部分过滤的产品组（即，子产品15.01不应该可见，子产品15.03确实需要可见）
- 我会如何在DOM元素中嵌入对象细节？即在悬停/ clickevent的情况下，我怎么知道JSON对象中的哪一行对应于被点击的名称？
请注意，我不一定要找到一个答案，完全按照我上面所说的，我主要是在寻找一个方向w.r.t.代码从结构体面和灵活的方式从JSON转到上表。
任何帮助非常感谢，我有一个codepen包含一些示例数据和一个相当差的尝试。
function load_data(callback){
$.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/997352/data_portfolioroadmap.json', function(data){
callback(data)
});
}