Streaming Data Rows

Dashboards 6

About

An animated live table that inserts, updates, resorts and highlights changed cells as your app streams new rows in, with numeric value morphing, status pills, loading/empty/error states and reduced-motion support.

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

Code

How Streaming Data Rows is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import StreamingDataRows, {
  StatusPill,
  type Column,
} from "@/components/ui/streaming-data-rows";

interface Trade {
  id: string;
  symbol: string;
  price: number;
  change: number;
  status: string;
}

const initialRows: Trade[] = [
  { id: "1", symbol: "AAPL", price: 189.32, change: 0.4, status: "active" },
  { id: "2", symbol: "MSFT", price: 412.18, change: -0.2, status: "pending" },
  { id: "3", symbol: "NVDA", price: 924.5, change: 1.1, status: "success" },
  { id: "4", symbol: "TSLA", price: 176.42, change: -0.8, status: "warning" },
];

const columns: Column<Trade>[] = [
  { key: "symbol", header: "Symbol", value: (r) => r.symbol },
  {
    key: "price",
    header: "Price",
    align: "end",
    sortable: true,
    numeric: true,
    value: (r) => r.price,
    format: (n) => `$${n.toFixed(2)}`,
  },
  {
    key: "change",
    header: "Change",
    align: "end",
    numeric: true,
    value: (r) => r.change,
    format: (n) => `${n > 0 ? "+" : ""}${n.toFixed(2)}%`,
  },
  {
    key: "status",
    header: "Status",
    value: (r) => r.status,
    render: (r) => <StatusPill status={r.status} />,
  },
];

export default function StreamingDataRowsDemo() {
  const [rows, setRows] = React.useState(initialRows);

  React.useEffect(() => {
    const id = setInterval(() => {
      setRows((prev) =>
        prev.map((row) => ({
          ...row,
          price: Math.max(1, row.price + (Math.random() - 0.5) * 4),
          change: (Math.random() - 0.5) * 2,
        })),
      );
    }, 2000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="w-full max-w-2xl p-6">
      <StreamingDataRows
        rows={rows}
        columns={columns}
        getRowId={(r) => r.id}
        caption="Live trades"
      />
    </div>
  );
}