Transactions

Every payment in and out of an account, with figures that filter the table, sort and search, a date range, row details in a sheet and CSV export.

Pick a figure to filter, sort or search, set a date range, open a row for its details, or export what you see.

Full page

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/transactions.json

Features

Figures that filter. All, Money in, Money out and Pending sit across the top as Stat Tabs. Pick one and the table shows only those rows. The counts follow the date range.
A full table. It is the Data Table: sort any column, search, filter by category and status with counts, hide columns, select rows and page through. Rows load in with skeletons.
Date range. The Date Range Picker in the toolbar narrows the table and the figures. It holds the choice until Apply.
Row menu. View details, copy the transaction ID, or download the row as a PDF or CSV.
Details. Clicking a merchant opens a sheet with the amount, status, date, category, account and a copyable ID.
Export. Saves the rows you see as a CSV, or only the rows you picked when some are selected.
Logos. Pass a key of MERCHANT_LOGOS (Stripe, Figma, AWS and 21 more brands) or your own node. Anything else shows the merchant's initials.

Usage

import { TransactionsPage, type Transaction } from "@/components/blocks/transactions"
 
const transactions: Transaction[] = [
  {
    id: "txn_8f2k",
    date: "2026-10-14",
    merchant: "Stripe",
    description: "Payout to chequing",
    logo: "stripe",
    category: "Sales",
    account: "Chequing 0187",
    status: "cleared",
    amount: 4210.5,
  },
]
 
<TransactionsPage
  transactions={transactions}
  onAdd={() => setAdding(true)}
  onDownload={(rows, format) => exportRows(rows, format)}
/>

Props

transactions. The rows. amount is positive for money in and negative for money out. status is cleared, pending or declined.
loading. Shows skeleton rows while the data loads.
title, description. The page heading.
defaultFilter. The figure picked at the start: all, in, out or pending.
locale. For dates and money.
onAdd. Runs from Add transaction. Leave it out to hide the button.
onDownload. Runs with the rows and the format. Without it, CSV saves a file and PDF shows a toast.

Integrations Analytics

On This Page

Installation Features Usage Props