Sample Data Onboarding Block for React

Edit SAMPLES. Each set has an id, a title, a blurb, a noun (what a row is called), its columns (each says whether it stays on a phone), counts (the first one is the row total) and exactly five rows, each with its cells in column order. Keep five rows per set so the table never changes height. The counts are typed once and read everywhere: the row's hint, the counts, the caption and the status sentence.

Every place that mentions the data says so: “Showing 5 of 120 orders. All of it is made up.” under the table, “They are marked as samples” in the status, and the buttons say “sample data”. Loading and removing change only a typed state in the tab, and the status adds “Your own data was not touched.” when the samples are removed. Nothing is stored or sent.

The picked set decides what the button says. If it is the loaded one the button reads Loaded and stays quiet: pressing it says the samples are already loaded and how to load them again. Picking a different set makes the button say Load sample data again, and pressing it replaces the loaded set. Remove sample data is always there; with nothing loaded it says there is nothing to remove.

A native table with a caption, scope on its heads and a focusable scroll region is the simplest accessible table, and it is the same on every base. Each column says whether it is phone; the others are hidden below the small breakpoint, so a phone shows three columns that fit without sideways scrolling.

Everything: the rows are typed in the file and Load sample data only says it loaded them. In your app create the sample records on your server where load says so, tag them as samples so they can be found and removed together, and delete exactly those where remove says so.

The three sets are one radio group: Tab reaches it, the arrow keys move between sets and pick the one they reach, and the table and the buttons follow in the tab order. The status is one polite region, so each result is spoken once.