Examples gallery

Each example is a template and a data file. Open one in the playground to see it, change it in the designer, or switch between React and Vue. Download the JSON to use it as a starting point in your own project.

Product catalog

A 140-row table over several pages with a repeating header, page numbers, conditional red stock levels and a total.

paginationconditional stylefooter totals

Open in playgroundTemplateData

Sales by customer

Groups with a header and a subtotal footer per customer, sorted rows and a grand total.

groupssortingsubtotals

Open in playgroundTemplateData

Orders with items

Master-detail: every order row is followed by its line items and an order total.

master-detailnested data

Open in playgroundTemplateData

Invoice status

Conditional styles colour the status cell and highlight large amounts and overdue invoices.

conditionscurrency

Open in playgroundTemplateData

Account notes

Text with bold, italic, underline, colour and line breaks through the allowHtml option.

allowHtmlA5

Open in playgroundTemplateData

گزارش فروش (Persian)

Persian text and digits through the fa-IR locale, Jalali (Persian calendar) dates, and a right-aligned layout.

localefa-IRJalali calendar

Open in playgroundTemplateData

Using an example

import template from './sales.template.json';
import data from './sales.data.json';

<ReportViewer template={template as ReportTemplate} data={data} />