Table

Component

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Table to your project and fits it to your theme.

Code

How Table is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Table, {
  TableBody,
  TableCell,
  TableHead,
  TableRow,
} from "@/components/ui/table";

const users = [
  {
    name: "Olivia Martin",
    email: "[email protected]",
    role: "Admin",
    status: "Active",
    joined: "Jan 12, 2025",
  },
  {
    name: "Jackson Lee",
    email: "[email protected]",
    role: "Member",
    status: "Active",
    joined: "Feb 08, 2025",
  },
  {
    name: "Sophia Brown",
    email: "[email protected]",
    role: "Member",
    status: "Inactive",
    joined: "Mar 21, 2025",
  },
];

export default function TableBasicDemo() {
  return (
    <div className="w-full overflow-x-auto">
      <Table className="min-w-200">
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell>Email</TableCell>
            <TableCell>Role</TableCell>
            <TableCell>Status</TableCell>
            <TableCell>Joined</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {users.map((user) => (
            <TableRow key={user.email}>
              <TableCell>{user.name}</TableCell>
              <TableCell>{user.email}</TableCell>
              <TableCell>{user.role}</TableCell>
              <TableCell>{user.status}</TableCell>
              <TableCell>{user.joined}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}