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

Borders hide group borders hide row borders hide index border hide thead border

Output

Event

HTML

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

Specifications

Attributes

src
locale
na-rep (default: "-")
borders:

hide-group-borders
hide-row-borders
hide-thead-border
hide-index-border

Custom properties

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

Events

data-changed
cell-click

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