Javascript 接下来如何在列React引导表中创建单独的数据字段

目前我正在使用reactjs中的ReactBootstrapTable开发表，并成功创建了一个。这是我的成功作品

红色颜色是数据字段，黑色颜色是文本，此列的代码是

    colData=[{ dataField: 'id', text: 'ID', hidden: true },
    { dataField: 'shop_name', text: 'Shops ' },
    { dataField: 'dy_30', text: '30%' },
    { dataField: 'dy_20', text: '20%' },
    { dataField: 'dy_10', text: '10%' }]

我的问题是，我想让另一张桌子看起来像这样

---

我不知道如何构造列数据结构？第一个表数据字段在一列中都是相同的，但在第二列中，数据字段不同。如何实现这一点，我想知道列和行的数据结构。或者有没有更简单的方法？谢谢..

与其发布代码片段，不如将整个代码（可能放在codepen上，或者就在这里的堆栈上）放在一起，这样可以帮助回答者更快地给出答案。