React. js: таблица внутри расширяемых строк

Question

У меня есть antd расширяемая таблица строк с транспортными средствами. Я хочу отобразить в расширенном ряду все заказы указанного c транспортного средства.

Это таблица vehicles с источником данных:

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}
/>

Это то, что у меня есть попробовал пока что явно не работает. Я думал, что смогу заменить <p style={{ margin: 0 }}>{record.bookings}</p> другой таблицей, но я не знаю, как настроить источник данных дочерней таблицы, чтобы получать только резервные копии транспортного средства расширенной строки.

Answer 1

Вы можете передать еще один <Table dataSource={record.bookings} />, как вы предложили, expandableRowRender с новыми именами столбцов.

Вот примерное поле кода, которое я отредактировал из примера в документации AntD.

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

Надеюсь, что поможет