React-Morph-Table-Cards

A reusable React component that displays a list of items as a table or as cards, with animated transitions between the two layouts, on sorting, and on window resize.

Check out the Demo.

It's a React port of isomorphic-table-cards, a vanilla-JS/CSS project that achieves the morphing effect with absolutely positioned items and CSS transitions on transform which was a port of d3-table-cards.

Install

npm install react-morph-table-cards

Usage

import { MorphTableCards } from "react-morph-table-cards";
import "react-morph-table-cards/style.css";

const data = [
  { id: 1, name: "Espresso", description: "Bold shot pulled under pressure.", category: "Coffee" },
  { id: 2, name: "Green Tea", description: "Light, grassy, and antioxidant-rich.", category: "Tea" },
  // ...
];

function App() {
  return (
    <MorphTableCards
      data={data}
      onItemClick={(item) => console.log("clicked", item)}
    />
  );
}

The component renders its own toolbar (Sort by Name/Category, a Table/Cards view toggle, and a light/dark/omg theme toggle) above the list, so it works as a drop-in, self-contained widget.

Props

| Prop | Type | Required | Description | | ------------- | -------------------------------------- | -------- | ----------------------------------------------------------------------------- | | data | Array<{ id?, name, description, category }> | yes | Items to display. id is optional; when omitted, name is used as the item's identity, so name should be unique. | | disabled | boolean | no | When true, dims the component and disables sorting, view toggling, and onItemClick. Defaults to false. | | className | string | no | Extra class name(s) applied to the root element. | | onItemClick | (item, event) => void | no | Called when an item (card or row) is clicked or activated via keyboard. |

Additional (optional) props

These have sensible defaults and don't need to be set for typical use:

| Prop | Type | Default | Description | | ------------- | ------------------- | ---------- | ------------------------------------- | | defaultView | "cards" \| "table" | "cards" | Initial view. | | cardWidth | number | 210 | Card width in pixels (also used as the "Name" column width in table view). | | cardHeight | number | 94 | Card height in pixels. | | cardGap | number | 10 | Gap between cards, in pixels (cards view only). | | rowHeight | number | 31 | Row height in pixels (table view). | | theme | "light" \| "dark" \| "omg" | — | Controls the theme externally. Omit to let the component manage its own theme state (uncontrolled). | | defaultTheme | "light" \| "dark" \| "omg" | system preference | Initial theme when uncontrolled and nothing is in localStorage yet. | | onThemeChange | (theme) => void | — | Called whenever the theme changes (controlled or uncontrolled). | | themeStorageKey | string | — | When set, the chosen theme is persisted to localStorage under this key and restored on mount. Off by default so the component doesn't write to storage unasked. | | showThemeToggle | boolean | true | Set to false to hide the built-in theme toggle (e.g. if the host page drives theme itself). |

Theming

The component ships with three themes — light, dark, and omg (the blue theme from evoluteur.github.io) — toggled with the same three-icon control (sun / moon / spiral) used on evoluteur-blog, rendered at the top right of the toolbar.

Theming is scoped to the component via a data-theme attribute on the root .rmtc element — it never touches document.documentElement — so it's safe to drop into a page that has its own theming system. Colors are driven by CSS custom properties (--rmtc-bg, --rmtc-panel-bg, --rmtc-text, --rmtc-text-secondary, --rmtc-border, --rmtc-primary, --rmtc-toggle-bg), overridable per theme via .rmtc[data-theme="..."] if you want to restyle or add a theme.

Styling

Items are color-coded by category, cycling through a 7-color default palette (.rmtc-category-1 through .rmtc-category-7, unaffected by theme since they're always light pastel chips) defined in style.css. Override these classes, or the CSS custom properties --rmtc-card-width, --rmtc-card-height, and --rmtc-row-height on the root .rmtc element, to customize appearance.

Local development

npm install
npm run dev      # runs the demo app in ./demo
npm run build    # builds the library to ./dist

License

react-morph-table-cards is released under the MIT license.

Encourage this project by becoming a sponsor.

You may want to also check out React-Morph-Charts, a similar project for animated transitions between bubble, bars, and pie charts.

(c) 2026 Olivier Giulieri.