Table

Component

About

A semantic HTML table component

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-1";

export default function DefaultDemo() {
  return (
        <div className="w-1/2 mt-[8px]">
          <Table>
            <Table.Header>
              <Table.Row>
                <Table.Head>Col 1</Table.Head>
                <Table.Head>Col 2</Table.Head>
                <Table.Head>Col 3</Table.Head>
              </Table.Row>
            </Table.Header>
            <Table.Body>
              <Table.Row>
                <Table.Cell>Value 1.1</Table.Cell>
                <Table.Cell>Value 1.2</Table.Cell>
                <Table.Cell>Value 1.3</Table.Cell>
              </Table.Row>
              <Table.Row>
                <Table.Cell>Value 2.1</Table.Cell>
                <Table.Cell>Value 2.2</Table.Cell>
                <Table.Cell>Value 2.3</Table.Cell>
              </Table.Row>
              <Table.Row>
                <Table.Cell>Value 3.1</Table.Cell>
                <Table.Cell>Value 3.2</Table.Cell>
                <Table.Cell>Value 3.3</Table.Cell>
              </Table.Row>
            </Table.Body>
          </Table>
        </div>
  );
}