shadcn.io is not affiliated with official shadcn/ui
Email Campaigns Table Block for Svelte
An email campaigns table with a data bar under every result sized to the column maximum, a Counts and Rates toggle that changes the numbers and bars together, status words with dots, sortable heads and a line naming each bar scale.
Installation
Overview
Compare results down a column at a glance, with this email campaigns table for Svelte with Ark UI. A compact header holds a Toggle Group with Counts and Rates. Inside a hairline frame with a plus mark on each corner, a band says the mode and the order, over a native table of seven Dispatchwing campaigns with a status and four results. Under each result is a thin bar sized to the largest value in its column, so you can compare without reading: not a share of a whole, only a length against the best in the column. Counts shows messages sent, opens, clicks and revenue; Rates shows delivery rate, open rate, click rate and revenue per thousand delivered, and the bars follow. Status is a word in an outline Badge with a filled, half-filled or hollow dot for Sent, Scheduled and Draft, and campaigns with no results show a dash and sort last. The heads sort, and a closing band says what each bar is scaled to. It is built from Toggle Group, Badge and Guides, with CSS data bars and a CSS entrance only. For email tools, ad reports, campaign lists and any table where columns are read against each other.
FAQ
What does a bar mean, and is it a progress bar?
It is not a progress bar. Its length is the cell's value divided by the largest value in the same column among the sent campaigns, in the mode you are in. A full bar is the best in the column, a half bar is half of the best. The line under the table states each column's scale ("Sent 18.4K") so the maximum is never a secret.
What do Counts and Rates calculate?
Counts are the typed numbers. Rates divide them: delivered over sent, opens over delivered, clicks over delivered, and revenue per thousand delivered messages. The heads rename themselves (Sent becomes Delivered, Opens becomes Open rate), the sort follows the figures on screen, and the bars are rescaled to the new maxima.
How do I use my own campaigns?
Edit CAMPAIGNS: a name, a status, a date, and sent, delivered, opens, clicks and revenue. A scheduled or draft campaign has zeros and a status that is not sent, and hasResults keeps it out of every maximum. Add a column by writing its Column constant, a case in amountOf and a Result cell.
How do sorting and empty rows work?
A head's first press gives the order it starts with (names A to Z, results highest first), the second reverses it and the third returns the campaigns to the order they were made. Campaigns without results always sit last in a result sort, in either direction, so a dash never outranks a number. The sorted head has aria-sort and a polite line reads the mode and the order.
What stays local, and how do I wire real data?
Everything: the numbers are constants and the mode and order are two useState calls. To use a real email provider, load campaign totals from its reporting API and map them to the fields above; rates and bars are derived, so nothing else has to be stored.