shadcn.io is not affiliated with official shadcn/ui
Batch Import Complete Notification Block for React Aria
A finished bulk import as a two-part result bar with counts, a collapsible table of the sixteen rows that failed, and a real CSV error report you can download.
Installation
Overview
Say what an import did and hand back what needs fixing, with this batch result for React with React Aria. It is Bulkbay, a bulk import tool, in a framed panel with a plus mark on each corner. The first band is a bar from rail to rail, the rows that went in solid and the rows that did not hatched, drawn from the counts, over a Data List of the figures: imported, failed, total rows and how long it took. The second band is a Collapsible, open on load, named for the number of rows that need attention, with a table of those rows in a scroll region of a fixed height: the row, the field and what is wrong. The foot ends in "Download error report", the one Shine Button and a real Download Trigger of those rows as a CSV, and "Retry failed rows", an outline Button that says it was queued in this demo. Guides draw the lines. For imports, migrations, bulk updates and any job that finishes with a few rows left to fix.
FAQ
How do I fill it with my own import?
Edit PROBLEMS (each failed row has its row number, the field, the problem in words and the value that failed) and IMPORTED. The failed count, the total, both percentages and the width of the hatched part of the bar are worked out from them, so the numbers cannot disagree with the table. In your app pass the rows your importer rejected and the number it accepted.
What does the error report contain?
A header row and one row per failed row, in file order: the row number, the field, the problem and the value that failed. Any cell with a comma, a quote or a line break is quoted, and a cell that starts with =, +, - or @ is kept as text so a spreadsheet cannot read it as a formula. The file is built in the browser and saved by the download trigger as bulkbay-import-errors.csv; nothing is uploaded.
What really happens when I press Retry failed rows?
Only this page changes. The button turns into a quiet "Queued (demo)" and a polite line says that 16 rows were queued and nothing was imported. No row is read again and nothing is sent. In your app call your importer from retry with the rows still failing, and show its next result in the same panel.
Is the result bar readable without colour?
Yes. The two parts differ by pattern (solid and hatched), each has a small mark of the same kind next to its figure, and the whole bar is an image with a sentence for a name: 2,831 of 2,847 rows imported, 16 failed. The failed part is never narrower than a minimum, so a handful of failures among thousands is still visible.
How does the table behave on a phone and with the keyboard?
The table sits in a region of a fixed height that scrolls inside the panel, so opening or closing the list is the only thing that changes the panel's height. The region can be focused, the head stays in view while it scrolls, and each row's number is its row header. The table has three narrow columns so it fits at 320 px without a sideways scroll.