Data table
A sortable transactions table with animated row reordering, live search, and compact pagination.
Preview
Resize it, switch the theme, replay the entrance — or read the source.
Recent transactions
Payments and subscriptions across your workspace.
AO Amara Osei | Scale | $4,120 | Succeeded | Nov 9, 2026 |
JW Jonas Weber | Scale | $3,380 | Succeeded | Nov 8, 2026 |
PR Priya Raman | Growth | $1,720 | Pending | Nov 8, 2026 |
MS Mateo Silva | Growth | $990 | Succeeded | Nov 7, 2026 |
IH Ingrid Halvorsen | Starter | $349 | Failed | Nov 6, 2026 |
CW Chen Wei | Scale | $2,890 | Succeeded | Nov 5, 2026 |
Showing 1–6 of 12
Installation
Add the block to a project that already uses shadcn/ui.
npx shadcn@latest add https://prequelui.terravidhal.me/r/data-table.jsonRequires a project that already uses shadcn/ui on React and Tailwind CSS v4. The block is copied into your project as a single file you own and can edit.
Usage
Import the named export and render it with your own data.
Every prop is optional and ships with deterministic demo data, so a bare render shows the block at its default. Pass props to plug in your own data and formatters.
import { DataTable } from "@/components/prequel/data-table/data-table";
export default function DashboardPage() {
return <DataTable />;
}import { DataTable } from "@/components/prequel/data-table/data-table";
export default function DashboardPage() {
return <DataTable />;
}Props
Every prop is optional and ships with demo-data defaults.
| Prop | Type | Description |
|---|---|---|
className | string | Extra classes merged onto the root element. |
title | string | — |
description | string | — |
rows | DataTableRow[] | — |
pageSize | number | Number of rows per page. |
formatAmount | (amount: number) => string | — |
searchPlaceholder | string | — |
Accessibility
The rules every PrequelUI block follows, verified against this block's source.
Charts and graphics expose a text summary via role="img" and an aria-label describing the data.
Interactive charts respond to arrow keys, Home and End, and show tooltips on keyboard focus.
Every button carries a visible focus ring so keyboard users can always see where they are.
The block honours prefers-reduced-motion: animations are skipped and content is fully visible.
Live updates run on timers inside effects and pause when the block is off-screen or hovered.