Reshaped Table

Component 1

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 * as React from "react";
import { Checkbox, Reshaped } from "reshaped/bundle";
import Table from "@/components/ui/reshaped-table";

type Rows = { value: string }[];
const rows: Rows = [{ value: "1" }, { value: "2" }];

function Component() {
  const [value, setValue] = React.useState<string[]>([]);
  const allSelected = value.length === rows.length;
  return (
    <Table>
      <Table.Row>
        <Table.Heading width="auto">
          <Checkbox
            inputAttributes={{ "aria-label": "Select all" }}
            name="all"
            checked={allSelected}
            indeterminate={!!value.length && value.length < rows.length}
            onChange={() => {
              setValue(allSelected ? [] : rows.map((row) => row.value));
            }}
          />
        </Table.Heading>
        <Table.Heading>Column 1</Table.Heading>
        <Table.Heading>Column 2</Table.Heading>
      </Table.Row>
      {rows.map((row) => (
        <Table.Row key={row.value} highlighted={value.includes(row.value)}>
          <Table.Cell>
            <Checkbox
              name="row"
              value={row.value}
              inputAttributes={{ "aria-label": "Select row" }}
              checked={value.includes(row.value)}
              onChange={(args) => {
                setValue((prev) => {
                  if (args.checked && args.value) return [...prev, args.value];
                  return prev.filter((item) => item !== args.value);
                });
              }}
            />
          </Table.Cell>
          <Table.Cell>Cell 1</Table.Cell>
          <Table.Cell>Cell 2</Table.Cell>
        </Table.Row>
      ))}
    </Table>
  );
}

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 480, width: "100%", margin: "0 auto", padding: 24 }}>
        <Component />
      </div>
    </Reshaped>
  );
}