Transactions Table Block React component
A transactions table for finance screens: money in, money out and net for 7, 30 or 90 days with a drawn trend line, type filters with counts, search, rows grouped by day with daily totals, status dots, a detail drawer and CSV export.
About the Transactions Table Block component
Transactions Table Block is the money screen of a SaaS dashboard or a finance app. At the top, money in, money out and the net for the last 7, 30 or 90 days, with a small trend line of the running net. Below, every transaction grouped by day, with the day's total next to the date.
Filter by type, search by name, category or reference, and click any row to open a drawer with the full details. Export downloads the rows you are looking at as a CSV file, or hands them to your own export function.
When to use it
Use it for billing history, a payments dashboard, a wallet or bank view, or an expenses overview.
For a general-purpose admin table with column sorting and selection, the Data Table component fits better.
Installation
Add the Transactions Table Block component to your project with the shadcn CLI. It lands in components/transactions-table.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/transactions-tableOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<TransactionsTable /> accepts 7 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Transactions" |
| transactions | Transaction[] | — |
| currency | string | "$" |
| today Today as YYYY-MM-DD; ranges are counted back from it. Defaults to the newest transaction date. | string | — |
| onExport Called with the rows currently shown when Export is pressed. Without it a CSV file is downloaded. | (rows: Transaction[]) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Transactions"
- transactionsTransaction[]
- currencystringDefault: "$"
- today
Today as YYYY-MM-DD; ranges are counted back from it. Defaults to the newest transaction date.
string - onExport
Called with the rows currently shown when Export is pressed. Without it a CSV file is downloaded.
(rows: Transaction[]) => void - theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Transactions Table Block FAQ
- How do I pass my data?
- Map your records to { id, date, description, counterparty, category, kind, amount, status } and pass them as transactions. amount is always positive; kind decides the sign (income adds, expense and refund subtract, transfer is shown but not counted).
- Which transactions count in the totals?
- Only completed ones. Pending and failed transactions are listed with their status but left out of money in, money out, net and the daily totals.
- How does the date range work?
- Ranges count back from today. Pass today as YYYY-MM-DD; by default it is the newest transaction date, so demo data always looks current.
- What does Export do?
- Without onExport it downloads a CSV of the rows currently shown, after range, type and search filters. With onExport you get those rows and can build an XLSX, call your API or anything else.
- Is the drawer accessible?
- It is a modal dialog labelled by the amount; focus moves into it, Escape or clicking outside closes it and focus goes back to the row you opened. Each row is a button whose label reads the name, amount and status.
