Data-Viewer

Web component

<data-viewer> is a web component for viewing table data:

Vanilla JS (no dependencies)
Reads json from url
Supports multi-index data structures

On this page you will find several examples of what you can do with this web component.

Data Source

Locale Nederlands English

Styling hide group borders hide row borders hide index border hide thead border no wrapping

Output

Event

HTML

<!-- html -->
<data-viewer src="data/example.json" locale="nl-NL"></data-viewer>

Specifications

Attributes

src — JSON data source URL
locale — format locale (default: "default")
na-rep — null value representation (default: "-")
height — component height (default: "600px")
view — display mode: "table" or "record"
no-wrap — disable cell text wrapping
hide-filter-row — hide filter inputs
Borders:
- hide-group-borders
- hide-row-borders
- hide-thead-border
- hide-index-border

CSS custom properties

--background-color (default: white)
--cursor (default: auto)
--border-color (default: currentColor)
--axes-width (default: 2px)

Events

data-changed — fired when data is loaded or updated
cell-click — fired on cell interaction
field-click — fired on record field interaction
column-data — fired on Ctrl+click (column extraction)
row-data — fired on Shift+click (row extraction)

Keyboard shortcuts

Ctrl+F — focus first filter
Ctrl+H — toggle filter row visibility
Ctrl+R — toggle table/record view
Escape — clear all filters (when not in input)
Arrow keys — navigate headers, filters, and rows
Enter — enter record view from focused row

github.com/flatbread-dataframes/flatbread-wc-data-viewer