Javascript API中给定JSON数据中datagrid/表的动态呈现

我有从API端点获取的json数据

        [{
            "id": 1,
            "style": "A",
            "color": "black",
            "size": "30",
            "quantity": "122.00"
        },
        {
            "id": 2,
            "style": "B",
            "color": "maroon",
            "size": "24",
            "quantity": "48.00"
        },...]

我知道我可以使用array.map（）循环遍历数据，并给我一个带有标题“style”、“color”、“size”和“quantity”的表，下面是相应的数据行

---

我想做的是将渲染转换成这种方式，因为它更易于人类阅读，而且一个大的优点是单元格也可以编辑（例如，数据与状态的关联）。具体来说，大小在列标题中。我如何使用普通的react/javascript逻辑或更好的方法来实现这一点？是否有一个流行的react包具有此功能？目前正在查看react表和react虚拟化，但在这些软件包方面没有足够的经验来完成一些复杂的工作。非常感谢您提供一些代码。

这是我创建的表的图像。希望您正在查找此文件

这是该项目的链接

---

最好使用react-datagrid@Harikrishnan谢谢你的建议。一些代码示例将不胜感激。我正在阅读文档，但除了创建一个普通的表之外，我不确定如何像问题中那样转换渲染。我认为文档中有足够的示例，如果您在实现方面遇到了困难，那么在查看react表时，请针对您面临的问题提出另一个问题。这可能对你有用@谢谢你的链接。考虑使用“数据透视和聚合”表，而不是图片中的格式。我得想一想如何把东西打印得漂亮。您是否知道表中是否可能有pivot，并且同时可以编辑条目？