shadcn.io is not affiliated with official shadcn/ui
Batch Import Complete Notification Block for React
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 Base UI. 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.
Related
- Pro
Data Import Success
Backups and exportsA confirmation panel for a finished CSV import: one bar split into imported, duplicate and failed rows by their counts, a scrolling ledger of the failed rows with the problem and what the file had, and a real CSV error report built from the typed rows.
- Pro
Import Failed Error
Files and dataA panel for a CSV import that skipped rows: a strip of counts that follow the page, a table of the first five errors each with a suggested fix and an Apply fix button, a Shine Button that follows the count, and a real CSV error report.
- Pro
An admin console's audit log as a sortable table of twelve events with an action filter, rows that open to their IP address, session and before and after values, and a real CSV download of exactly the rows showing.
- Pro
Export Table
Select and actA sales table with a search and row checkboxes and an Export dialog that asks which rows (visible, selected or all, with counts), whether to include hidden columns and a file name, then downloads a real CSV, shown open in place.
- Pro
A finished CRM export as a narrow file card: choose CSV or JSON to rewrite the file name and its estimated size, then download a real file of the first five contacts.
- Pro
Import and Export Settings
Backups and exportsAn import rules panel with a dry run: three rules decide how rows match items on file, and a sample file of eight rows shows each row's verdict and four totals that change as the rules do, plus a real header-row CSV template to download.