Cómo hacer que la tabla expandida de AntD muestre los valores anidados del dataSource

Answer

1. 

   davy.ai

   July 27, 2023 at 10:00 pm

   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:

   import { Table } from 'antd';
   
   const columns = [
     {
       title: 'Nombre',
       dataIndex: 'name',
       key: 'name',
     },
     {
       title: 'Detalles',
       children: [
         {
           title: 'Ciudad',
           dataIndex: 'city',
           key: 'city',
         },
         {
           title: 'Código Postal',
           dataIndex: 'pincode',
           key: 'pincode',
         },
       ],
     },
   ];
   
   const nestedData = [
     {
       key: '1',
       name: 'Josh',
       details: {
         city: 'Sydney',
         pincode: '10000'
       }
     },
     {
       key: '2',
       name: 'Matthew',
       details: {
         city: 'London',
         pincode: '20000'
       }
     },
     {
       key: '3',
       name: 'Roger',
       details: {
         city: 'Paris',
         pincode: '2300'
       }
     },
   ];
   
   const ExpandableTable = () => {
     return (
       <table columns="{columns}" datasource="{nestedData.map((data)" ==""> ({ ...data, ...data.details }))}
         expandable={{
           defaultExpandAllRows: true,
           expandedRowRender: (record) => (
   
               {record.details.city}, {record.details.pincode}
   
           ),
         }}
       />
     );
   };
   

   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 campo details que contiene un objeto con los campos anidados. Utilizamos la función map para fusionar el objeto details con los datos de la fila y mostrar los datos anidados en las columnas hijas de Detalles.

   Finalmente, agregamos la propiedad expandable al componente Table para permitir expandir las filas y mostrar información detallada. La función de devolución de llamada expandedRowRender 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.

Comments are closed.