Reshaped Table

Cards 2

About

Collection of compound components (Table.Row, Table.Cell, Table.Heading, Table.Head, Table.Body) for building tables from simple cells to headed layouts. Supports outer and column borders, row highlighting, colSpan/rowSpan, cell padding/width/alignment, card composition and interactive datasets like checkbox row selection.

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

Code

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

Usage.tsx

import { Card, Reshaped } from "reshaped/bundle";
import Table from "@/components/ui/reshaped-table";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 480, width: "100%", margin: "0 auto", padding: 24 }}>
        <Card raised padding={0}>
          <Table>
            <Table.Row highlighted>
              <Table.Heading>Column 1</Table.Heading>
              <Table.Heading colSpan={2}>Column 2</Table.Heading>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Cell 1</Table.Cell>
              <Table.Cell>Cell 2</Table.Cell>
              <Table.Cell align="end">Cell 3</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Cell 1</Table.Cell>
              <Table.Cell>Cell 2</Table.Cell>
              <Table.Cell align="end">Cell 3</Table.Cell>
            </Table.Row>
          </Table>
        </Card>
      </div>
    </Reshaped>
  );
}