/data-viewer

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

Primary LanguageJavaScript

data-viewer

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:

ab
12
1020

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