Suppose there is a set of data which has to be binded to a table using typescript + react.

The data format is as mentioned below

{
  aa_x : "somevalue",
  aa_y : "somevalue",
  aa_y : "somevalue",
  
  bb_x : "somevalue",
  bb_y : "somevalue",
  bb_y : "somevalue",
  
  cc_x : "somevalue",
  cc_y : "somevalue",
  cc_y : "somevalue"
}

Now I have to display it in a table where the value below underscore will be the first td element of each tr tag and the value after underscore will be the table header. Image attached below for the expected output.

enter image description here

What is the best way to create a interface? I dont want to repeat x,y and z 3 times for each of the dataset.