title	data-viewer demo
author	Patrick Hall

A simple table visualizer for JSON data. A web component.

There are currently three ways to use the <data-viewer> web component:

Add JSON data directly inside the HTML markup of the component instance

<data-viewer>
[{"a": 1, "b": 2}, {"a": 10, "b": 20}]
</data-viewer>

Which will look something like this:

a	b
1	2
10	20

Use the src attribute to a JSON file

You can render an external JSON file via the src attribute, like this:

<data-viewer src="interesting-data.json"></data-viewer>

Which will of course depend on whatever’s in the file interesting-data.json.

Set data directly via Javascript by assigning to the .data property

If you get a reference to a <data-viewer> element, you can set data directly, like this:

<data-viewer id=boss-car>
</data-viewer>

<script type=module>
import {DataViewer} from './DataViewer.js'

let carDetails = {
  "year": 1958,
  "make": "Plymouth",
  "model": "Belvedere",
  "features": [
    "4 door",
    "radio",
    "heater",
    "automatic transmission",
    "31000 miles",
    "like new"
  ]
}

let bossCarDataViewer = document.querySelector('#boss-car')
bossCarDataViewer.data = carDetails
</script>

year	1958
make	Plymouth
model	Belvedere
features	4 door radio heater automatic transmission 31000 miles like new

GitHub’s CSS makes the tables look a bit kooky here.

It’s much easier to just try out the demo here:

demo

There is some very not-done documentation which will hopefully get better here:

data-viewer.html