Help expanding items in a table row

[rdrigos]

Hi, I'm Rafael and I'm starting out in the world of the ShadcnUI library, and I'm mainly using its documentation. I would like to create a table with Collapsible, to show the items linked to an order (Fake data for development), but when I try to place one table inside another with Collapsible, this happens:

I would like to know how to leave it correctly, where it expands and doesn't have this visual mess... Could you help me?
This is the code for it, I had separated them, but to make it better available here, I combined them....

import { useState, useEffect } from 'react';
import axios from 'axios';
import { ChevronsUpDown } from 'lucide-react';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { IItem, OrderItemTable } from './ChildComponents/OrderItemTable';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { Button } from '@/components/ui/button';

interface IPortal {
  id: number;
  dsPortalName: string;
}

interface IOrder {
  id: number;
  idOrder: number;
  portal: IPortal;
  dsCnpj: string;
  dsStatus: string;
  nrTotalPrice: number;
  nrQtyItems: number;
  dsIncoterm: string;
  dsCodeErp: string;
  cdContract: string | null;
  cdX3OC: string | null;
  boolAnalTec: boolean | null;
  boolAnalCom: boolean | null;
  createdBy: string | null;
  createdAt: string | null;
  updatedBy: string | null;
  updatedAt: string | null;
  answeredBy: string | null;
  answeredAt: string | null;
  items: IItem[];
  analysis: any;
}

const Orders = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get('http://localhost:3000/api/sales/orders');
        setData(response.data);
      } catch (error) {
        // Create
      }
    }
    fetchData();
  }, []);

  return (
    <div>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead></TableHead>
            <TableHead>Portal</TableHead>
            <TableHead>Ordem de Compra</TableHead>
            <TableHead>Pedido</TableHead>
            <TableHead>Cnpj</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Items</TableHead>
            <TableHead>Valor Bruto</TableHead>
            <TableHead>Incoterm</TableHead>
            <TableHead>Ordem de Compra X3</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {data
            ? data.map((order: IOrder) => (
                <Collapsible key={order.id} asChild>
                  <>
                    <TableRow key={order.id}>
                      <TableCell>
                        <CollapsibleTrigger asChild>
                          <Button variant="ghost" size="sm">
                            <ChevronsUpDown className="h-4 w-4" />
                          </Button>
                        </CollapsibleTrigger>
                      </TableCell>
                      <TableCell>{order.portal.dsPortalName}</TableCell>
                      <TableCell>{order.dsCodeErp}</TableCell>
                      <TableCell>{order.idOrder}</TableCell>
                      <TableCell>{order.dsCnpj}</TableCell>
                      <TableCell>{order.dsStatus}</TableCell>
                      <TableCell>{order.nrQtyItems}</TableCell>
                      <TableCell>{order.nrTotalPrice}</TableCell>
                      <TableCell>{order.dsIncoterm}</TableCell>
                      <TableCell>{order.cdX3OC}</TableCell>
                    </TableRow>
                    <CollapsibleContent asChild>
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead></TableHead>
                            <TableHead>Item</TableHead>
                            <TableHead>Cód. SAP</TableHead>
                            <TableHead>Descrição Curta</TableHead>
                            <TableHead>Qtd.</TableHead>
                            <TableHead>Unidade</TableHead>
                            <TableHead>Valor Und.</TableHead>
                            <TableHead>Valor Total</TableHead>
                            <TableHead>Pagamento</TableHead>
                            <TableHead>Data de Entrega</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {order.items
                            ? order.items.map((item) => (
                                <TableRow key={item.id}>
                                  <TableCell></TableCell>
                                  <TableCell>{item.idItem}</TableCell>
                                  <TableCell>{item.dsCode}</TableCell>
                                  <TableCell>{item.dsShortDesc}</TableCell>
                                  <TableCell>{item.nrQty}</TableCell>
                                  <TableCell>{item.dsUnit}</TableCell>
                                  <TableCell>{item.nrUnitPrice}</TableCell>
                                  <TableCell>{item.nrTotalPrice}</TableCell>
                                  <TableCell>{item.dsPaymentMethod}</TableCell>
                                  <TableCell>{item.dtDeliveryDate}</TableCell>
                                </TableRow>
                              ))
                            : null}
                        </TableBody>
                      </Table>
                    </CollapsibleContent>
                  </>
                </Collapsible>
              ))
            : null}
        </TableBody>
      </Table>
    </div>
  );
};

