Export Failed Error Block for React

From typed data: 27 monthly record counts (January 2024 to March 2026), a typed number of bytes per record and the typed 100 MB limit. The total, the share (71%), the records still to go, every file's records and every file's size are worked out from those, so the text and the table always agree. In your app, read the counts from your database and the limit from your export service.

Each choice groups the same 27 months into files named for their date range: three years, nine quarters or twenty-seven months, with each file's records summed and its size taken from the records. The line above the table says how many files there are, the size of the largest, and whether every file is under the limit. Changing the choice starts the queue over.

Yes. The first five rows are built into a CSV in the browser and handed to the browser's download by a Download Trigger. A cell with a comma or a quote is quoted ("Cole, Marsh and Pike", "The ""Flour"" Mill"), and a cell that starts with an equals sign, a plus, a minus or an at sign is prefixed with an apostrophe so a spreadsheet keeps it as text instead of running it as a formula. It is a sample, not your export, and the page says so.

Nothing is exported. Each press queues the next file in this demo and says which one, so a viewer can step through all of them; the table marks the queued ones in words as well as for screen readers. When every file is queued the button says so and stays on the page. Start over puts the demo back.

It is a native table with a caption, column heads and a row head for each file, inside a named region that takes focus so the list scrolls with the keyboard. Its height is fixed, so changing from years to months changes the rows, never the page.

The heading, the bar and two facts come first, then the partial file, then the plan; the Start export button is pinned to the foot of the screen, with Start over as an icon beside it, and the table is shorter so the page stays compact.