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.
"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>
);
}
Part of Motiq — browse the full library on 21st.dev.