Importing
The data importer takes the spreadsheet your customer already has — CSV, TSV, an Excel workbook or JSON — and turns it into clean, checked rows for your application, without the file leaving the browser. Drop a file or paste rows; the importer finds the separator, the encoding and the heading row, and matches the columns to your fields by name, by the names you say they also go by, and by what the values look like.
Every value is read into its field's type — dates day-first or month-first, numbers with either decimal mark, yes/no, emails, list values by name — and checked against your rules. Problems are marked in a grid of only the rows in view, to fix in place, with duplicates found and bad rows removed in one go, and undo. Then your page gets the records, and can say no.
Importing customers
A customer export from another system: semicolons, day-first dates, decimal commas, and a few rows that need fixing — a bad email, a negative limit, a duplicate, the 31st of February, a missing ID and a country that is not on the list. Load it, or drop your own file.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-data-importer id="im-customers" label="Import customers" style="inline-size: 100%"></bmx-data-importer>
A stock take from Excel
A real .xlsx workbook with a title above its headings, two sheets, dates and money in Excel
formats, and a value column worked out by formulas — calculated here, as Excel would. The bin
must be one of the warehouse's bins, counts whole numbers, and the item code appear once.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-data-importer id="im-stock" label="Import a stock take" style="inline-size: 100%"></bmx-data-importer>
Your server has the last word
A price list going to a server that already knows some of the codes. The first time you import, it answers that two exist; the importer stays on the review with the server's message. Remove those rows and import again.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-data-importer id="im-prices" label="Import prices" style="inline-size: 100%"></bmx-data-importer>
A hundred thousand rows
The page writes a CSV of a hundred thousand transactions — about six megabytes — and hands it to the importer, which reads it a piece at a time with progress, then checks every row. The review grid draws only the rows in view.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-data-importer id="im-transactions" label="Import transactions" style="inline-size: 100%"></bmx-data-importer>