I have the below data containing list of roomtypes.Each room type can have multiple rates and I want to show it in a data table but I am only able to show the roomtypes values.

The table should have three colums ie. Room Type, Availability, Rate
Under the Rate column i want to create another datatable that can show Rate type, Availability,Price.

The no. of rates available for a particular roomtype is not static.Hence I need to create a dynamic table.

LWC template:
       
 <div style="height: 125px;">
                <lightning-datatable
                        key-field="id"
                        data={roomTypeList}
                        show-row-number-column
                        row-number-offset={rowOffset}
                        hide-checkbox-column
                        columns={columnList}>
                </lightning-datatable>
            </div>

.js file:

const columnList = [
    {label: 'Room Type', fieldName: 'title'},
    {label: 'Availability', fieldName: 'availableroom'},
    {label: 'Rates', fieldName: 'rates'}
];

searchroom({hotelid:this.hotelid,cindate:this.checkindate,coutdate:this.checkoutdate})
            .then(result =>{
                console.log(result);
                console.log('============result '+JSON.stringify(result));
                this.roomTypeList = result;
            })

result value::::::

[
  {
    "amenities": "",
    "availableroom": "10",
    "basepax": "1",
    "code": "",
    "description": "",
    "id": "9NmOCdPNMaLNP3GfyPqvHjf9SKCN0hqQ-c7wbcxlEcw|",
    "imgs": "",
    "key": "dj9KhRF8",
    "maxpax": "4",
    "minRate": 20000,
    "minrooms": "1",
    "rates": [
      {
        "availableroom": 10,
        "bookingpolicy": {},
        "code": "WEBR",
        "description": "",
        "id": "NdUREH2JQTevHTZ9_ZW65GiExRg74f8apswzYjZhtxPbMBkS7OrVOFPn0fwHhIRAYQ3uohMBoXnuXeuUVr2UrjGT3lfAxzljWw5RUcRCp5iItBTe621xN1JzSwBOibRy",
        "key": "5HU05MyBuHGaeTy1cRo1nloSsVVqLHIzWN0fHDtP8mYGPUNz1QhwM6AdXoLUsmwwbp3zOJCUgk-ywG6A_5Vwhg||",
        "price": 20000,
        "tax": 0,
        "title": "Rack Rate"
      }
    ],
    "title": "Royal Suite"
  },
  {
    "amenities": "",
    "availableroom": "20",
    "basepax": "1",
    "code": "",
    "description": "",
    "id": "rc0JMoJXVfwRHMOi_ZQfxI48JldJw_6RAA7R7jQk1BM|",
    "imgs": "",
    "key": "dj9KhRF9",
    "maxpax": "3",
    "minRate": 16000,
    "minrooms": "1",
    "rates": [
      {
        "availableroom": 20,
        "bookingpolicy": {},
        "code": "WEBR",
        "description": "",
        "id": "NdUREH2JQTevHTZ9_ZW65GiExRg74f8apswzYjZhtxO-AFxNrM24ICxMqO0qvJqGNSrXWG9mU388E3sc4OHBKdI9hKXEbCOCha7Fzza48S-ZNuqpqRaw4vR6Z0bYvWLC",
        "key": "pQrtjHQe5E4YQ_oeQpNjx1svxl49CdAPEqKWMu-DVfcv597rkMU8rM2lppwyuflkoUYtIEgoUAOYTfnLB68B7g||",
        "price": 16000,
        "tax": 0,
        "title": "Rack Rate"
      }
    ],
    "title": "Orchid Suites"
  },
  {
    "amenities": "",
    "availableroom": "30",
    "basepax": "1",
    "code": "",
    "description": "",
    "id": "TMP70hSIljPEpF2-jb8X9HqS-O2fh5UVYujncCzbuJk|",
    "imgs": "",
    "key": "dj9KhRF-",
    "maxpax": "3",
    "minRate": 18000,
    "minrooms": "1",
    "rates": [
      {
        "availableroom": 30,
        "bookingpolicy": {},
        "code": "WEBR",
        "description": "",
        "id": "NdUREH2JQTevHTZ9_ZW65GiExRg74f8apswzYjZhtxOwpZAi2vw-pja70Y_xfbt_pCbHTVwB-5fFymmgGn8QHFc5ntLIGKBiK4kkFl03n7i24p-jc5bhzDMuvkGZns3f",
        "key": "GZ43Mq5wilimC2MzFwLVGzOzqH-jMaUdhpxc5AMgmcZ2fbUty0TjojyookC_ekLS9tLdKfVp1dtF5AolbVjHJg||",
        "price": 18000,
        "tax": 0,
        "title": "Rack Rate"
      }
    ],
    "title": "Royal Club"
  },
  {
    "amenities": "",
    "availableroom": "40",
    "basepax": "1",
    "code": "",
    "description": "",
    "id": "-scpOnCRpziNx3qJB7UUfu2u_gk35CKkEmv01KA3E7Q|",
    "imgs": "",
    "key": "dj9KhRF_",
    "maxpax": "3",
    "minRate": 14000,
    "minrooms": "1",
    "rates": [
      {
        "availableroom": 40,
        "bookingpolicy": {},
        "code": "WEBR",
        "description": "",
        "id": "NdUREH2JQTevHTZ9_ZW65GiExRg74f8apswzYjZhtxNo_zQyD7fjREJLqAkvBVs2VNSNwZX-Ul0S7LT9YT7i-M1sSFGijTqwVjfE1X4TAhMu43Rsquc0WvuM43Wvwqdg",
        "key": "HLUcuJUxG7VvJeTcJJLCMtpaUqWyryMRxKkDqevIdJJ4QXCqKtiqU1e9glle8uHB3cgfJrUIF6O3fCiNr6n5-Q||",
        "price": 14000,
        "tax": 0,
        "title": "Rack Rate"
      }
    ],
    "title": "Luxury"
  }
]