Table

Dashboards 8

About

A data table with proximity hover highlighting, animated row backgrounds, smooth transitions, and composable header/body/row/cell components.

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

"use client";

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

const users = [
  { name: "Alice Chen", role: "Product Designer", status: "Active" },
  { name: "Bob Smith", role: "Frontend Engineer", status: "Active" },
  { name: "Carol Williams", role: "Backend Engineer", status: "Away" },
  { name: "Diana Johnson", role: "Data Scientist", status: "Active" },
];

export default function TableUsersDemo() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-background p-4">
      <Table className="w-full max-w-2xl">
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Role</TableHead>
            <TableHead>Status</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {users.map((user, i) => (
            <TableRow key={user.name} index={i}>
              <TableCell className="font-[inherit]">{user.name}</TableCell>
              <TableCell>{user.role}</TableCell>
              <TableCell>{user.status}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}