Components

Overview

Components are the visual building blocks placed inside bands. Each component has a type, a position, and type-specific properties.

Position

Every component requires a position object that defines its placement within the band:

position: {
  x: 20,       // Horizontal offset from left edge (mm)
  y: 10,       // Vertical offset from band top (mm)
  width: 200,  // Component width (mm)
  height: 20,  // Component height (mm)
}

All values are in millimeters, relative to the band’s top-left corner.

Text component

The text component renders a string of text. It supports expressions, formatting, and alignment.

{
  type: 'text',
  position: { x: 0, y: 0, width: 200, height: 20 },
  content: 'Hello, {{name}}!',
  fontSize: 14,
  fontWeight: 'bold',
  fontFamily: 'Helvetica',
  color: '#1e293b',
  textAlign: 'left',
}

Properties

Property	Type	Default	Description
content	string	(required)	Text content, may include {{...}} expressions
fontSize	number	12	Font size in points
fontWeight	string	'normal'	'normal' or 'bold'
fontFamily	string	'Helvetica'	Font family name
color	string	'#000000'	Text color as hex string
textAlign	string	'left'	'left', 'center', or 'right'

Expressions in text

The content string can contain {{...}} expression delimiters. These are resolved at render time against the data context:

content: '{{customer.name}}'
content: 'Total: {{formatCurrency(sum(items, "price"), "USD")}}'
content: '{{uppercase(status)}}'

See the Expressions reference for the full syntax.

Table component

The table component renders a data-driven table with column headers and rows.

{
  type: 'table',
  position: { x: 0, y: 0, width: 530, height: 200 },
  dataBinding: 'items',
  columns: [
    { header: 'Product', field: 'name', width: 200 },
    { header: 'Qty', field: 'quantity', width: 80, align: 'center' },
    { header: 'Price', field: 'price', width: 120, align: 'right',
      format: 'currency' },
    { header: 'Total', field: 'total', width: 130, align: 'right',
      format: 'currency' },
  ],
}

Column properties

Property	Type	Default	Description
header	string	(required)	Column header text
field	string	(required)	Property name on each data item
width	number	auto	Column width in mm
align	string	'left'	'left', 'center', 'right'
format	string	none	'currency', 'number', 'date'

Data binding

The table’s dataBinding property references an array in the data context, similar to detail bands. The table renders one row per array element.

Planned components

The following components are planned for future releases:

• Image — embed images from URLs or base64 data
• Barcode — QR codes and standard barcodes (Code128, EAN-13)
• Chart — bar, line, and pie charts rendered inline

Next steps

• Expressions — dynamic content and built-in functions
• Data Binding — binding components to data arrays
• Bands — how bands organize components vertically