shadcn.io is not affiliated with official shadcn/ui
Import Failed Error Block for Radix UI
A 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.
Installation
Overview
Let people fix what the importer can suggest and move on with the rest, with this import failed panel for React with Radix UI. It's the panel Namebarn, a contacts manager, shows after a CSV import skipped rows: a compact header over one framed panel on plus-marked corners made with Guides. A strip of three cells counts the rows in the file, the valid ones and the errors (248, 235 and 13), and a native table lists the first five errors with the row, the column, the problem, the value as typed and a suggested fix with an Apply fix Button. Applying a fix turns the row Fixed in place, and Undo takes it back, so nothing moves; the counts follow ("238 valid, 10 errors"), and so does the Shine Button, "Import 238 valid rows". "Download error report" is a real CSV of all thirteen, made with a Download Trigger. It's built from Download Trigger, Shine Button, Button, Badge and Guides, with a CSS entrance only. For any product that imports data from files.
FAQ
How do the counts and the button label stay right?
They are worked out from the typed list of thirteen errors and the list of rows you have fixed: valid rows are 248 minus the errors still open, and errors are the errors still open. The strip, the label on the button, the "n of 5 fixed" count and the status line all read from that, so they can't disagree.
Where do the suggested fixes come from?
They are typed with the error, each with the reason it is what it is: the domain taken from the Company column, an area code from the row's city, the ISO code for a country, the last day of a month, a doubled @ dropped. A real importer would work them out from the row and the rules of the column. The other eight errors have no suggestion because a person has to decide; they are in the report.
Is the error report a real file?
Yes. All thirteen errors are written to a CSV in the browser, with the row, column, problem, the value as typed, the suggestion and whether it is Fixed or Open, and handed to the browser's download. A cell with a comma or a quote is quoted, and a cell that starts with an equals sign, a plus, a minus or an at sign gets an apostrophe in front, so a spreadsheet keeps it as text instead of running it as a formula; row 203 is there to show it.
What does the import button do?
Nothing is imported. It waits a moment and says in a polite status line that the valid rows were imported in this demo, that nothing was sent and how many rows were skipped; pressing it again says it was already done. Fixing or undoing a row after that clears the result. In your app, send the valid rows, and the fixes, from the submit handler.
Is the table accessible, and what happens on a phone?
It is a native table with a caption, column heads and a row head for each error, and each fix button names its row and column. Below the medium breakpoint each error becomes a card from the same markup, with the column's name beside the row, and from the large breakpoint the Column column returns as its own. The row height is fixed, so fixing a row changes words, never positions.