TableWithFooter() — ui Function Reference

Architecture documentation for the TableWithFooter() function in table-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ TableWithFooter() — ui Function Reference

Dependency Diagram

graph TD
  19314df5_f595_0a99_7453_1b7bc23e7182["TableWithFooter()"]
  e1fb0b21_a5a7_9715_2fd0_46e69f3ec6d0["table-example.tsx"]
  19314df5_f595_0a99_7453_1b7bc23e7182 -->|defined in| e1fb0b21_a5a7_9715_2fd0_46e69f3ec6d0
  style 19314df5_f595_0a99_7453_1b7bc23e7182 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/table-example.tsx lines 123–157

function TableWithFooter() {
  return (
    <Example title="With Footer">
      <Table>
        <TableCaption>A list of your recent invoices.</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead className="w-[100px]">Invoice</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Method</TableHead>
            <TableHead className="text-right">Amount</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {invoices.slice(0, 3).map((invoice) => (
            <TableRow key={invoice.invoice}>
              <TableCell className="font-medium">{invoice.invoice}</TableCell>
              <TableCell>{invoice.paymentStatus}</TableCell>
              <TableCell>{invoice.paymentMethod}</TableCell>
              <TableCell className="text-right">
                {invoice.totalAmount}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TableCell colSpan={3}>Total</TableCell>
            <TableCell className="text-right">$2,500.00</TableCell>
          </TableRow>
        </TableFooter>
      </Table>
    </Example>
  )
}