Custom Table¶
The Custom Table component provides complete control over table structure and layout, allowing manual building of rows, columns, and cells with dynamic data binding and cell spanning capabilities.
Configuration¶
Use the Table Builder interface to create and customize your table structure:
| Option | Description |
|---|---|
| Add row | Insert rows with specific types (Header, Caption, Data, Footer) |
| Add row line | Create multi-line rows when rows need multiple lines |
| Add row group | Group multiple rows that need to repeat together (e.g., a section with caption, data, and footer rows) |
| Add cell | Add one cell to the selected row |
| Add cell group | Group cells when a certain set of cells needs to repeat |
| Add column | Add a cell to all rows (convenience function since each row is configured separately) |
Row types serve different purposes:
| Row Type | Purpose |
|---|---|
| Header | Classic table headers |
| Caption | Group headers for sections |
| Data | Standard data rows |
| Footer | Footer cells for summaries |
Once you have your table structure, configure individual cells with these options:
| Option | Description |
|---|---|
| Content Type | Set cell content type (Text, HTML, Elements) |
| Text | Text template expression for cell content (when using Text content type) |
| Align | Horizontal alignment of cell content |
| Vertical Align | Vertical alignment within cell |
| Columns span | Number of columns the cell spans |
| Rows span | Number of rows the cell spans |
Content types determine what you can place in cells:
| Content Type | Description |
|---|---|
| Text | Display text using text template expressions |
| HTML | Display formatted HTML content |
| Elements | Insert complex components like images, barcodes, charts, or other components |
To create dynamic tables that automatically generate rows based on your data:
| Option | Description |
|---|---|
| Repeat this element | Enable data-driven repetition |
| Source | Data source for repetition |
| Alias | Reference name for accessing data items |
For dynamic styling based on data conditions, use Additional Styles to apply custom CSS Style and Class options based on Condition expressions.
Standard styling options (colors, fonts, padding, borders) are available in the properties panel.
Use Cases¶
- Custom invoices - build invoice layouts with spanning cells for descriptions and repeating data rows for line items
- Complex reports - create reports requiring precise field positioning with mixed cell sizes and custom layouts
- Form layouts - design form-like structures with exact field placement and varying cell dimensions
Tips¶
- Use row lines when you need rows with multiple lines
- Leverage cell spanning for complex header structures
- Set data rows to repeat based on your data source to automatically generate multiple rows