javascript - 给定来自 API 的 JSON 数据，在 React 中动态呈现数据网格/表格

Question

我有从 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() 来遍历数据并给我一个表格，其中包含标题“样式”、“颜色”、“大小”和“数量”以及下面相应的数据行。

我想做的是将渲染转换成这个 table format因为它更易于阅读，而且一个很大的优点是也可以编辑单元格(例如，数据与状态相关联)。具体来说，尺寸位于列标题中。我如何使用普通的 react/javascript 逻辑来做到这一点，或者更好的是，是否有一个流行的 React 包具有这种功能？目前正在研究 react-table 和 react-virtualized，但对这些包没有足够的经验来做一些复杂的事情。一些代码将不胜感激。

Answer 1

这是我创建的表格的图像。希望您正在寻找这个

这是项目的链接

https://github.com/AdnanShah/ReactJS-KretaHub-