Examples › data-ui › Raw source: a CSV as it is
Raw source: a CSV as it is
The data behind the views as a plain grid, for debugging: every key of every row, each value exactly as stored, and a row's record as it sits in its file. Here a small CSV carries the values that usually go wrong between a file and a view, and the table beside it shows the same rows as the kit normally draws them.
The .base file and its data
Every tab above is one entry of this file; the views read these rows. ⋯ in the toolbar copies the current view as YAML.
# A CSV with the values that trip a viewer up: a quoted comma, a line break inside a field, leading and trailing
# spaces, empty fields, a price that is text ("1.50"), keys the schema does not declare. The raw source view shows
# each as stored and the record's lines verbatim; the table beside it is the same rows as the kit normally draws them.
# Check it: node bin/data-ui.mjs check gallery/examples/raw-source/views.base
data: parts.csv
views:
- type: source
name: Raw source
- type: table
name: Table
order: [sku, name, price, qty]
sku,name,price,qty,note,colour
A-1,"Bolt, M3 x 8",1.50,100,plain,silver
A-2, padded ,0.25,40,"two
lines",black
A-3,"""Quoted"" washer",12,,"",
A-4,Nut M3,1.0,7, ,silver
A-5,Spring pin 2 x 10,0.80,0,"semi;colon, comma",
parts.schema.json, README.md
{
"name": "parts",
"title": "Parts (deliberately awkward)",
"titleProperty": "name",
"schema": {
"fields": [
{ "name": "sku", "type": "string", "title": "SKU" },
{ "name": "name", "type": "string", "title": "Name" },
{ "name": "price", "type": "string", "title": "Price", "description": "text on purpose: 1.50 stays 1.50, never 1.5" },
{ "name": "qty", "type": "integer", "title": "Quantity" }
]
}
}
# Raw source: a CSV as it is
The data behind the views as a plain grid, for debugging: every key of every row, each value exactly as stored, and
a row's record as it sits in its file. Here a small CSV carries the values that usually go wrong between a file and
a view, and the table beside it shows the same rows as the kit normally draws them.
- **App:** data-ui
- **Replaces:** opening the data file in a text editor or a spreadsheet to see what a view is really drawing from
(a spreadsheet re-reads `1.50` as 1.5 and trims spaces; an editor shows a 2,000-row JSON file as one line).
- **Shows:** `type: source` (docs/CONTRACT.md §24): the columns are the union of the rows' keys (the auto-assigned
`id` and the undeclared `note` and `colour` too), `" padded "` with its spaces, `null` for an empty field, `"1.50"`
kept as text by the schema, the record's two lines for the field with a line break; the info strip (data file,
`.base`, CSV, bytes, rows, columns), Copy and Export CSV, and the source panel with the header line and the record's
lines numbered. Then `type: table` over the same rows: the four declared columns, drawn as usual.
- **Data:** `parts.csv` (5 records, CRLF line ends, one quoted field over two lines) and `parts.schema.json` beside it,
which types `price` as text and declares four of the six columns. Hand-written for this case.
The original UI it replaces
opening the data file in a text editor or a spreadsheet to see what a view is really drawing from (a spreadsheet re-reads 1.50 as 1.5 and trims spaces; an editor shows a 2,000-row JSON file as one line).
What it shows
type: source (docs/CONTRACT.md §24): the columns are the union of the rows' keys (the auto-assigned id and the undeclared note and colour too), " padded " with its spaces, null for an empty field, "1.50" kept as text by the schema, the record's two lines for the field with a line break; the info strip (data file, .base, CSV, bytes, rows, columns), Copy and Export CSV, and the source panel with the header line and the record's lines numbered. Then type: table over the same rows: the four declared columns, drawn as usual.
Data
parts.csv (5 records, CRLF line ends, one quoted field over two lines) and parts.schema.json beside it, which types price as text and declares four of the six columns. Hand-written for this case.