export default Orders;

[johirhaquedipok]

You can follow this solution. though I did not tried it yet.
The article head line is : Build an Expandable / Collapsible Data Table with 2 shadcn/ui Components

[rdrigos]

Thanks for the help, I tried using it based on, it works in parts... If I remove the Header from my table, but I would like to name my columns as shown in the example.

In this solution, it is kind of reusing the column structure, but in my case I couldn't

[johirhaquedipok]

shadcn uses tanstack table, You can read tanstack table documentation expanding row.
And also, use this example subComponents.
There is another library based on tanstack table named mantine react table. They also have some example. I hope that helps.

[rdrigos]

Thanks! I will try to find out more and come back to share my results.

[rdrigos]

Good evening, it's still not 100% as I wanted, but I'm very close, in case anyone wants to do the same thing.

import { useEffect, useState, Fragment } from 'react';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import api from '@/lib/api';
import { IOrder } from '@/types/commercial/OrderTypes';
import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible';
import { Button } from '@/components/ui/button';
import { ChevronDown, ChevronRight } from 'lucide-react';

interface DetailsRowPros {
  row: IOrder;
}

const DetailsRow = ({ row }: DetailsRowPros) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Fragment>
      <TableRow>
        <TableCell>
          <Button variant="ghost" size="icon" onClick={() => setIsOpen(!isOpen)}>
            {isOpen ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
          </Button>
        </TableCell>
        <TableCell>{row.portal.dsPortalName}</TableCell>
        <TableCell>{row.dsCodeErp}</TableCell>
        <TableCell>{row.idOrder}</TableCell>
        <TableCell>{row.dsCnpj}</TableCell>
        <TableCell>{row.dsStatus}</TableCell>
        <TableCell>{row.nrTotalPrice}</TableCell>
        <TableCell>{row.cdX3OC}</TableCell>
      </TableRow>
      <TableCell colSpan={12} className="py-0">
        <Collapsible open={isOpen} onOpenChange={setIsOpen}>
          <CollapsibleContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Item</TableHead>
                  <TableHead>Cód. Sap</TableHead>
                  <TableHead>Descrição Curta</TableHead>
                  <TableHead>Unidade</TableHead>
                  <TableHead>Qtd.</TableHead>
                  <TableHead>Valor Und.</TableHead>
                  <TableHead>Valor Total</TableHead>
                  <TableHead>Pagamento</TableHead>
                  <TableHead>Entrega</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {row.items
                  ? row.items.map((item) => (
                      <TableRow key={item.idItem}>
                        <TableCell>{item.id}</TableCell>
                        <TableCell>{item.dsCode}</TableCell>
                        <TableCell>{item.dsShortDesc}</TableCell>
                        <TableCell>{item.dsUnit}</TableCell>
                        <TableCell>{item.nrQty}</TableCell>
                        <TableCell>{item.nrUnitPrice}</TableCell>
                        <TableCell>{item.nrTotalPrice}</TableCell>
                        <TableCell>{item.dsPaymentMethod}</TableCell>
                        <TableCell>{item.dtDeliveryDate}</TableCell>
                      </TableRow>
                    ))
                  : null}
              </TableBody>
            </Table>
          </CollapsibleContent>
        </Collapsible>
      </TableCell>
    </Fragment>
  );
};

const Orders = () => {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    (async () => {
      const response = await api.get('/sales/orders');
      setOrders(response.data);
    })();
  }, []);

  return (
    <div>
      <Table className="w-full sm:p-4">
        <TableHeader>
          <TableRow>
            <TableHead className="w-[52px]"></TableHead>
            <TableHead>Portal</TableHead>
            <TableHead>Ordem de Compra</TableHead>
            <TableHead>Pedido</TableHead>
            <TableHead>Cnpj</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Valor Bruto</TableHead>
            <TableHead>Ordem de Compra x3</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {orders ? orders.map((order: IOrder) => <DetailsRow key={order.id} row={order} />) : null}
        </TableBody>
      </Table>
    </div>
  );
};

export default Orders;