Import Failed Error Block for React

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.

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.

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.

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.

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.

The same button reads Undo once a row is fixed, and puts the original error back with its count. Start over, always on the page, puts all five rows and the import result back to the start.