A table cell component that renders as a td or th and adapts spacing and alignment, ported from Solid.js to React from the RockSolid UI library (MIT, original by Darshan Rajadhyaksha).
import TableCell from "@/components/ui/table-cell";
const rows = [
{ name: "Alice Johnson", role: "Product Designer", status: "Active" },
{ name: "Brian Lee", role: "Frontend Engineer", status: "Active" },
{ name: "Carla Mendes", role: "Backend Engineer", status: "On leave" },
];
export default function TableCellDemo() {
return (
<div className="w-full max-w-2xl p-6">
<table className="w-full border-collapse text-sm">
<thead>
<tr>
<TableCell as="th">Name</TableCell>
<TableCell as="th">Role</TableCell>
<TableCell as="th" align="right">
Status
</TableCell>
</tr>
</thead>
<tbody>
{rows.map((row) => (
<tr key={row.name}>
<TableCell>{row.name}</TableCell>
<TableCell>{row.role}</TableCell>
<TableCell align="right">{row.status}</TableCell>
</tr>
))}
</tbody>
</table>
</div>
);
}