Reshaped Table

Component 3

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 { 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 }}>
        <Table border columnBorder>
          {[1, 2, 3, 4].map((i) => (
            <Table.Row key={i} highlighted={Boolean(i % 2)}>
              <Table.Cell>Cell {i} - 1</Table.Cell>
              <Table.Cell>Cell {i} - 2</Table.Cell>
            </Table.Row>
          ))}
        </Table>
      </div>
    </Reshaped>
  );
}