How to generate a table in ant?

Question

React

[
  {
    "id": 1,
    "city": "city-1",
    "datetime": "2021-04-27T13:00:00+06:00",
    "temperature": 295.15,
    "pressure": 1017,
    "humidity": 20,
    "description": "ясно",
    "icon": "01d",
    "wind_speed": 8.0,
    "wind_direction": 210
  },
  {
    "id": 2,
    "city": "city-2",
    "datetime": "2021-04-27T13:00:00+06:00",
    "temperature": 297.15,
    "pressure": 1019,
    "humidity": 31,
    "description": "облачно с прояснениями",
    "icon": "04d",
    "wind_speed": 1.0,
    "wind_direction": 0
  },
  {
    "id": 3,
    "city": "city-1",
    "datetime": "2021-04-27T16:00:00+06:00",
    "temperature": 297.15,
    "pressure": 1014,
    "humidity": 17,
    "description": "переменная облачность",
    "icon": "03d",
    "wind_speed": 11.0,
    "wind_direction": 200
  },
  {
    "id": 4,
    "city": "city-2",
    "datetime": "2021-04-27T16:00:00+06:00",
    "temperature": 300.15,
    "pressure": 1017,
    "humidity": 22,
    "description": "облачно с прояснениями",
    "icon": "04d",
    "wind_speed": 6.0,
    "wind_direction": 30
  }
]

I get such a response from the server, and I need to show the data as in the picture. I use ant-design.
1. It is necessary to group the cities by name
2. To make the header dynamic
3. And the value matches the header, like -14 degrees was at 9:00, etc.

already confused in the implementation

Answer 1

Generated a header, now your task is to prepare data for the table based on the data you receive from the server.
If the sandbox did not load, then the table is here