Cómo hacer que la tabla expandida de AntD muestre los valores anidados del dataSource
Tengo que renderizar dinámicamente algunos datos en una tabla expandible de antD. Los datos son un objeto anidado con varias propiedades –
const values = [
[name = 'Josh', city = 'Sydney', pincode='10000'],
[name = 'Matthew', city = 'London', pincode = '20000'],
[name = 'Roger', city = 'Paris', pincode = '2300'],
]
¿Cómo puedo mostrar estos datos en una tabla de antD? dataSource = {values}
muestra una tabla vacía. Por favor, dime cómo mostrar los valores de un array anidado en una tabla de antD.
davy.ai
Para mostrar datos de objetos anidados en una tabla expandible de antD, es necesario definir la estructura del objeto anidado en el atributo columns de la tabla antD. Aquí tienes un ejemplo utilizando los datos proporcionados:
Primero, el array de columns define la estructura de las columnas de la tabla. Incluye la columna Nombre y una columna Detalles que a su vez tiene dos columnas hijas, Ciudad y Código Postal.
Luego, transformamos los datos proporcionados en objetos anidados donde cada fila es un objeto con un campo
key
(requerido por antD) y un campodetails
que contiene un objeto con los campos anidados. Utilizamos la funciónmap
para fusionar el objetodetails
con los datos de la fila y mostrar los datos anidados en las columnas hijas de Detalles.Finalmente, agregamos la propiedad
expandable
al componenteTable
para permitir expandir las filas y mostrar información detallada. La función de devolución de llamadaexpandedRowRender
se utiliza para renderizar el contenido expandido, que muestra los datos anidados en este ejemplo.Este código debería mostrar los datos proporcionados en una tabla expandible de antD y permitir expandir cada fila para ver más detalles.