title: React - render data in a table
body: <p>I have an object in state as per the following:</p>
  
  <pre><code>{
  "data": {
      "available": {
          "profileOne": {
              "a": 14,
              "b": 14,
              "c": 0,
              "d": 0,
              "e": 18
          },
          "profileTwo": {
              "a": 13,
              "b": 9,
              "c": 0,
              "d": 0,
              "e": 18
          },
          "profileThree": {
              "a": 12,
              "b": 12,
              "c": 0,
              "d": 0,
              "e": 14
          },
          "profileFour": {
              "a": 3,
              "b": 3,
              "c": 0,
              "d": 0,
              "e": 5
          },
          "profileFive": {
              "a": 6,
              "b": 3,
              "c": 0,
              "d": 0,
              "e": 11
          }
      },
      "isFetching": false
  }
  </code></pre>
  
  <p>I need to use the data as per the following sample image provided below:</p>
  
  <p><a href="https://i.stack.imgur.com/vfWdT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vfWdT.png" alt="sample image"></a></p>
  
  <p>I understand that in order to be able to map over these I will need to convert it to an array, that's pretty much where I'm at.</p>
  
  <p>Does anybody have a solution to this? </p>