React.js: table inside expandable rows

Question

I have an antd expandable rows table with vehicles. I want to display in the expanded row all the bookings of the specific vehicle.

This is the vehicles table with its datasource:

const vehiclesData = (
        props.vehicles.map(vehicle =>{      
            addMonths(2,vehicle.insuranceStart);

            return {
                "key":vehicle.id,
                "brand":vehicle.brand !=null ? vehicle.brand.brand : '',
                "model":vehicle.model !=null ? vehicle.model.model : '',
                "color":vehicle.color,
                "plate":vehicle.plate,
                "insuranceStart":moment(vehicle.insuranceStart).format('DD/MM/YYYY'),
                "insuranceType":vehicle.insuranceType !=null ? vehicle.insuranceType.company + ' ('+vehicle.insuranceType.duration +' Μήνες'+')' : '',
                "brand_id":vehicle.brand !=null ? vehicle.brand.id : '',
                "model_id":vehicle.model !=null ? vehicle.model.id : '',
                "insurance_id":vehicle.insuranceType !=null ? vehicle.insuranceType.id : '',
                "bookings": vehicle.bookings != null ? vehicle.bookings : ''
            }
        })
    )

<Table 
     expandedRowRender={record => <p style={{ margin: 0 }}>{record.bookings}</p>}
     dataSource={vehiclesData}
     size="small"
     bordered  
     columns = {columns}
     loading={props.vehiclesLoading!=null ? props.vehiclesLoading : false}
/>

This is what I have tried so far which obviously doesn't work. I was thinking that I can replace <p style={{ margin: 0 }}>{record.bookings}</p> with another table but I don't know how I can configure the child's table datasource in order to fetch only the bookings of the expanded row's vehicle.

Answer 1

You can pass another <Table dataSource={record.bookings} /> like you suggested to the expandableRowRender with new column names.

Here's a sample code box that I edited from the example on the AntD documentation.

https://codesandbox.io/s/compassionate-microservice-4z5gq

Hope that helps