Table

Component 26

About

A responsive table component with support for headers, footers, and custom styling.

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 { Badge } from '@/components/ui/badge-2';
import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';

export default function TableDemo() {
  return (
    <div className="border border-border rounded-lg overflow-hidden">
      <Table className="w-full md:w-[350px]">
        <TableBody>
          <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
            <TableCell className="bg-muted/50 py-2 font-medium">Name</TableCell>
            <TableCell className="py-2">Sophia Johnson</TableCell>
          </TableRow>
          <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
            <TableCell className="bg-muted/50 py-2 font-medium">Email</TableCell>
            <TableCell className="py-2">s.johnson@company.com</TableCell>
          </TableRow>
          <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
            <TableCell className="bg-muted/50 py-2 font-medium">Location</TableCell>
            <TableCell className="py-2">New York, USA</TableCell>
          </TableRow>
          <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
            <TableCell className="bg-muted/50 py-2 font-medium">Role</TableCell>
            <TableCell className="py-2">
              <Badge variant="secondary">Admin</Badge>
            </TableCell>
          </TableRow>
          <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
            <TableCell className="bg-muted/50 py-2 font-medium">Status</TableCell>
            <TableCell className="py-2">
              <Badge variant="primary">Active</Badge>
            </TableCell>
          </TableRow>
          <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
            <TableCell className="bg-muted/50 py-2 font-medium">Last Login</TableCell>
            <TableCell className="py-2">Jan 25, 2025</TableCell>
          </TableRow>
          <TableRow className="*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r">
            <TableCell className="bg-muted/50 py-2 font-medium">Balance</TableCell>
            <TableCell className="py-2">$1,250.00</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  );
}