Report Builder — Examples Hub
Report Builder is one of the largest modules in the library. Instead of a single page trying to explain everything, this section is split into focused feature pages. Start with the combined examples to see the shape of reports in general, then jump to the specific feature page that matches what you are building.
Every page here is driven by real ReportViewer and ReportBuilder instances running on a shared store. There is no static markup or screenshots — if you can click it on screen, you are exercising the live component.
Where to look
Pick the section that matches your goal. "New" pages ship in this release; "Soon" placeholders exist so links from Navigation do not 404 while I'm working through the backlog.
Feature deep-dives
Strengths
What sets this module apart from "build a form, submit, render a template" reporting tools.
Pure JSON definition
Every report is serialisable JSON. Persist it, diff it, version-control it. Render anywhere with ReportViewer.
Visual drag-and-drop builder
ReportBuilder is a full VS Code-style editor — toolbox, design surface, properties, styles, console. Not a config wizard.
Typed expression language
No eval. A hand-written tokenizer / recursive-descent parser with Datasources, Parameters, Variables, Field, RowGroup, ColGroup namespaces and 40+ built-ins.
Parameters vs Variables
Parameters are host-owned inputs (validation, datasets, Apply-on-click). Variables are in-report writable state — click actions, drill-through.
Recursive tables
Column trees with nested headers (colSpan/rowSpan), multi-level row groups, per-bucket variables, head/footer rows, multi-item cells, click actions, pivot mode.
Eleven chart types
Bar, H-Bar, Stacked Bar, Line, Area, Pie, Donut, Polar Area, Radar, Scatter, Bubble — every Chart.js option exposed as a typed prop.
Sub-reports
A report can embed other reports with parameter mapping. This is nothing more than a reusable ReportDefinition loaded by the viewer.
Datasource plugins
Anything with a fetch(config, parameters) function is a plugin. Ships with Static JSON, HTTP, Jira, CSV — add your own.
Derived datasources
Flatten, pick, filter, computed transforms chain on top of any datasource. Filter a parent dataset per-parameter without a round-trip.
Library-store driven
These example pages share state through a single fluxo-ui create() store. Edit a sub-report in its own page — the parent example reflects the change.
Accessible by default
ARIA roles, keyboard navigation, focus management, high-contrast dark mode, and visible focus on every control.
PDF export + print
ReportViewer exposes exportPdf, print, refresh via viewerRef. Print-stylesheet switches the doc to a single-column page layout.
Mental model
A single read-only JSON shape, the ReportDefinition, captures everything: metadata, datasources, parameters, variables, a component tree, and global styles. The builder edits that shape; the viewer renders it.
Datasources are declared once at the top of the report and referenced by id throughout. Parameters flow into them (useful for server-side filtering) and into expressions. Variables are the opposite — they are set by user interaction inside the report (drill-through, cell click, chart click) and read by expressions to re-evaluate conditional formats, visibility, chart titles, and so on.
Component props that can vary are strings. A string beginning with = is evaluated as an expression; anything else is a literal. This keeps the data shape simple and serialisable while still supporting full dynamic binding.
Sub-reports are just other reports. The parent passes a parameter map — each key is a parameter name on the child; each value is either a literal or an expression evaluated in the parent's context. The child receives them, fetches its own datasources, and renders inline.