Email Campaigns Table Block for React

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.

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.

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.

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.

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.

Status folds under the name ("Sent Oct 8"), Revenue goes and the Clicks bar goes, leaving Campaign, Sent, Opens and Clicks with the first two bars. Nothing scrolls sideways at 320 pixels, and the table is the same height in both modes.