I have this below array of objects as follows

const initState = [
    { id: 1, name: "bread", quantitiy: 50 },
    { id: 2, name: "milk", quantitiy: 20 },
    { id: 3, name: "water", quantitiy: 10 }
  ];

Below is the kind of generic html data that is expected from the above initState input.

So in order to achieve this table, i have made the code this way in a react component. (Note i am just displaying the jsx here for simplicity purpose)

return (
    <table>
      <tr key={"header"}>
        {Object.keys(state[0]).map((key) => (
          <th>{key}</th>
        ))}
      </tr>
      {state.map((item) => (
        <tr key={item.id}>
          {Object.values(item).map((val) => (
            <td>{val}</td>
          ))}
        </tr>
      ))}
    </table>
    )

This works absolutely fine. I am getting stuck in a situation where in the table header names are inverted. for e.g. shown below. Please ignore the css width mismatch.

Basically, the id, name, quantity which was in the first row is now in the first column and all data display is reversed too. I tried finding online if there is anything with respect to showing data in this way but all i could find out was the one i implemented above.

Can someone please shed some light/ give insight on how to go about displaying data in this table. Should i massage the initialstate variable in some way or should i change the jsx to display differently than the one implemented above. Any help is appreciated.