Three-column data table with a sort arrow on the active column and monospaced right-aligned amounts in each row.
| Account | Plan | Amount |
|---|---|---|
| Atlas Labs | Scale | $820 |
| Northwind | Pro | $420 |
| Hemlock | Pro | $420 |
| Stoic & Co. | Starter | $120 |
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Dashboard28 } from "@/components/beste/piece/dashboard28";
<Dashboard28
title="Recent invoices"
accountHeader="Account"
planHeader="Plan"
amountHeader="Amount"
sortKey="Amount"
rows={[
{
"name": "Atlas Labs",
"plan": "Scale",
"amount": "$820"
},
{
"name": "Northwind",
"plan": "Pro",
"amount": "$420"
},
{
"name": "Hemlock",
"plan": "Pro",
"amount": "$420"
},
{
"name": "Stoic & Co.",
"plan": "Starter",
"amount": "$120"
}
]}
/>