shadcn.io is not affiliated with official shadcn/ui
Currency Ledger Table Block for React Aria
A ledger of eight entries booked in US dollars, shown in dollars, euros, pounds, yen or rupees at fixed rates, with an accounting-format switch for negatives in parentheses and a net total that follows.
Installation
Overview
Show money in the currency a reader thinks in, with this currency ledger table for React with React Aria. A compact header names the ledger and, at its end, holds a Select of five currencies and a Switch for the accounting format. Inside a hairline frame with a plus mark on each corner, a band says in words what is on screen ("Euro, at 0.92 per US dollar, fixed as of 9 Oct"), over a native table of eight October entries: a date, a counterparty, a category, the amount and its change on the month before, with an arrow, a sign and a word. Every amount is booked in dollars and converted at a rate typed in the file, then written by Intl.NumberFormat for that currency, so the yen loses its decimals and the rupee groups digits in lakhs. The switch writes negatives in parentheses instead of with a minus. A net total under the table follows the currency and the format. Amounts are end-aligned tabular figures that keep their direction in right-to-left pages, and the table never changes height. On a phone the category and change fold into a line under the counterparty. It's built from Select, Switch, Guides and a native table, with a CSS entrance only. For ledgers, statements, expense lists and any table that needs a display currency.
FAQ
Where do the exchange rates come from, and how do I use live ones?
They are typed in CURRENCIES, one number per currency for one US dollar, and the header says they are fixed as of 9 Oct. Nothing is requested, so the figures are example rates. For real rates, fetch them in your own data layer, put them in that same list with the date they were taken, and keep the "fixed as of" wording so a reader knows which day a converted figure is from. The conversion is one multiplication in moneyOf.
How are the amounts formatted, and what does the accounting switch change?
moneyOf multiplies the booked dollar amount by the rate and passes it to Intl.NumberFormat with the currency code, so symbols, decimals and digit grouping come from the platform: the yen has no decimals and the rupee groups by lakhs (en-IN). The Accounting format switch sets currencySign: "accounting", which writes a negative as (12,480.50) instead of -12,480.50. The net total uses the same function, so the table and its total always agree.
What stays local in the demo, and how do I wire it to real data?
All of it: the entries, the rates and the two choices live in the page, and nothing is saved or requested. For real data, replace ENTRIES with rows from your API in whatever base currency you book in, keep usd as the booked amount, and keep the currency and the switch as state. If your backend converts, send the chosen code and render what comes back, using Intl.NumberFormat only for the symbol and grouping.
Is a table of amounts accessible?
Yes. It's a native table with a caption, th scope="col" heads and a row header for each counterparty. The currency menu and the switch each have a name, take the keyboard and show a focus ring, and a polite status line, present from the start, says what changed. The change column carries an arrow, a sign and a word, so a rise or a fall never depends on colour, and a screen reader hears "Up" or "Down" before the figure. Amounts keep a left-to-right direction so a minus or a symbol stays beside its digits in Arabic and Hebrew pages.
How does it look on a phone?
Below the medium breakpoint the Category and Change columns fold into a second line under the counterparty ("Logistics, down 2.1%"), so the table keeps Date, Counterparty and Amount and doesn't scroll sideways. The currency menu and the switch wrap under the header. The longest amount, in yen, still fits its column on one line.
Does the table change size when I change currency?
No. The rows are the same eight and every amount stays on one line, the columns have fixed widths and the status line has its own reserved height, so choosing the yen or switching the format moves nothing. If you add rows or a filter to your own table, keep the frame's height with a fixed region.