title: Dynamic rendering of a datagrid/table in React given JSON data from API
body: <p>I have this json data that is gotten from an API end point.</p>
  
  <pre><code>        [{
              "id": 1,
              "style": "A",
              "color": "black",
              "size": "30",
              "quantity": "122.00"
          },
          {
              "id": 2,
              "style": "B",
              "color": "maroon",
              "size": "24",
              "quantity": "48.00"
          },...]
  </code></pre>
  
  <p>I know I can use array.map() to loop over the data and give me a table with headers 'style','color','size', and 'quantity' with corresponding data rows below. </p>
  
  <p>What I want to do is transform the rendering into this <a href="https://i.stack.imgur.com/zRdEa.png" rel="nofollow noreferrer">table format</a> as it is more human-readable and a big plus would be to have the cells editable also (e.g. data ties back to state). Specifically, the sizes are in the column headers. How can I do this using either plain react/javascript logic or even better is there a popular React package that has this capability? Currently looking at react-table and react-virtualized but don't have enough experience on these packages to do something complex. Some code would be highly appreciated.</p>