Transaction List — Free HTML CSS JS Snippet

The grouped transaction list is the core screen of every banking and fintech app — Revolut, Monzo, Cash App, and every neobank render payments the same way: rows with a category icon, merchant name, and signed amount, bucketed under sticky date headers with a per-day total. This component builds that exact pattern in HTML, CSS, and vanilla JavaScript, with income/spending filter tabs, correct currency formatting via Intl.NumberFormat, and staggered entry animations.

Grouping rows into day buckets

The data is a flat TXNS array; render() folds it into day buckets in a single pass. It walks the filtered rows in order and either appends to the current bucket or starts a new one when the day changes, accumulating a running net total per bucket as it goes. Because the grouping happens at render time rather than in the data, the same array can be re-filtered (all / income / spending) and regrouped instantly — the day headers and their net totals always reflect exactly the rows on screen, so switching to "Spending" shows each day's total outflow rather than the mixed net.

Sticky date headers

Each day header uses position: sticky; top: 0 inside the scrollable list, so as you scroll, the current day's label pins to the top and is pushed away by the next one — the signature interaction of mobile banking feeds. The header carries the day's net total right-aligned, formatted with a leading + when positive. Sticky positioning needs an opaque background (#fff here) or rows would show through while pinned.

Real currency formatting

Amounts never go through manual string concatenation. new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }) handles the dollar sign, thousands separators, two-decimal padding, and — crucially — negative formatting, so -84.12 renders as -$84.12 without sign-juggling code. Change two constructor arguments to localise the whole list to EUR, GBP, or INR. The amounts also set font-variant-numeric: tabular-nums so digits align vertically down the column, which matters as soon as two rows sit next to each other.

Category icons without an icon font

Each transaction names an icon key, a pastel tint for the 40px rounded square, and a stroke colour, and the ICONS map holds six inline SVGs (bank, coffee, cart, refund, car, subscription). Inline SVG keeps the snippet dependency-free and lets the stroke colour be injected per transaction, so income rows read green and each spending category gets its own hue — the visual scanning aid that makes these lists parseable at a glance.

Filter tabs and the empty state

The pill tabs write a filter key (all, in, out) and re-render; filtering is a one-line predicate on the sign of amount. If a filter produces no rows the list renders an explicit empty-state message instead of a blank area — a small detail that separates production UI from demos. Rows animate in with a 40ms staggered translateY fade (the same cascade technique as the animated list), so every filter switch feels responsive rather than jarring.

Customisation

Feed TXNS from your API (map day from a date formatter like Intl.DateTimeFormat with relative labels for today/yesterday), extend ICONS with your categories, and adjust the max-height to fit your layout. Clicking a row is already wired as a pointer target — attach a handler to open a detail sheet or a bottom sheet with the full transaction.