Examples

Runnable code lives in the repo under apps/playground and examples/sample-dataset.ts — this page points at what each one shows.

React playground

apps/playground is a Vite + React app wired to the sample dataset below. It's the only example with the full toolbar, widget wizard, and settings panel.

cd apps/playground
npm install
npm run dev

The sample dataset

examples/sample-dataset.ts exports sampleOrders (100,000 generated order rows: region, customer, amount, previous_amount, created_at) and sampleDashboardConfig — a KPI card, a monthly revenue trend chart, a filter panel, and a virtualized orders table, all filterable by date range and region.

import { sampleOrders, sampleDashboardConfig } from '../../examples/sample-dataset';

<DatastripesDashboard data={sampleOrders} config={sampleDashboardConfig} mode="edit" />

100k-row dataset

The sample dataset is deliberately sized at 100,000 rows to exercise the in-memory query engine, the virtualized table, and chart aggregation at the scale the product targets. With no apiKey configured, the trial license caps it at 1,000 rows and shows the licensing banner — pass a valid key to see the full dataset. See Licensing.

Calculated fields

Open Settings → Calculated fields in the playground and add one, e.g. id: margin, formula: amount - previous_amount. It becomes selectable as a metric in any widget immediately — no formula re-entry needed elsewhere.

Drill-down & cross-filter

Enable Clickable rows on a table widget (in its configuration) to fire a row_click action on click — wire onAction (React) or listen for ds-action (vanilla/Elements) to open a detail view. Clicking a category/point on a chart automatically toggles that value on any global filter bound to the same field — no extra configuration needed beyond having both the filter and the chart reference the same field.

Multi-level sunburst / treemap

Pick Sunburst or Treemap in the chart wizard, then use "Add level" to nest dimensions (e.g. region → product → SKU) instead of a single flat category.