Vanilla JS / Web Components

No framework at all: a <datastripes-dashboard> custom element, usable from a plain <script> tag.

Via a script tag

html

<script src="https://unpkg.com/@datastripes/dashboard/dist/elements/index.global.js"></script>

<datastripes-dashboard id="dash" mode="edit" api-key="..."></datastripes-dashboard>

<script>
  const el = document.getElementById('dash');
  el.data = myRows;          // set as a property for large datasets
  el.config = myConfig;      // DashboardConfig object
  el.addEventListener('ds-change', e => console.log(e.detail));
  el.addEventListener('ds-action', e => console.log(e.detail)); // row_click, filter_change
</script>

Via npm

import '@datastripes/dashboard/elements'; // self-registers <datastripes-dashboard>

Attributes & properties

Name	Form	Notes
data	attribute (JSON) or property	Use the property for datasets too large to serialize as an attribute
config	attribute (JSON) or property	Validated with `safeParseDashboardConfig`; invalid JSON logs a warning and is ignored
mode	attribute or property	"view" \| "edit"
api-key	attribute, or `apiKey` property	Checked via checkLicense() whenever set

Events

ds-change — fired on every structural change, detail is the updated DashboardConfig.
ds-save — fired by calling the element's save() method.
ds-action — row-click drill-down and chart click-to-filter events, detail is a DashboardActionEvent.

Lower-level: mountDashboard()

The custom element is a thin wrapper around the same mountDashboard() function used internally by Vue and Angular. Call it directly against any DOM element if you don't want a custom element at all:

import { DashboardStore, JsQueryEngine, mountDashboard } from '@datastripes/dashboard';

const store = new DashboardStore({ config, data: rows, engine: new JsQueryEngine() });
const renderer = mountDashboard(document.getElementById('app'), { store, data: rows, mode: 'view' });

// later:
renderer.destroy();