A styled HTML table system (table, head, body, row, cell, footer) that supports dense layouts, selected rows, and per-cell text alignment, with cells automatically rendering as th or td based on context.
import Table, {
TableBody,
TableCell,
TableFooter,
TableHead,
TableRow,
} from "@/components/ui/table";
const orders = [
{ product: "Wireless Headphones", quantity: 2, total: "$398.00" },
{ product: "Mechanical Keyboard", quantity: 1, total: "$149.00" },
{ product: "USB-C Hub", quantity: 3, total: "$267.00" },
];
export default function TableFooterDemo() {
const total = orders.reduce(
(sum, order) => sum + Number(order.total.replace("$", "")),
0,
);
return (
<Table>
<TableHead>
<TableRow>
<TableCell>Product</TableCell>
<TableCell align="right">Quantity</TableCell>
<TableCell align="right">Total</TableCell>
</TableRow>
</TableHead>
<TableBody>
{orders.map((order) => (
<TableRow key={order.product}>
<TableCell>{order.product}</TableCell>
<TableCell align="right">{order.quantity}</TableCell>
<TableCell align="right">{order.total}</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter className="bg-neutral-100 dark:bg-neutral-900">
<TableRow>
<TableCell className="font-semibold">Total</TableCell>
<TableCell align="right" className="font-semibold">
{orders.reduce((sum, order) => sum + order.quantity, 0)}
</TableCell>
<TableCell align="right" className="font-semibold">
${total.toFixed(2)}
</TableCell>
</TableRow>
</TableFooter>
</Table>
);
}
Loading preview...
Loading preview...