React

The React entry is the richest of the four: a full toolbar (light/dark, edit mode, PDF export, period navigator), a widget-creation wizard covering all 25 chart types, and a settings panel (number formatting, calculated fields, column labels).

Install

bash

npm install @datastripes/dashboard react react-dom

Basic usage

tsx

import { DatastripesDashboard } from '@datastripes/dashboard/react';
import type { DashboardConfig } from '@datastripes/dashboard';

function App() {
  const [config, setConfig] = useState<DashboardConfig | undefined>();

  return (
    <DatastripesDashboard
      data={myRows}
      config={config}
      mode="edit"
      apiKey={import.meta.env.VITE_DATASTRIPES_KEY}
      onChange={setConfig}
      onSave={saved => persistToBackend(saved)}
      onAction={event => console.log(event)}
    />
  );
}

Props

Prop	Type	Notes
data	Record<string, unknown>[] \| ArrayBuffer	Row-oriented array (or Arrow buffer, reserved for a future engine)
schema	ColumnSchema	Optional — auto-inferred from `data` when omitted
config	DashboardConfig	Optional — an empty dashboard is used when omitted
mode	'view' \| 'edit'	Initial mode; the toolbar lets the user toggle it afterwards
apiKey	string	Passed to `checkLicense()` on mount — see Licensing
onChange	(config) => void	Fires on every structural change (layout, filters, widgets)
onSave	(config) => void	Fires when the user clicks Save in edit mode
onAction	(event) => void	row_click, filter_change — drill-down and cross-filter events

Editing a dashboard

In mode="edit", the toolbar's Add widget button opens a short wizard: pick the widget type (big cards with a description), then — for charts — pick the chart kind from the full catalog, then configure it (fields, colors, axis labels, stacking). Clicking the gear icon on an existing widget reopens the same form pre-filled, for editing.

Chart types in the Distribution, Relationships & flow, and Specialized groups (heatmap, graph, sankey, parallel coordinates, gauge, funnel, candlestick, box plot, calendar heatmap) are gated behind a valid license. See Licensing.

Exported components

If you want to compose your own layout instead of the full DatastripesDashboard, the individual pieces are exported too:

DashboardToolbar, Modal, AddWidgetModalContent, SettingsModalContent
KpiCardWidget, EchartsWidget, TableWidget, FilterPanelWidget, MarkdownWidget
WidgetFrame — the drag/resize chrome around any widget