Styles and conditions
Style properties
Section titled “Style properties”| Property | Values |
|---|---|
fontFamily |
Helvetica, Times, Courier, or a registered font |
fontSize |
points |
fontWeight / fontStyle |
normal, bold / normal, italic |
textDecoration |
none, underline, line-through |
color / backgroundColor |
#rgb, #rrggbb, #rrggbbaa, rgb(), rgba() or transparent |
textAlign |
left, center, right, justify |
verticalAlign |
top, middle, bottom |
direction |
auto (default: the first strong letter decides), ltr, rtl. Right-to-left text is right-aligned unless textAlign is set |
padding |
one number, or { top, right, bottom, left }, in template units |
border |
{ width, color, style, sides }: width in points, style is solid, dashed or dotted, sides is a list of top, right, bottom, left (default all) |
Lines take their width, color and dash from border. Rectangles are filled with backgroundColor and outlined with border.
Named styles
Section titled “Named styles”Define styles once in styles and refer to them by name. A component’s own style is applied on top:
{ "styles": { "th": { "fontWeight": "bold", "color": "#fff", "backgroundColor": "#334155", "padding": 1.5 } }, "body": [{ "kind": "band", "id": "b", "height": 7, "components": [ { "id": "h", "type": "text", "x": 0, "y": 0, "width": 40, "height": 7, "styleName": "th", "style": { "textAlign": "right" }, "text": "Total" } ]}]}In the designer, Save as style turns a component’s style into a named one.
Conditions
Section titled “Conditions”conditions apply extra styles when an expression is true. Matching conditions are applied in order, after the named style and the inline style:
{ "id": "status", "type": "text", "text": "{{ upper(row.status) }}", "conditions": [ { "expression": "row.status === 'paid'", "style": { "color": "#15803d", "backgroundColor": "#dcfce7" } }, { "expression": "row.status === 'overdue'", "style": { "color": "#b91c1c", "backgroundColor": "#fee2e2" } } ]}import { ReportViewer } from '@ariana-reports/react';import { invoicesData, invoicesTemplate } from './report-data';
export default function ViewerConditional() { return <ReportViewer template={invoicesTemplate} data={invoicesData} zoomMode="fitWidth" />;}<script setup lang="ts">import { ReportViewer } from '@ariana-reports/vue';import { invoicesData, invoicesTemplate } from './report-data';</script>
<template> <ReportViewer :template="invoicesTemplate" :data="invoicesData" zoom-mode="fitWidth" /></template>{ "schemaVersion": 1, "name": "Invoice status", "unit": "mm", "page": { "size": "A4", "orientation": "portrait", "margins": { "top": 12, "right": 12, "bottom": 12, "left": 12 } }, "dataSources": [ { "name": "invoices" } ], "styles": { "title": { "fontSize": 18, "fontWeight": "bold", "color": "#0f172a" }, "muted": { "fontSize": 9, "color": "#64748b" }, "th": { "fontSize": 9, "fontWeight": "bold", "color": "#ffffff", "backgroundColor": "#334155", "padding": 1.5 }, "td": { "fontSize": 9, "padding": 1.5, "border": { "width": 0.4, "color": "#e2e8f0", "style": "solid", "sides": [ "bottom" ] } }, "num": { "textAlign": "right" }, "sub": { "fontSize": 9, "fontWeight": "bold", "backgroundColor": "#e2e8f0", "padding": 1.5 } }, "reportHeader": { "id": "rh", "height": 22, "components": [ { "id": "title", "type": "text", "x": 0, "y": 0, "width": 186, "height": 9, "text": "Invoice status", "styleName": "title" }, { "id": "sub", "type": "text", "x": 0, "y": 10, "width": 186, "height": 10, "text": "{{ count(invoices, r => r.status === \"overdue\") }} overdue invoices, {{ formatCurrency(sum(invoices, r => r.status === \"overdue\" ? r.amount : 0), \"USD\") }} outstanding", "styleName": "muted", "style": { "fontSize": 10 }, "conditions": [ { "expression": "invoices.some(r => r.status === \"overdue\")", "style": { "color": "#b91c1c" } } ] } ] }, "pageFooter": { "id": "pf", "height": 8, "components": [ { "id": "pf_n", "type": "text", "x": 0, "y": 2, "width": 186, "height": 5, "text": "Page {{ page.number }} of {{ page.count }}", "style": { "fontSize": 8, "color": "#64748b", "textAlign": "right" } } ] }, "body": [ { "kind": "dataRegion", "id": "list", "dataSource": "invoices", "header": { "id": "head", "height": 7, "components": [ { "id": "h1", "type": "text", "x": 0, "y": 0, "width": 30, "height": 7, "text": "Invoice", "styleName": "th" }, { "id": "h2", "type": "text", "x": 30, "y": 0, "width": 60, "height": 7, "text": "Client", "styleName": "th" }, { "id": "h3", "type": "text", "x": 90, "y": 0, "width": 30, "height": 7, "text": "Due", "styleName": "th" }, { "id": "h4", "type": "text", "x": 120, "y": 0, "width": 36, "height": 7, "text": "Amount", "styleName": "th", "style": { "textAlign": "right" } }, { "id": "h5", "type": "text", "x": 156, "y": 0, "width": 30, "height": 7, "text": "Status", "styleName": "th", "style": { "textAlign": "center" } } ] }, "detail": { "id": "row", "height": 7, "components": [ { "id": "c1", "type": "text", "x": 0, "y": 0, "width": 30, "height": 7, "text": "{{ row.no }}", "styleName": "td" }, { "id": "c2", "type": "text", "x": 30, "y": 0, "width": 60, "height": 7, "text": "{{ row.client }}", "styleName": "td" }, { "id": "c3", "type": "text", "x": 90, "y": 0, "width": 30, "height": 7, "text": "{{ row.due }}", "styleName": "td", "format": { "type": "date", "pattern": "dd MMM yyyy" } }, { "id": "c4", "type": "text", "x": 120, "y": 0, "width": 36, "height": 7, "text": "{{ row.amount }}", "styleName": "td", "style": { "textAlign": "right" }, "format": { "type": "currency", "currency": "USD" }, "conditions": [ { "expression": "row.amount >= 5000", "style": { "fontWeight": "bold" } } ] }, { "id": "c5", "type": "text", "x": 156, "y": 0, "width": 30, "height": 7, "text": "{{ upper(row.status) }}", "styleName": "td", "style": { "textAlign": "center", "fontWeight": "bold", "fontSize": 8 }, "conditions": [ { "expression": "row.status === \"paid\"", "style": { "color": "#15803d", "backgroundColor": "#dcfce7" } }, { "expression": "row.status === \"overdue\"", "style": { "color": "#b91c1c", "backgroundColor": "#fee2e2" } }, { "expression": "row.status === \"open\"", "style": { "color": "#a16207", "backgroundColor": "#fef9c3" } } ] } ] } } ]}{ "invoices": [ { "no": "INV-0412", "client": "Contoso Ltd", "due": "2026-02-01", "amount": 4200, "status": "paid" }, { "no": "INV-0413", "client": "Fabrikam", "due": "2026-02-15", "amount": 980.5, "status": "overdue" }, { "no": "INV-0414", "client": "Northwind", "due": "2026-03-01", "amount": 15250, "status": "open" }, { "no": "INV-0415", "client": "Tailspin", "due": "2026-03-12", "amount": 310, "status": "paid" }, { "no": "INV-0416", "client": "Litware", "due": "2026-03-20", "amount": 7800, "status": "overdue" }, { "no": "INV-0417", "client": "Contoso Ltd", "due": "2026-04-02", "amount": 2650, "status": "open" } ]}Visibility
Section titled “Visibility”visible on a component or a band is an expression. When it is falsy, the component or the whole band is skipped, and a band that is skipped takes no space:
{ "id": "note", "type": "text", "text": "Out of stock", "visible": "row.stock === 0" }