shadcn.io is not affiliated with official shadcn/ui
Import and Export Settings Block for React Aria
An 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.
Installation
Overview
Show what an import will do before anyone runs it, with this import rules panel for React with React Aria. Inside a hairline frame with a plus mark on each corner, three rules sit beside a dry run: a Native Select chooses the column that decides that two rows are the same item (SKU, barcode or name), a Segment Group chooses what happens when a row matches (skip it, update the item or create a duplicate) and another chooses what an empty cell means (keep the existing value or clear it). The dry run takes a sample file of eight rows, compares each with the five items already on file and writes its verdict in the row: new, an update of so many fields with the first change spelled out, no change, or skipped and why. Four figures add the verdicts up, and the column that decides a match is shown in full strength in each row, so switching the match key from SKU to barcode visibly re-sorts rows (a row with no barcode is skipped, one with no SKU is not). The header's outline button downloads a real CSV holding only the template's header row, through a Download Trigger. The last band counts unsaved rule changes in a status line beside a Shine Button to save them and an outline Button to discard them. On a phone each row is a card and the save bar stays pinned to the bottom of the screen. It's built from Native Select, Segment Group, Download Trigger, Button, Shine Button and Guides, with a CSS entrance only. For inventory, catalog or CRM products where an import can overwrite what people already have.
FAQ
How do I fill it with my own items and columns?
Edit the constants at the top. COLUMNS is the template's header row in order, ON_FILE is the items already in your system, INCOMING is the sample file and KEYS lists the columns a match can be made on, each with the words used when that column is blank. The verdicts, the four totals and the status line are all computed from these by the same small functions, so adding a column means adding it to COLUMNS, FIELD_LABELS and the data.
How does the dry run decide what each row is?
In this order. A row with nothing in the match column is skipped, because there is nothing to match on. A row whose value matches no item is new. A matching row is then handled by the second rule: skipped, turned into a second item, or compared field by field with the item, where a field counts as a change when the file's value is different and not empty, or when it is empty and the third rule says to clear it. A matching row with no changes is "No change". The comparison ignores case and surrounding spaces for the match, not for the fields. All of it runs on the typed rows in plain functions.
What does Download template give me?
A real file: a CSV named tolmoor-import-template.csv whose only line is the header row (sku,barcode,name,qty,price), made in the browser by the Download Trigger. It is the one thing here that produces a file. Change TEMPLATE and COLUMNS to match your own import and the button follows.
What stays local, and how do I make it real?
Everything. No file is chosen, read or uploaded, and nothing is imported: the rows are typed into the page and Save only keeps the three rules in the page's state, saying so in the status line. To make it real, let people choose a file, parse it, and run the same verdict function on the parsed rows (or send the rules to your server and show its dry run), then import on a separate, confirmed step. Mapping the file's columns to yours belongs to an import dialog, not to rules.
Is the dry run announced to screen readers?
Yes. Each change to a rule sets the status line to the four totals ("2 new, 3 updates, 1 unchanged, 2 skipped."), and while there are unsaved changes the unsaved count is shown and the totals are kept for assistive technology. Each verdict is also written out as words in its row, with a glyph beside it, never a color. The table is a native table with a caption and row headers.
How does it look on a phone?
The three rules sit in a row above the dry run from the small breakpoint up and stack on the smallest screens. Each row of the file becomes a card with the name, the result, the two codes and the first change, all at a fixed height so switching a rule never moves anything. The save bar is pinned to the bottom of the screen. The match key is a native select, so the browser's own picker opens on a phone.