Table

Component

About

A styled data table that renders column headers and rows of cells, with row-hover highlighting and support for rich cell content like badges or avatars.

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 from "@/components/ui/table";
import Text from "@/components/ui/table-utils/text";

export default function TableNumbersDemo() {
  return (
    <div style={{ width: 440 }}>
      <Table
        columns={["Customer", "Plan", "Refunded"]}
        rows={[
          [
            "Acme",
            "Team",
            <Text size="sm" mono>
              $120.00
            </Text>,
          ],
          [
            "Cobalt Dental",
            "Starter",
            <Text size="sm" mono>
              $0.00
            </Text>,
          ],
          [
            "Brightline",
            "Team",
            <Text size="sm" mono>
              $48.50
            </Text>,
          ],
        ]}
      />
    </div>
  );
}